1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

TypescriptのinterfaceでTypeSafeなコードにリファクタしてみた

Last updated at Posted at 2021-11-18

TypeScriptのInterfaceを定義することで定義したオブジェクトにinterfaceで型を定義してみました

インターフェースとは

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

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

interfaceの定義

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

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で実装する
AgencyInterfaceのプロパティをクラスに定義していない場合はコンパイルエラーとなります

誰かがあなたのためにinterfaceで宣言したオブジェクト構造に従わなければならないクラスを使いたい場合、互換性を保証するためにimplementsキーワードを使うことができます:

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

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

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

誰かがあなたのためにinterfaceで宣言したオブジェクト構造に従わなければならないクラスを使いたい場合、互換性を保証するためにimplementsキーワードを使うことができます:

export interface MathInterface {
  sum: number,
} 

function hoge(params:MathInterface){
 return sum
}

// OK
hoge(sum:1);

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

最後に

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?