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?

TypeScriptのシグネチャおさらい

Last updated at Posted at 2023-11-04

背景

最近TypeScriptを扱っているがなんとなく使っていることが多く、もっと理解した上で仕事に活かしたかったため、改めて自分なりに学習しまとめてみました。

シグネチャ

メソッド名、パラメータの型、戻り値の型などで構成された組み合わせのこと。

インデックスシグネチャ

[key: T]: U

上記の構文のことをインデックスシグネチャという。この構文はオブジェクトがより多くのキーを含む可能性があることをTypeScriptに伝えており、読み方は「このオブジェクトについては、型Tの全てのキーは、型Uの値を持たなければならない」。

  • 型Tの部分はnumberかstringしか使用できない。
  • keyの部分は任意の言葉が使用できる。

使用例

const onigiri: {
  [okazu: string]: number
} = {
  'okaka': 2,
  'tsuna': 5
}

呼び出しシグネチャ

  • 関数そのものの型のこと。
  • アロー関数と似ている。
  • 関数を引数として渡す場合や、関数を別の関数から返す場合の片付けに使用する。
(a: number, b: number) => number

使用例

type Log = (message: string, userId: string) => void

const log: Log = (message, userId) => {
  console.log(userId, message)
}

オーバーロード

オーバーロードとは、メソッド名と戻り値の型が同じで、引数の型や数、並び順が違うメソッドを2つ以上定義すること。複数の呼び出しシグネチャを持つ関数。

使用例

type Origiri = {
  (kome: string, gu: string, nori: boolean): void
  (kome: string, gu: string): void
}

ジェネリック型(総称型)

複数の場所で型レベルの制約を強制するために使用される。
あらゆる型で同じコードを使うときに使用するため、型の安全性とコードの共通化が両立できる。

使用例

type Onigiri = {
  <T>(array: T[]): T
}

let onigiri: Onigiri = (array) => {
  return array[0]
}

onigiri<string>(['okaka', 'tsuna', 'ume']);

TypeScriptがどのようにバインド(型の紐付け)を行うのかを下記に示す。

  1. TypeScriptはarrayが何らかの型の配列であると理解する。
  2. onigiri関数の実行時にTypeScriptが渡した型から判断する。
  3. 配列['okaka', 'tsuna', 'ume']からシグネチャに現れるTは全てstringに違いないと判断する。
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?