💊

[TypeScript] 関数内で扱う型を引数のように受け取るジェネリクス関数

2024/09/22に公開

はじめに

この記事では、TypeScriptのジェネリクス関数 をまとめております。

参考資料

結論

1. それぞれのデータ型で関数を作成する

// 数値型の配列の末尾のデータを取得する関数
const getEndElementOfNum = (list: number[]) => list.at(-1);
// 文字列型の配列の末尾のデータを取得する関数
const getEndElementOfStr = (list: string[]) => list.at(-1);

console.log(getEndElementOfNum([1, 2, 3, 4]));
console.log(getEndElementOfStr(['a', 'b', 'c']));
実行結果を確認する
4
c

2. any型で共有化

// 配列の末尾のデータを取得する関数
const getEndElementOfAny = (list: any[]) => list.at(-1);

console.log(getEndElementOfAny([1, 2, 3, 4]));
console.log(getEndElementOfAny(['a', 'b', 'c']));
実行結果を確認する
4
c

3. ジェネリック関数

const getEndElement = <T>(list: T[]) => list.at(-1);

console.log(getEndElement<number>([1, 2, 3, 4]));
console.log(getEndElement<string>(['a', 'b', 'c']));
実行結果を確認する
4
c

4. 複数の型引数の活用

const getEndElement1 = <T, U>(arg1: T, arg2: U) => {
  console.log(arg1, typeof arg1);
  console.log(arg2, typeof arg2);
}

getEndElement1(1, 'a')
実行結果を確認する
1 number
a string

5. コンポーネント(JSX構文、.tsxファイル)でのジェネリクなアロー関数

GitHubで編集を提案

Discussion