---
# System prepended metadata

title: 'TypeScript１　（学習日10/15,16）'
tags: [TypeScript]

---

# TypeScript１　（学習日10/15,16）
## TypeScriptとは
TypeScriptは、JavaScriptに静的な型付けを行ったものである。Javaと同様に文字型が厳格に区別される。JavaScriptと互換性がある。ファイルはtsファイルとなる。

## インストール・コンパイル（JavaScriptに変換）
npm install -g typescriptでインストールできる。
tsc greeter.js　でTypeScriptファイルをJavaScriptファイルに変換できる。

## 型アノテーションを用いる
TypeScriptでは、各プロパティや変数への型指定が可能である。
person: stringのように、変数名:型名　で指定する。
また、クラスやインターフェースも利用可能である。
```typescript=
function greeter(person: string){
    return "Hello, " + person;
}

const user = "Ichigo";

document.body.innerHTML = greeter(user);
```
## 柔軟な型定義
TypeScriptはJavaScriptに型を付けた言語である。
但し、型はプログラミングのサポート機能の位置づけであるため、Javaのように必ずしも厳格に指定する必要があるわけではない。
* AでもBでも良い型定義
定義時に　|（orの意味）を用いて2つ以上の型を記入する。指定した型のどちらかであれば良いことになる。
``` typescript=
const birthYear: number | string;
//処理OKパターン
metro = 1980;
metro = "令和";
//エラーパターン
metro = null;
```
* AかつBの型定義
定義時に　&（andの意味）を用いて2つ以上の型を記入する。


* 変数に入れる値を特定の文字列に限定する
同様に値を入力して、特定の文字列のみを入力できる。
``` typescript=
const solail: "いちご" | "あおい" | "蘭";
//処理OKパターン
solail = "いちご";
solail = "蘭";
//エラーパターン
solail = "あかり";
```
* 値と型の混合
値と型を組み合わせても良い。

## いろいろな型の表し方
* any:なんでもOK
* unknown:未知の型。型アサーションが必要。
* type 任意の名前 = 型名　:型名に名前をつけられる。
* type オブジェクト名{属性名: 型名;} :オブオブジェクトの属性（書き込み不可）
* 属性名? :省略可能な属性名
* タグ付き合併型　一部の属性の値によって型が決定され、どちらかの型かが選択されるような合併型。

## 型ガード
2通りの選択肢があるときの、片方のパターンのみのロジックを記述する。
TypeScriptでしか表せない情報は扱えない。JavaScriptに変換できなければならない。
(例)
* 数値型 or null
* 数値型 or 文字列
* columnTypeが'check'という文字化けの場合のみ属性が増える。

### 組み込みの型ガード
typeofなどは、変数の型名を文字列で返す

### ユーザ定義の型ガード
Array .isArray

## 型アサーション
asでキャストする形。実行時には情報を一切参照しない。

## keyofとMap
ジェネリクスでよく用いられる。
キーの型情報を定義できる。
## インターフェースを用いた型定義
インターフェースでも型定義可能。

## TypeScriptで型をつけるメリット
* JavaScriptの使い方すべてをカバーできるよう機能を拡充している。
* コードの品質と読みやすさが高まる。
* リファクタリングがしやすい。
* 型自体が完璧なドキュメントである。
* ジェネリクスなどの高度な型定義に対応できる。

###### tags: `TypeScript`
