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

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

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

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を入力します。

interface Profile

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

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

これだけで完成です。

確認すると、

image2

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

image3

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

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

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

interface Profile {
  email: string
}

と拡張すると、

image4

image5

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

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

type Profile = {
  email: string
}

image6

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

ブログ一覧