TypeScript: 関数使用時にtypeはどこに書くのか迷ったときのためのカンニングペーパー

functionを書くときのtypeの書く位置がわからずいつも困るので、今日はカンペを作ろう。

パターン1

TypeScript
function add(a: number, b: number): number {
  return a + b;
}
TypeScript
//ジェネリクスの場合
function add<T>(a: T, b: T): T {
  return a + b;
}

パターン2

TypeScript
const add = function (a: number, b: number): number {
  return a + b;
};
TypeScript
//ジェネリクスの場合
const add = function<T>(a: T, b: T): T {
  return a + b;
};

パターン3

TypeScript
const add = (a: number, b: number): number => a + b;
TypeScript
//ジェネリクスの場合
const add = <T>(a: T, b: T): T => a + b;

パターン4

TypeScript
//関数型を定義してからその型を持つ変数に関数を代入
type AddFunction = (a: number, b: number) => number;

const add: AddFunction = (a, b) => a + b;
TypeScript
//ジェネリクスの場合
type AddFunction<T> = (a: T, b: T) => T;
const add: AddFunction<number> = (a, b) => a + b;

パターン5

TypeScript
//インターフェース内で関数の型を定義し、その型を持つ変数に関数を代入
interface AddFunction {
  (a: number, b: number): number;
}
const add: AddFunction = (a, b) => a + b;
TypeScript
//ジェネリクスの場合
interface AddFunction<T> {
  (a: T, b: T): T;
}
const add: AddFunction<string> = (a, b) => a + b;

以上。

パターン4は今日まで知らなかったし、正直、インターフェースやジェネリクスについてまだよく分かってない。でもこのカンニングペーパーを見ながら、真似して書いているうちにそのうち慣れるでしょ、きっと。未来の自分に期待。


11月に入ったというのにまだ半袖で過ごしている。
去年の今頃はもうコートを着ていたのに。

類似投稿