参考:TypeScriptの型入門, TypeScript Deep Dive 日本語版
前回:【実務未経験】初学者が0から学ぶTypeScript①
※もし私の記事に誤りがありましたら、ご教示いただけますと幸いです。
##オブジェクト型とinterface構文
interfaceという構文を使うことで、オブジェクトとプロパティが持つ値にも型をつけれる。
interface :接合部分、接触面、接点、仲立ち、連絡(係)、橋渡し(役)
今回は、色々な生き物の、種類(name)
体長(size)
オスかどうか(male)
の値をプロパティとしてもつCreatureData
というオブジェクト型を作ってみました。
interface CreatureData {
name: string;
size: number;
male: boolean;
}
体長100cmのオスのマグロならこんな感じ
interface CreatureData {
name: string;
size: number;
male: boolean;
}
const tuna: CreatureData {
name: "tuna",
size: 100,
male: true,
}
性別を持たない体長5cmのかたつむりだと・・・
(かたつむりって性別がないんだって)
interface CreatureData {
name: string;
size: number;
male: boolean;
}
const snail: CreatureData {
name: "snail",
size: 5,
}
//定数snailにはmaleプロパティが無い為型エラー
今度はオスかメスかわからない生き物にも型をつけたいので、CreatureData2
というオブジェクト型も追加してみました。
さらに最初にいたマグロと同じ体長のマグロをもう1尾発見したのですが、今度のは損傷が激しく性別が判断できませんでした。このマグロはCreatureData2
型をもつ定数damageTuna
としてtuna
オブジェクトを代入して扱ってみましょう。
interface CreatureData {
name: string;
size: number;
male: boolean;
}
interface CreatureData2 {
name: string;
size: number;
}
const tuna: CreatureData {
name: "tuna",
size: 100,
male: true,
}
const damageTuna: CreatureData2 = tuna;
負傷したマグロ**「定数damageTuna
はCreatureData2
型なんだからCreatureData
型の定数tuna
を代入したら型エラーになるんじゃ?(かたつむりの例でダメって言ってなかった?)」**
TypeScriptは構造的部分型っていう仕組みを採用していて、この場合CreatureData
はCreatureData2
の部分型として問題なく動作するんだって!!
代入する定数の型が、新しく宣言した定数の部分型に当たる場合はこんな使い方ができるみたい。