TypeScriptで関数の型定義をする方法をわかりやすく解説

この記事ではTypeScriptでの関数の型について書いています。

この記事を読んでいただくと、関数に型を定義する方法、typeを使って事前に型定義する方法、そしてジェネリクスについて理解を深められるはずです。

この記事を読むことで得られること

この記事を最後まで読んでいただくと、以下のことができるようになります。

TypeScriptで関数に型を直接定義する方法
typeを使った型定義方法で事前に型定義を行う
ジェネリクスの概念を理解して関数の型定義に適用する

これらのスキルはTypeScriptでの開発においてとてもに重要です。
型のエラーに悩まされることなく、安心してコーディングを楽しむことができます。

関数に型を定義する

まず初めに、TypeScriptでの関数に型を直接定義する方法について紹介します。
具体的には次のようなコードになります。

function greet(name: string): string {
  return `Hello, ${name}!`;
}

ここでは greet という関数に name という文字列型の引数を取り、文字列を返すという型を定義しています。

name: string で name 引数が文字列型であることを、: string で greet 関数が文字列を返すことをそれぞれ表しています。

また、引数が1つ以上ある場合は以下のように記述することができます。

function add(a: number, b: number): number {
  return a + b;
}

上記のコードは a と b という二つの数値を引数にとり、その和を返す関数 add を定義しています。
ここで、関数 add は数値を返すため、戻り値の型もnumberとなっていますね。

超便利なTypeScriptの8つのユーティリティ型で効率アップ

使いこなすととても便利なTypeScriptのPartial、Readonly、Pick、Required、Record、Omit、Exclude、Extractのユーティリティ型について特徴と使い所を解説します。

gizanbeak.com

typeを使って事前に型定義する

それでは次に、typeを使って型を事前定義する方法について紹介します。

先に型を定義しておくことで、同じ型の関数を複数作成するときに再利用できるためコードの見通しもよくなります。

type StringFunction = (s: string) => string;

const greet: StringFunction = (name) => {
  return `Hello, ${name}!`;
}

const shout: StringFunction = (word) => {
  return `${word.toUpperCase()}!`;
}

上記のコードでは StringFunction という型を事前に定義しています。
この型は文字列を引数に取り、文字列を返す関数になります。

その後に greet 関数と shout 関数を定義する際に、事前定義した StringFunction 型を使っています。
このように同じような関数を複数定義する場面で、型を再利用することができるわけですね。

TypeScript typeとinterfaceの違いと使い分けを解説

TypeScript初心者向け! typeとinterfaceの違いと使い分けを実践的な例で紹介します！

gizanbeak.com

ジェネリクス

最後にジェネリクスについて紹介します。

ジェネリクスは型をパラメータ化することで、一つの定義で様々な型に対応する関数やクラスを作ることができます。

function identity<T>(arg: T): T {
  return arg;
}

ここでは identity という関数を定義しています。

<T> はジェネリスク型引数で、これにより関数 identity は任意の型Tを受け入れることができます。
このTは関数を呼び出す際に具体的な型（number, stringなど）に置き換えられます。

TypeScript のアロー関数でジェネリクスを使いこなす方法

アロー関数でジェネリクスを使いこなすTypeScriptテクニックを分かりやすく解説！

gizanbeak.com

まとめ

以上がTypeScriptでの関数の型についての基本的な説明です。
この記事を通じて、関数に型を定義する方法、typeを使った事前の型定義、そしてジェネリクスの基本的な理解を深めていただければ幸いです！

また、これらを理解することでTypeScriptの強力な型システムを最大限に活用することができ、より堅牢でエラーに強いコードを書くことが可能になります。

Gizanbeak