tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

【typescript】interfaceは拡張ができる、typeは拡張ができない

今回は type と interface の違いについて。

# オブジェクトに型を定義する

アノテーションの部分をオブジェクト{}にすることで可能。
※型アノテーション = stringやbooleanのような注釈をつけて型を定義すること

//通常の型アノテーション
let name: string = "tamakipedia";

//オブジェクトの場合
let obj: {name: string, age: number, isHandsome: boolean} = 
{
 name: "tamakipedia",
 age: 20,
 isHandsome: true
}

interface

オブジェクトの型アノテーションは長すぎると読みづらいので
名前をつけることが可能。

// オブジェクトの型を定義
interface Human {
 name: string, 
 age: number, 
 isHandsome: boolean
}

//型をHumanにする
let obj: Human = 
{
 name: "tamakipedia",
 age: 20,
 isHandsome: true
}

let obj.name = 20 //Type 'number' is not assignable to type 'string'

type

interfaceもtype同様、型に名前をつけて参照できるようにします。
こちらはタイプエイリアスと呼ばれるそうです。

// 代入してる
type Human = {
 name: string, 
 age: number, 
 isHandsome: boolean
}

type と interface の違い

interfaceは拡張ができる

interface Human {
 name: string, 
 age: number, 
 isHandsome: boolean
}

//新しいプロパティを追加
interface Human {
 isAdorable: boolean
}

//型をHumanにする
let obj: Human = 
{
 name: "tamakipedia",
 age: 20,
 isHandsome: true,
 isAdorable: true
}

おしまい

今読んでいる参考書にはinterfaceを使っていることが多く、
別の記事にtypeを使ったチュートリアルがあったので調べてみました。
拡張できると可読性が低くなるので使用注意ですね!!

参考 https://zenn.dev/luvmini511/articles/6c6f69481c2d17