この記事は何？
TypeScriptとは何か、何がいいのかを伝えようと頑張った記事の第4弾です！
1~3弾は、TypeScriptの書き方にフォーカスしましたが、
この記事では、TypeScriptの特徴である**Structural Type System（構造型システム）**について説明していきます。
@ 過去の記事👇も合わせて御覧ください！
1. JavaScriptを知っている方がTypeScriptをなんとなく理解するための記事① ~はじめに~
2. TypeScriptをなんとなく理解するための記事② ~型を組み合わせる: Union~
3. TypeScriptをなんとなく理解するための記事③ ~汎用的な型を作成する: Generics~
4. TypeScriptをなんとなく理解するための記事④ ~構造型~ ← この記事
@ TypeScriptがなんとなく理解できたら、是非インストールして、触ってみてください！
👉 【画像で説明】シンプルにTypeScriptを導入して使う方法
構造型って何だ？
よく比較されるものとして、公称型と構造型があります。
公称型に関しては、JavaやPHPの型システムに利用されており、クラス名の一致で型の互換性（同じような型かどうか）を識別します。
一方で、TypeScriptの構造型は何なのでしょうか？
構造型（Structural Type）は、型の構造さえ同じであれば互換性があると判断する仕組みのことです。
この記事では、TypeScriptの大きな特徴である、構造型について理解していきます。
コードから構造型の理解を深める
では、実際にコードを見ながら構造型について理解していきましょう。
以下に、型の構造が同じコードを書いてみました。
// { name: string, cry: string }の構造を持つAnimal型を作成
interface Animal {
name: string;
cry: string;
}
const animalCryInfo = (animal: Animal) => {
console.log(`${animal.name}の鳴き声は、${animal.cry}`);
}
// vividMorayは{ name: string, cry: string }と同じ構造 → Animal型と同じ
const vividMoray = { name: 'ハナヒゲウツボ', cry: 'ありません' };
// vividMorayは、引数がAnimal型と構造が一致するので、動作する！
animalCryInfo(vividMoray); // ハナヒゲウツボの鳴き声は、ありません
最初にinterfaceを利用して、{ name: string, cry: string }の構造を持つAnimal型を作成しています。
interface Animal {
name: string;
cry: string;
}
次に、Animal型を引数に持つ関数animalCryInfoを定義しています。
const animalCryInfo = (animal: Animal) => {
console.log(`${animal.name}の鳴き声は、${animal.cry}`);
}
次に、オブジェクトvividMorayを定義します。このオブジェクトの型は推論により{ name: string, cry: string }と解釈されます。
const vividMoray = { name: 'ハナヒゲウツボ', cry: 'ありません' };
最後にanimalCryInfo関数の引数に、オブジェクトvividMorayを入れてみます...。
もし、Animal型とオブジェクトvividMorayが同じ型（構造）であれば、問題なく実行されますが。。。
animalCryInfo(vividMoray); // ハナヒゲウツボの鳴き声は、ありません
問題なくハナヒゲウツボの鳴き声は、ありませんと出力されます！
このように、型の構造に焦点を当てて、型チェックする仕組みが**構造型システム（Structural Type System）**です。
TypeScriptを記述するときは、この構造型を意識して書いたほうが良さそうです！
さもなくば以下のようなエラーが出てしまいます。😱
interface Animal {
name: string;
cry: string;
}
const animalCryInfo = (animal: Animal) => {
console.log(`${animal.name}の鳴き声は、${animal.cry}`);
}
const vividMoray = { name: 'ハナヒゲウツボ'};
animalCryInfo(vividMoray);
// タイプの引数 '{ name： string; } 'はタイプ'Animal'のパラメータに割り当てることはできません。
// プロパティ'cry'がタイプ '{ name： string;} 'にありませんが、タイプ' Animal'.ts（2345）では必須です
終わりに
今回は第1~3回と異なったTypeScriptの特徴を紹介しました。
この記事を見て、TypeScriptを触ってみよう！という人が増えていただければ幸いです👍
わかりやすかったら、是非LGTM✨お願いします！（励みになります！）
@ ハンズオンも書いたので、さっそく使ってみたい人は是非！
👉【TypeScriptハンズオン①】男もすなるTypeScriptといふものを、女もしてみむとてするなり