項目13　type（型エイリアス）とinterfaceの違いを知る

TypeScriptで名前付きの型を定義したい場合、2パターン存在する

interface

類似点

インデックスシグネチャ

関数型の定義

関数型を表現するのに自然な書き方

code:ts

type TFn = (x: number) => string;

const toStrT: TFn = x => '' + x; // OK

関数が呼び出し可能なオブジェクトであることを表現する場合

code:ts

interface IFn {(x: number): string;}

type TFnAlt = {(x: number): string;};

const toStrI: IFn = x => '' + x; // OK

const toStrTAlt: TFnAlt = x => '' + x; // OK

ジェネリックのサポート

型の拡張

相違点

code:ts

type Input = { /* ... */ };

type Output = { /* ... */ };

// 下記はinterfeceでは実現できない

type NamedVariable = (Input | Output) & { name: string };

code:ts

interface Person {name: string; age: string;}

type TPerson = Person & { age: number; }; // エラーにならないが、この型は使えない

interface IPerson extends Person { age: number:} // 型エラー

interfaceとextendsによる拡張のほうがより厳密

主に、型宣言ファイルで使われる

code:ts

interface IState {name: string; capital: string;}

interface IState {population: number;}

const wyoming: IState = {name: 'Wyoming', capital: 'Cheyenne', population: 578_000}; // OK

code:ts

export function getHummer() {

type Hummingbird = { name: string; weightGrams: number; };

const ruby: Hummingbird = { name: 'Ruby-throated', weightGrams: 3.4 };

return ruby;

};

const rubyThroat = getHummer();

// ^? const rubyThroat: Hummingbird

code:ts

export declare function getHummer(): {name: string; weightGrams: number;};

型システムは構造的であるため、どの値がこの型に代入可能かには影響しない。

このインライン化はコンパイラーのパフォーマンスに悪影響を及ぼすことがある

code:ts

export function getHummer() {

// ~~~~~~~~~

// Return type of exported function has or is using private name 'Hummingbird'.

// エクスポートされた関数の戻り値の型が、プライベート名 'Hummingbird' を持っているか、

// 使用しています。

interface Hummingbird { name: string; weightGrams: number; };

const bee: Hummingbird = { name: 'Bee Hummingbird', weightGrams: 2.3 };

return bee;

};

使い分け

ただプロジェクトの方針に従うべき