【イラスト付き】型の定義【丁寧に解説】
はじめに
皆さんこんにちは。
今回はTypeScriptの型の定義をご紹介します。
TypeScriptは文字列や数値のような一般的な型以外にもオブジェクトや関数の型を独自に作ることができます。今回はTypeScriptの型の定義方法についてご紹介します。
こんな人にオススメ
- TypeScriptの型の定義方法が知りたい
- TypeScriptの型の定義の例が知りたい
初めて学習する方にも分かるように、丁寧に解説していきます。
すでに利用されている方も、是非一度目を通していただけると嬉しいです。
😋 TypeScriptの型の定義をご紹介します♪
型エイリアス
まずポイントをチェック
- typeキーワードで型に名前をつけて管理
- 型の再利用が可能になる
- 型名により可読性が上がる
型エイリアスとは型に名前をつけて管理する仕組みです。オブジェクトのような複雑な型でも型名をつけることで再利用しやすくなります。
また、分かりやすい型名にすることで、コードの可読性を高めることもできます。
型エイリアスにはtypeキーワードを使います。
// 型エイリアス
type moji = string;
type book1 = { title: string, price: number };
😋 typeで型に名前をつけられます♪
インターフェイス
まずポイントをチェック
- interfaceキーワードでオブジェクトの型を宣言
- オブジェクトの型の宣言においてはtypeとの違いはない
- インターフェイス名により可読性が上がる
インターフェイス宣言でもオブジェクトの型を定義できます。
オブジェクトの型の定義においてinterfaceと型エイリアス（type）はどちらも同じです。型エイリアスと同様にインターフェイス名により可読性の向上が期待できます。
interfaceキーワードでインターフェイスの宣言ができます。
// インターフェイス
interface book2 { title: string; price: number; };
😋 interfaceでオブジェクトの型を定義できます♪
関数の型宣言
まずポイントをチェック
- 引数と戻り値の型を指定可能
- 戻り値型はreturnキーワードの値から推論される
- 戻り値なしはvoidを指定
型エイリアスで関数の型を定義することができます。
引数と戻り値の型を指定することができます。これにより、関数がどのようなデータを期待し、どのようなデータを返すかを明確に定義できます。
戻り値がない場合は戻り値型にvoidを指定します。これにより明示的に戻り値がないことを示すことができます。
// 関数の型宣言
type fn1 = (x: number, y: number) => string;
type fn2 = () => void;
😋 引数、戻り値の型を定義できます♪
配列の型宣言
まずポイントをチェック
- 型名[]の形式で宣言
- Array<型名>でも宣言可能（ジェネリクスを利用）
型エイリアスで配列の型を定義することができます。配列内で扱う要素を明確化することで想定外の型の値が入らないようにできます。
配列の型宣言には２通りの書き方があります。なお、どちらの方法でも機能に違いはありません。
「[]」の前に要素の型を指定することで宣言できます。
Array型のジェネリクスに要素の型を指定することでも宣言できます。
// 配列
type score1 = number[];
type score2 = Array<number>;
😋 配列内で扱う要素の型を定義できます♪
発展的なオブジェクトの型宣言
まずポイントをチェック
- オプションプロパティ：特定のプロパティを省略可能とする
- インデックスシグネチャ：プロパティ名を動的に指定可能とする
- 【補足】合わせて知りたい参照方法
- オプショナルチェイニングはプロパティが存在する場合のみ参照
- 非nullアサーションでコンパイラに初期化されてることを明示
オブジェクトの型を宣言する際の特殊な書き方があります。
プロパティを省略可能に設定する場合、プロパティ名の後ろに「?」をつけます。このように省略可能なプロパティはオプションプロパティと言います。
// オプションプロパティ
interface opt { title: string; price?: number; };
プロパティ名を動的に指定する場合はプロパティ名を「[]」で宣言します。下記のkeyは型変数を表しており、通常Kやkeyが利用されます。このように動的にプロパティ名を決定する記述をインデックスシグネチャといいます。
下記の場合は、文字列型の任意のプロパティに文字列型の値をセット可能な型です。
// インデックスシグネチャ
interface idx { [key: string]: string; };
😋 プロパティの省略や動的な指定ができます♪
【補足】型定義ファイル
まずポイントをチェック
- 拡張子は.d.ts
- パッケージを配布する際に用意する
- 利用するパッケージに型定義ファイルが含まれていない場合に自作する
- コンパイル時に -d オプションを指定して生成
型定義ファイルとはコード内で利用している型情報を定義したファイルです。パッケージを配布する際に用意し、ソースに同梱します。
作成するには、コンパイル時に -d オプションを指定します。
tsc -d xxx.ts
また、利用したいパッケージに型定義ファイルが含まれていない場合に自作することもできます。
TypeScriptはライブラリやパッケージを利用する際はそれについても型情報を必要とします。型定義ファイルが提供されていない場合は、第三者が作成したものを利用するか自作します。
😋 利用している型情報が記載されてます♪
おわりに
皆さん、お疲れ様でした。
ここまでご覧いただき、ありがとうございました。
型の定義について確認をしていただきました。
TypeScriptではオブジェクトや関数などを型定義することで再利用生や可読性を高めることができます。
型が定義されていることでコードが理解しやすく安全になりますので、型を定義して使ってみましょう。
😋 これからもプログラミング学習頑張りましょう♪
参考リンク集
参考リンク集（サンプルコード）
Discussion