TypeScript のtype とinterface の違い

TypeScript のtype とinterface の違い

typeとinterfaceの違いが判らなかったので試してみました。

type

type str = string; // stringの別名
let a: str = 'aiueo';
console.log(typeof a); // stringと表示される

string型をstrという別名にすることができました。

共用型をtypeを使って別名にしてみます。

type strbool = string | bool;
let a: strbool = true;
console.log(typeof a); // booleanと表示される

関数なんかもtypeを使うことができます。

type fnc = () => string;
let a: fnc = () => '1';
console.log(typeof a); // functionと表示される

interfaceとの違いを見てみます。

type Person = { // interfaceと違って、＝が必要
  name: string;
  age: number;
}

let i: Person = {name: 'takahashi',age: 20};
console.log(i.name); // takahashi
console.log(i.age); // 20

type xxxのxxxはエイリアスです。

interface

次にインターフェースで実装してみます。

interface Person {
  name: string;
  age: number;
}
let i: Person = {name:'takahashi',age:20};
console.log(i.name); // takahashi
console.log(i.age); // 20

結果は全く同じです。interfaceは継承ができますが、type aliasは交差型でしか継承ができない、くらいでしょうか。

また、Mapped typesはtype aliasのみでしか扱えない、などの違いがあるようです。

PlayGroundで以下をコーディングします。

type Person = {
  [xx in 'x' | 'y'] : number;
}
let j: Person = {'x': 20,'y': 30};

結果は以下になります。

var j = { 'x': 20, 'y': 30 };

TypeScript入門と基礎と使い方

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^