TypeScriptで関数の型(引数・返り値の型)を定義する

TypeScript-Function

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、TypeScriptで関数の型(引数・返り値の型)を定義する方法について解説していきます。

TypeScriptでは、関数の引数や返り値に型を定義することができます。

つまり、どんな型の引数(Parameter)が入ってきて、どんな返り値(Result)となるかと言うことです。

関数に直接、型を定義するパターン

まずは、関数に直接、型を定義するパターンを見ていきます。

function(関数宣言)の場合

次のfunction(関数宣言)では、引数は string で、返り値は何もないので void です。

返り値の型定義は、引数の入る() の後に記述します。

// function(関数宣言)に型定義
function helloFunc (name: string): void {
    console.log(`${name}なのだ!`);
}

アロー関数(関数式)の場合

アロー関数(関数式)の場合の型定義も上記と同様の考え方です。

返り値の型定義は、引数の入る() の後に記述します。

次のアロー関数では、引数は string で、返り値も string です。

// アロー関数(関数式)の場合
const helloArrowFunc = (name: string): string => {return `${name}なのだ!`};

typeエイリアスを使って、関数の型を定義するパターン

関数に直接、型を定義するパターンと、typeエイリアスを使って、関数の型を定義するパターンには、少し違いがありますので、注意が必要です。

メソッド構文

JavaScript では関数は Object であるため、このように表現することができます。

(引数の型): 戻り値の型; {} の中に記述することで型定義するのがメソッド構文と呼ばれる記法です。

// (引数の型): 戻り値の型; を {}の中に記述する
type HelloFuncType1 = {
    (name: string): void;
};

const helloRobotama1: HelloFuncType1 = (name: string) => console.log(`${name}なのだ!`);

アロー関数構文

(引数の型) => 戻り値の型; の形式で記述する型定義する記法をアロー関数構文と言います。

アロー関数構文のほうが短くシンプルなので、関数は、アロー関数構文で型宣言する方がおすすめです!

// (引数の型) => 戻り値の型の形式で記述する
type HelloFuncType2 = (name: string) => void;

const helloRobotama2: HelloFuncType2 = (name: string) => console.log(`${name}なのだ!`);

関数から関数の型を抽出して、宣言する

typeof演算子を利用することで、関数から関数の型を抽出することが可能です。

// アロー関数(関数式)
const helloArrowFunc = (name: string): string => {return `${name}なのだ!`};

// 関数から関数の型を抽出して、宣言する
type TypeArrowFunc = typeof helloArrowFunc;

// [ 抽出結果 ]
// type TypeArrowFunc = (name: string) => string

typeof演算子の使い方については、以前の記事で解説しています。

関数のGenerics(ジェネリクス)・型定義

関数のGenericsの定義をする際は、引数の入る () の前に < 型引数 > の形で定義することができます。

// 関数のGenerics(ジェネリクス)・型定義

function ParameterTypeJudg <Type> (param: Type): void {
    console.log(`Parameter: ${param}の型は、${typeof param}`);
}

type GenericsFunc = <Type>(param: Type) => Type;

const ParameterTypeJudg2: GenericsFunc = param => { return param };

Genericsの使い方については、以前の記事で解説しています。

TypeScript書籍

参考・引用

  1. 関数の型の宣言 (function type declaration)
  2. TypeScriptで関数の型定義を書く方法まとめ

最近の投稿