INDEX
はじめに
初めてのTypeScriptを読みました。
その学習を記録します。
結論
const 関数名 = <関数内で扱うデータ型>(引数名: 関数内で扱うデータ型[]) => 処理;
使い方
それぞれのデータ型で関数を作成する
// 数値型の配列の末尾のデータを取得する関数
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
any型で共有化
// 配列の末尾のデータを取得する関数
const getEndElementOfAny = (list: any[]) => list.at(-1);
console.log(getEndElementOfAny([1, 2, 3, 4]));
console.log(getEndElementOfAny(['a', 'b', 'c']));
実行結果を確認する
4
c
ジェネリック関数
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
複数の型引数の活用
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
コンポーネント(JSX構文、.tsxファイル)でのジェネリクなアロー関数
const identity = <T>(arg: T): T => arg;
JSX 要素 'T' には対応する終了タグがありません
JSX element 'T' has no corresponding closing tag.
const identity = <T = unknown>(arg: T): T => arg;