2024年最新版！TypeScriptにおけるジェネリック型付き矢引関数の使い方

2024-04-02

TypeScriptにおけるジェネリック型付き矢印関数構文

構文

ジェネリック型付き矢引関数は、以下の構文で定義できます。

<T, U>(param: T): U => {
  // 関数の処理
  return result;
}

<T, U>: 関数のジェネリック型パラメータ。Tは引数の型、Uは戻り値の型を表します。
param: T: 関数の引数。型はTジェネリック型パラメータで指定されます。
// 関数の処理: 関数の実装。

例

以下の例は、ジェネリック型付き矢引関数を使って、2つの数値の最大値を返す関数です。

const max = <T extends number>(a: T, b: T): T => {
  return a > b ? a : b;
};

const result1 = max(10, 20); // 20
const result2 = max(3.14, 1.59); // 3.14

<T extends number>: Tジェネリック型パラメータはnumber型に限定されます。
a: T, b: T: 関数の引数はT型です。
a > b ? a : b: 2つの引数の比較を行い、大きい方の値を返します。

コードの再利用性: 異なる型に対して同じ処理を適用する関数を簡単に定義できます。
型安全性: ジェネリック型パラメータによって、引数と戻り値の型の安全性を保証できます。
可読性の向上: 関数の型情報をコード内に明示的に記述できるため、コードの可読性が向上します。

TypeScriptにおけるジェネリック型付き矢引関数構文は、コードの再利用性と型安全性向上を実現できる便利な機能です。関数のパラメータと戻り値の型をジェネリック型で定義することで、さまざまな型に対して同じ処理を適用する関数を簡単に定義できます。

ジェネリック型付き矢印関数を使ったサンプルコード

// 2つの数値の最大値を返す関数
const max = <T extends number>(a: T, b: T): T => {
  return a > b ? a : b;
};

// 文字列の連結を行う関数
const concat = <T extends string>(a: T, b: T): T => {
  return a + b;
};

// ジェネリック型付きインターフェース
interface IPerson<T> {
  name: string;
  age: T;
}

// ジェネリック型付きクラス
class Person<T> implements IPerson<T> {
  name: string;
  age: T;

  constructor(name: string, age: T) {
    this.name = name;
    this.age = age;
  }
}

// 使用例
const result1 = max(10, 20); // 20
const result2 = max(3.14, 1.59); // 3.14

const str1 = "Hello";
const str2 = "World";
const concatResult = concat(str1, str2); // "HelloWorld"

const person1 = new Person("Alice", 20);
const person2 = new Person("Bob", 30);

console.log(person1.name, person1.age); // "Alice", 20
console.log(person2.name, person2.age); // "Bob", 30

ジェネリック型付きユーティリティ関数
ジェネリック型付きコンポーネント (Reactなど)
ジェネリック型付きデータ構造

ジェネリック型付き矢引関数は、TypeScriptの強力な機能の一つです。この機能を理解することで、コードの再利用性と型安全性向上を実現できます。

ジェネリック型付き矢引関数以外の方法

型エイリアスを使って、汎用的な型を定義できます。

type TNumber = number;
type TString = string;

const maxNumber = (a: TNumber, b: TNumber): TNumber => {
  return a > b ? a : b;
};

const concatString = (a: TString, b: TString): TString => {
  return a + b;
};

インターフェースを使って、汎用的なオブジェクトの型を定義できます。

interface IPerson {
  name: string;
  age: number;
}

const person1: IPerson = {
  name: "Alice",
  age: 20,
};

const person2: IPerson = {
  name: "Bob",
  age: 30,
};

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

const person1 = new Person("Alice", 20);
const person2 = new Person("Bob", 30);

ジェネリック型付き関数を使って、汎用的な関数を定義できます。

function max<T extends number>(a: T, b: T): T {
  return a > b ? a : b;
}

function concat<T extends string>(a: T, b: T): T {
  return a + b;
}

class Person<T> {
  name: string;
  age: T;

  constructor(name: string, age: T) {
    this.name = name;
    this.age = age;
  }
}

const person1 = new Person<number>("Alice", 20);
const person2 = new Person<string>("Bob", "30");