🐸

TypeScriptのオブジェクト型の型定義についての覚書

2022/03/03に公開

TypeScript、段階的にプロジェクトに導入しやすくて好きなんですが、objectの定義方法だけちょっと特殊ですよね。

文字列型、数値型、Boolean型の定義はシンプル

const authorName: string = 'Haruki';
const authorAge: number = 99;
const isAuthorFamous: boolean = false;

文字列型ならstring、 数値型ならnumber、Boolean型ならbooleanです。
なんとなく想像できますよね。

オブジェクト型の定義

ではオブジェクト型はどうでしょうか。

const author: object = {
  name: 'Haruki',
  age: 99,
  isFamous: false
}

なんとなくこうしたいですよね。でもこれではNGです。

オブジェクトの型定義の方法は代表的なもので2つあります。
1つは型定義をそのまま書く方法。
それぞれのキーにどんな値が入るかを定義します。

const author: {
  name: string;
  age: number;
  isFamous: boolean;
} = {
  name: 'Haruki',
  age: 99,
  isFamous: false
}

もう1つは型定義の部分を切り出すinterfaceを使う方法です。
こちらのほうが型定義の使い回しができるため、一般的です。

const author: Author = {
  name: 'Haruki',
  age: 99,
  isFamous: false
}

interface Author {
  name: string;
  age: number;
  isFamous: boolean;
}

Discussion