【TypeScript】インターフェイス型とは何ですか?
TypeScript

【TypeScript】インターフェイス型とは何ですか?

作成日:2021年07月22日
更新日:2021年08月05日

以前、型エイリアスでオブジェクトの型を指定しました。

typescript-type-alias

【TypeScript】型エイリアスとは何ですか?

今回は、インターフェイス型でオブジェクトの型にしてみます。

こちらのコードがあったとします。

ts
type Profile = {
name: string;
age: number | string;
phoneNumber: string;
address: string;
};
function profile(user: Profile) {
user.name;
user.age;
user.phoneNumber;
user.address;
return user;
}

型エイリアスをインターフェイス型に変えてみます。

まず、interfaceと入力し、型の名前であるProfileを入力します。

ts
interface Profile

次に、イコール『=』を入力せずに{}を入力し、{}の中に型を指定します。

ts
interface Profile {
name: string;
age: number | string;
phoneNumber: string;
address: string;
}

これだけで完成です。

確認すると、

image2

型指定がされているようです。

image3

型エイリアスとインターフェイス型は、ほとんど同じです。

インターフェースは、拡張ということです。

例えば、emailを追加したい場合、

ts
interface Profile {
email: string;
}

と拡張すると、

image4

image5

エラーが発生せず、emailにも型指定できました。

同様の事を、型エイリアスで行うと、

ts
type Profile = {
email: string;
};

image6

『識別子 'Profile' が重複しています。』と指摘されます。

© 2024あずきぱんウェブスタジオ