TypeScriptのtypeとinterfaceを比べてみた

TypeScript？

型付けできるJavaScript

let age: number = 0;

age = 28;

age = "ぞんぞん"; //エラー

いろんな型

型	意味	例
string	文字列	'ぞんぞん'
number	数値	28
boolean	真偽値	true
[]	配列	string[] → ['aaa', 'bbb', 'ccc']
any	制約なし

オブジェクトの型は？

普通に書くと読みづらい、管理しづらい🥺(ぱおん)

const miyazon: {name: string, age: number, department: string} = {
  name: "みやぞん",
  age: 28,
  department: "product"
}

interface vs type(型エイリアス)

オブジェクトの型指定にはinterfaceまたはtype(型エイリアス)を使う

interface

interface Employee {
  name: string;
  age: number;
  department: string;
}

const miyazon: Employee = {
  name: "みやぞん",
  age: 28,
  department: "product"
}

オブジェクトの型指定にはinterfaceまたはtype(型エイリアス)を使う

type(型エイリアス)

type Employee = {
  name: string;
  age: number;
  department: string;
}

const miyazon: Employee = {
  name: "みやぞん",
  age: 28,
  department: "product"
}

---

interfaceとtypeの違い

	interface	type
用途	クラス、オブジェクトの型定義	型に別名をつける
交差型, 共用体型, タプル型, マップ型	非対応	対応
同じ要素名の再宣言	拡張される	できない

「用途の違い」を感じる(interface)

VS Codeなどで名前をホバーしたとき、型本来の情報を出してくれますが、ここで違いが出ます。
interfaceは型そのものなので名前が出ます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386799/6728209e-a43a-4c17-7a0b-541617b00559.png" width="550">

「用途の違い」を感じる(type)

無名の型に別名を付けただけなので、本来の「無名の型」が表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386799/396b6dd6-2d78-7723-68d1-06aae333adde.png" width="550">

「同じ要素名の再宣言」を感じる

typeでは再宣言した時点でエラーとなるがinterfaceではどうなる...？

interface Employee {
  name: string;
}

interface Employee {
  age: number;
}

interface Employee {
  department: string;
}

「同じ要素名の再宣言」を感じる

エラーにならない！

interface Employee {
  name: string;
}

interface Employee {
  age: number;
}

interface Employee {
  department: string;
}

const miyzon: Employee = {
  name: "ぞんぞん",
  age: 28,
  department: "product"
}

どっちを使う？

• できることがtypeのほうが多い
• interfaceの再宣言による拡張でバグが発生しうる

型にはまらない人間でありたいが、私はtypeを選びます。

「複業クラウド」について

弊社Another worksでは複業マッチングプラットフォーム「複業クラウド」を開発しています！

▼複業でスキルを活かしてみませんか？複業クラウドの登録はこちら！
https://talent.aw-anotherworks.com/?login_type=none