関数リテラルだけじゃない！TypeScriptで矢印関数の型を指定する4つの方法

TypeScript の矢印関数で戻り値の型を指定する方法

概要

1. 関数リテラルの後に => 演算子と戻り値の型を記述する
2. as キーワードを使って型エイリアスを定義する

関数リテラルの後に => 演算子と戻り値の型を記述する

この方法は、最も簡潔で一般的な方法です。以下の例のように、関数リテラルの後に => 演算子と戻り値の型を記述します。

const add = (x: number, y: number): number => {
  return x + y;
};

上記の例では、add 関数は 2 つの数値を受け取り、その合計値を返す関数です。=> 演算子の後に number 型を記述することで、add 関数の戻り値が数値であることを明示しています。

as キーワードを使って型エイリアスを定義する

この方法は、複数の場所で同じ型を使用する場合に便利です。以下の例のように、as キーワードを使って型エイリアスを定義します。

type Adder = (x: number, y: number) => number;

const add: Adder = (x, y) => {
  return x + y;
};

上記の例では、Adder という名前の型エイリアスを定義し、number 型を受け取り、number 型を返す関数を表す型としています。その後、add 関数は Adder 型の変数として宣言されています。

• 簡潔さを求める場合は、1. の方法を使うのがおすすめです。

• 戻り値の型が void の場合は、=> void と記述します。

関数リテラルの後に => 演算子と戻り値の型を記述する

// 数値の配列を受け取り、その合計値を返す関数
const sum = (numbers: number[]): number => {
  return numbers.reduce((a, b) => a + b, 0);
};

// 文字列の配列を受け取り、その要素を結合して返す関数
const join = (strings: string[]): string => {
  return strings.join(", ");
};

// オブジェクトを受け取り、そのプロパティの値を返す関数
const getProp = <T, K extends keyof T>(obj: T, prop: K): T[K] => {
  return obj[prop];
};

// 上記の関数の使用例
const numbers = [1, 2, 3, 4, 5];
const sumResult = sum(numbers); // 15

const strings = ["Hello", "World"];
const joinResult = join(strings); // "Hello, World"

const obj = { name: "John", age: 30 };
const name = getProp(obj, "name"); // "John"

as キーワードを使って型エイリアスを定義する

// 数値の配列を受け取り、その合計値を返す関数の型エイリアス
type Sum = (numbers: number[]) => number;

// 文字列の配列を受け取り、その要素を結合して返す関数の型エイリアス
type Join = (strings: string[]) => string;

// オブジェクトを受け取り、そのプロパティの値を返す関数の型エイリアス
type GetProp<T, K extends keyof T> = (obj: T, prop: K) => T[K];

// 上記の型エイリアスを使った関数の定義
const sum: Sum = (numbers) => {
  return numbers.reduce((a, b) => a + b, 0);
};

const join: Join = (strings) => {
  return strings.join(", ");
};

const getProp: GetProp<any, any> = (obj, prop) => {
  return obj[prop];
};

// 上記の関数の使用例
const numbers = [1, 2, 3, 4, 5];
const sumResult = sum(numbers); // 15

const strings = ["Hello", "World"];
const joinResult = join(strings); // "Hello, World"

const obj = { name: "John", age: 30 };
const name = getProp(obj, "name"); // "John"

TypeScript の矢印関数で戻り値の型を指定するその他の方法

関数宣言を使う

function add(x: number, y: number): number {
  return x + y;
}

上記の例では、add 関数を関数宣言を使って定義しています。関数宣言では、戻り値の型を関数名の前に記述します。

interface を使う

interface Adder {
  (x: number, y: number): number;
}

const add: Adder = (x, y) => {
  return x + y;
};

type キーワードを使う

type Adder = (x: number, y: number) => number;

const add: Adder = (x, y) => {
  return x + y;
};

• 複数の場所で同じ型を使用する場合は、interface または type キーワードを使って型エイリアスを定義するのがおすすめです。