関数に Type Annotation （型注釈）をつける方法 - TypeScript

Jan 22, 2021

関数に Type Annotation をつける方法は

const add = (a: number, b: number): number => {
  return a + b;
};

となる。

関数のときは、引数と返り値に Type Annotation をつける。

なぜなら

const subtract = (a: number, b: number) => {
  a - b; 
};

本当は return するつもりがミス。だけど返り値に type annotation をつけていないためエラーは出ないから。

変数への Type Annotation との比較

変数に Type Annotation をつけるときは

const logNumber: (i: number) => void = (i: number) => {
  console.log(i);
};

と変数側に Type Annotation がついている。

関数定義方法による違い

function divide(a: number, b: number): number {
  return a / b;
}

const multiply = function(a: number, b: number): number {
  return a * b;
};

返り値がないとき

返り値がないときの Type は void。

const logger = (message: string): void => {
  console.log(message);
};

エラーで処理が途中で終わってしまうときは never。ただ never のケースはほぼ無い。

const throwError = (message: string): never => {
  throw new Error(message);
};

引数にオブジェクトを受け取るとき

引数にオブジェクトを受け取るときは、オブジェクトのプロパティを記述しプロパティに Type Annotation をつける。

const todayWeather = {
  date: new Date(),
  weather: 'sunny'
};

const logWeather = (forecast: { date: Date, weather: string }): void => {
  console.log(forecast.date);
  console.log(forecast.weather);
};

logWeather(todayWeather);

引数に分割代入をつかうときは

const logWeatherDestructuring = ({ date, weather }: { date: Date, weather: string }): void => {
  console.log(date);
  console.log(weather);
};

となる。