[TypeScript] 型宣言についてまとめた

概要

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 と同意義;

以上です。
適宜更新していきます。

次節として、オブジェクトに関する記事を公開しておりますので、よろしければご覧ください🙏

追記

編集リクエストありがとうございます🙏