interfaceのススメ with TypeScript

概要

TypeScriptのinterfaceについて備忘録としてまとめました

インターフェースとは

オブジェクトの型に名前をつけて型を定義できるもの

TypeScriptの核となる基本原則のひとつに、値の型チェックが値が持つ形状に焦点を当てていることがあげられます。 これは、時には"ダックタイピング"または"構造的部分型"と呼ばれます。 TypeScriptでは、インターフェースはこれらの型の名付けの規則を満たし、 また、プロジェクトの外観を構成するだけでなく、コードの構造を定義する強力な方法になります。

interfaceの定義

オブジェクトのプロパティ名にデータ型を定義します
extendsで継承することで継承元のinterfaceを継承先に付与できます

AgencyInterface.ts

export interface AgencyInterface {
  agency_id: number
  name: string
  branch_name: string
  staff_name: string
  ins_ts?: string
}

export interface MathInterface {
  one: number,
  two: number,
  three: number,
} 

export interface AgencyDetailInterface extends AgencyInterface {
  parent_agency_id: number
  prefecture_id: number
  post_code: string
  city: string
  town_address: string
  building: string
  president: string
  staff_email: string
}

クラスにインターフェースを実装する

implementsを使用してクラスをinterfaceで実装する
プロパティをクラスに定義していない場合はコンパイルエラーとなります

SampleClass.ts

class SampleClass implements AgencyInterface {
  name: string
  agency_id: number
  branch_name: string
  staff_name: string
  ins_ts?: string
}

引数にインターフェースを定義する

AgencyInterface.ts

export interface MathInterface {
  sum: number,
} 

function hoge(params:MathInterface){
 return sum
}

// OK
hoge(sum:1);

// BAD コンパイルエラー
hoge(sum:"1");

最後に

読んでいただきありがとうございます。
今回の記事はいかがでしたか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。