概要
TypeScriptの基本的な型宣言について、まとめました。
【目次】
まずは基本的な型宣言をマスターしよう！ ←🈁
オブジェクト型の型宣言をマスターしよう！
関数の型定義をマスターしよう！
配列をマスターしよう！
インターフェースをマスターしよう！
クラスを使いこなそう！
型修飾子についての理解を深めよう！
ジェネリックをマスターしよう！
独自の構文拡張をマスターしよう！
型アノテーション
変数にデータ型を指定したい場合に用いる型宣言
let 変数名: 型（string, number, boolean...）
let hoge: string
以下の型定義はTypeScriptがデータ型を推測できるため冗長
let foo: string = "value";
型エラーと構文エラーについて
型エラー -> JavaScriptへのコンパイルは問題なく実施できるケースが多い
構文エラー -> JavaScriptへのコンパイルが失敗するケースが多い
合併型
変数が複数のデータ型を取りうる場合に使用する
let 変数名: 型1 | 型2 …
let bar: string | number;
// 以下は型エラーが発生しない
bar = "string"
bar = 1234
合併型で利用できるプロパティ
利用できるすべてのデータ型で所持しているプロパティのみ
let baz: string | number;
baz = Math.random() > 0.5 ? "string" : 1234
baz.toString // OK（string, number型で所持しているプロパティ）
baz.length // NG（lengthはstring型のみ保持） Property 'length' does not exist on type 'string | number'. Property 'length' does not exist on type 'number'.
上記のようなケースでは変数が取りうるデータ型を限定させてあげれば良い。
let qux: string | number;
qux = Math.random() > 0.5 ? "string" : 1234
if (typeof qux === "string") {
qux.length // OK（quxが必ずstring型であることがこのコンテキストでは保証されているため）
}
リテラル型の型アノテーション
リテラル型(string, number…)は特定の値をデータ型として指定できる
let firstName: "takashi" | "taro";
firstName = "takashi" //OK
firstName = "tomoya" //NG: Type '""' is not assignable to type '"takashi" | "taro"'.
型エイリアス
TypeScriptではデータ型に対して名前をつけて管理できる
同じ構造のデータ型が多い場合は、コードの可読性が上昇する。
type anyData = string | number | boolean;
let dataFirst: anyData; // let dataFirst: string | number | boolean と同意義;
let dataSecond: anyData; // let dataSecond: string | number | boolean と同意義;
まとめ
以上です！
型宣言について理解を深めていきましょう〜
追記
編集リクエストありがとうございます🙏