# TypeScript1 (学習日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`