Typescript(オブジェクト型) - 駆け足エンジニアの記録

はじめに

今回は、javascriptでも馴染み深いObjectについてです。TypescriptはObjectがどのようのkeyを持っているべきか、それらの値の型はなにかなどきめ細かくObjectの型を定義することができます。では以下コードで確認しましょう。

Object型の定義

①型指定

const person: { name: string; age: 12 } = {
  name: "naruto",
  age: 12,
};
console.log(person); //{name: "naruto", age: 12}

型指定では: { name: string; age: 12 } と定義しています。これはコードを読むにあたって大切なことです。ここではpersonオブジェクトではnameプロパティとageプロパティしか受け付けないことが一目瞭然です。よって他のプロパティを追加しようとするとエラーになります。

const person: { name: string; age: 12 } = {
  name: "naruto",
  age: 12,
  gender;'male, 
//"message": "型 '{ name: string; age: 12; gender: any; male: any; }' を型 '{ name: string; age: 12; }' に割り当てることはできません。
};

②型推論

ここまで型指定による型の定義を見てきましたが、前回の記事で少し触れたTypescriptには型推論という機能があります。型指定での例を型推論で書き直すと、

const person= {
  name: "naruto",
  age: 12,
};
console.log(person); // //{name: "naruto", age: 12}

このようにjavascriptと同様の記述でオブジェクト型を定義できます。また型推論では他のプロパティを追加することは可能です。

const person = {
  name: "naruto",
  age: 12,
  gender: "male",
};
console.log(person);//{name: "naruto", age: 12, gender: "male"}

終わりに

コードを書くとき、型推論によるコードを見ると型指定によるコードは間違いなく冗長でしょう。しかし、コードを読むとき型指定によるオブジェクトの制限による恩恵を得られません。ここで大切なことは、オブジェクト名を見たときにどのようなプロパティを持っているか、また型の値はなにかがすぐに分かる状態にしておくことでコードの可読性が上がるということです。
実際、型指定でオブジェクトを制限するケースはなくinterfaceやtypeを用いてオブジェクトを制限します。また別途記事にします。