Zenn
🦩

TypeScript 学習記録 #6（InterfaceとType Alias）

2021/05/15に公開
TypeScript
idea

TypeScript 学習記録 #5 の続編。
今回のメインテーマ、「InterfaceとType Aliasについて」。

今回主に参考にした教材：

見返す用リスト（主に自分用）

TypeScript基礎学習を完走したので、いつでも見返すことの出来るようにリスト化しておく（5/17）

InterfaceとType Alias

以下のことについて学んだ。

  • InterfaceとType Alias（型エイリアス）の違い
    • InterfaceとType Aliasの特徴の違い
    • 現在、機能面ではどちらも大差はない
    • 拡張性が高いのはInterfaceだが、その拡張性が必要となるかどうかはケースバイケース
    • Interfaceはextendsによって、元の型を継承したサブインターフェースを作ることが出来る（Type Aliasで作成した型をextendsすることも出来る）

違いまとめ（動画参照）

Interface Type Alias
用途 オブジェクト・クラス・関数の構造を定義するため 複数の場所で再利用する型に名前をつけるため
拡張性 同名のinterfaceを宣言すると型がマージ 同名のtypeを宣言するとエラー
継承 extendsによる拡張ができる 拡張は不可。交差型で新しい型エイリアスを作る
使用できる型 オブジェクトと関数の方のみ宣言できる オブジェクトや関数以外のプリミティブ、配列、タプルなども宣言できる
いつ使う ライブラリ開発ではInterface? アプリ開発ではType Alias?

それぞれの型定義の方法（基本的にはほとんど同じ）

// Interfaceでの型定義
interface Knight {
  hp: number;
  sp: number;
  weapon: string;
  swordSkill: string;
}

// Type Aliasでの型定義
type Knight = {
  hp: number;
  sp: number;
  weapon: string;
  swordSkill: string;
};

// Interface と Type Alias のどちらの型を使っても同じ
const player1: Knight = {
  hp: 100,
  sp: 30,
  weapon: "木の剣",
  swordSkill: "みだれ斬り",
};

Interface

Interfaceは、同名のInterfaceを宣言すると、型が追加（マージ）される。

// Interface
interface Bread {
  calories: number;
}

// 同名のInterfaceを宣言すると型が追加（マージ）される
// この時点で型`Bread`は`calories`と`type`という2つの属性を持っている
interface Bread {
  type: string;
}

// `Bread`型を満たす2つの属性を指定しないとエラーになる
const croissant: Bread = {
  calories: 200,
  type: "croissant",
};

また、Interfaceは、元の型を拡張してサブインターフェースを作成することが出来る。

// 元の型
interface Book {
  title: string
  page: number
}

// 元の型を拡張してサブインターフェースを作成（クラスの継承に似てる）
// Book型が持つ`title`属性と`page`属性を継承している
interface Magazine extends Book {
  cycle: "daily", "weekly", "monthly", "yearly"
}

// `Magazine`型を満たす3つの属性を指定しないとエラーになる
const jump: Magazine = {
  title: "週刊少年ジャンプ",
  page: 300,
  cycle: "weekly",
}

Type Alias

Type Aliasは、交差型（Intersection Type：A & B）を用いて型の結合などをする。

// Type Alias
type Curry = {
  calories: number;
  spicyLevel: number;
};

type Rice = {
  calories: number;
  gram: number;
};

// 交差型を用いて型の結合をする（A＆B）
type CurryRice = Curry & Rice;

// `CurryRice`型を満たす3つの属性を指定しないとエラーになる
const curryRice: CurryRice = {
  calories: 500,
  spicyLevel: 5,
  gram: 300,
};

ここまでの感想

InterfaceとType Aliasの違いについて理解した。基本的にはType Aliasで型定義する方針で必要に応じてInterfaceを使い分ける形で運用していこうと思う。

トラハックさんの動画も残すところあと「非同期処理」の回のみとなった。それを見たあと、Reactに関する型定義の方法を色々と調べてまとめて、それが終わったら実際にTypeScriptを用いてじゃけぇさんのReact入門講座をTypeScriptで作り変えることをしようと思う。

楽しくなってきた:-)

GitHubで編集を提案

Discussion