はじめに
この記事ではTypeScriptにおけるオブジェクトの型注釈について解説します。
型注釈とは…?
型注釈とは、TypeScriptでは変数宣言するときに、その変数にどんな値が格納できるかを指定するものになります。
その指定のことを型注釈(Type annotation)と言います。
例えば、数値型を格納するときの型注釈は、以下のようになります。
const count: number = 1;それでは、オブジェクトの場合はどうなるかを解説していきます。
オブジェクトの型注釈
結論から言うと、オブジェクトの型注釈は以下のように書きます。
let rectangle: { width: number; height: number };上記のようにオブジェクトに型注釈をすることで、以下のような警告を出してくれるようになります。
let rectangle: { width: number; height: number };
rectangle = { width: "1000", height: 500 };
// Type 'string' is not assignable to type 'number'.
rectangle = { width: 1000 };
// Property 'height' is missing in type '{ width: number; }' but required in type '{ width: number; height: number; }'.上記の例では、以下の時に警告を出してくれています。
- 指定した型に合わない値を代入した場合
- 必要となるプロパティがない場合
型注釈をする際にプロパティを「;」で区切っていましたが、以下のように「,」で区切ることも可能です。
let rectangle: { width: number, height: number };しかし、コード整形ツールであるPrettierがオブジェクト型注釈を直すとき、「,」を「;」に置き換えるため、「;」で区切る方が推奨されているようです。
オブジェクトの型注釈は以下のように改行することもできます。
let rectangle: {
width: number;
height: number;
};インラインの型注釈の代わりに、型エイリアスを使った書き方も可能です。
type rectangle: { width: number; height: number };型エイリアスについては以下を参照ください。
メソッドの型注釈
オブジェクトの型注釈には、メソッドの型注釈を書くこともできます。
let counter: {
increment(prev: number): number;
};
counter = {
increment(prev: number) {
return prev + 1;
},
};関数構文の場合は以下となります。
let counter: {
increment: (prev: number) => number;
};オブジェクトの型推論
オブジェクトは型推論もしてくれます。
オブジェクトの値を変数宣言で格納する場合は型注釈を省略できます。型が値から自動的に判別されます。
let rectangle = { width: 1000, height: 500 };
// let rectangle: { width: number; height: number };と型が推論される。Record<Keys, Type>
Record<Keys, Type>はプロパティのキーの型がKeysあり、プロパティバリューの型がTypeであるオブジェクトを作るユーティリティ型になります。
let cicle: Record<string, number>;
cicle = { radius: 10, centerX: 0, centerY: 0 };object型
推奨はされていませんが、オブジェクトの型注釈にはobject型を用いることもできます。
let rectangle: object;
rectangle = { width: 1000, height: 500 };推奨されていない理由としては以下です。
- どんなプロパティでも格納できてしまう。
- プロパティが参照できない。
どんなプロパティでも格納できてしまう
let rectangle: object;
rectangle = { width: 1000, haight: 500 };
// heightを誤ってhaightとしてしまったが、警告されない。プロパティが参照できない
let rectangle: object;
rectangle = { width: 1000, height: 500 };
const h = rectangle.height;
// Property 'height' does not exist on type 'object'.上記より、オブジェクトを型注釈する場合は、object型をできるだけ使わずに、プロパティまで型を定義することが推奨されます。
まとめ
この記事ではTypeScriptにおけるオブジェクトの型注釈について解説しました。
是非、いいねやコメントをお願いします。
コメント