TypeSceipt学習。
自分向けの備忘録。

ジェネリクスって

汎用的なメソッドに対して特定の型を紐付けるための仕組み。

宣言する方法それぞれ

// <T>はジェネリクスの宣言、抽象的な型を意味する

// アロー関数
const echo = <T>(arg: T): T => {
  return arg;
};

// function関数式
const echo = function <T>(arg: T): T {
  return arg;
};

// 呼び出し側で型を指定し、引数を渡す。
console.log(echo<number>(100));

// メソッド記法
const echo3 = {
  echo<T>(arg: T): T {
    return arg;
  },
};

console.log(echo3.echo<number>(100));

呼び出し側で型引数の指定は省略することができる。その場合型推論にて補われる。

複数宣言する

複数の型引数を宣言することも可能。

const echo4 = <T, P, U>(x: T, y: P, z: U) => {
  return [x, y, z];
};

//型string,number,booleanをそれぞれ宣言
console.log(echo4("foo", 123, true));

下記の場合それぞれ別の型の引数を割り当てるが、型引数はstringに推論されるためエラーとなる。

// 全てT型で統一
const echo4 = <T>(x: T, y: T, z: T) => {
  return [x, y, z];
};

// string型と推論されるため、二番目の引数でエラーとなる
// エラー:型 '123' の引数を型 'string' のパラメーターに割り当てることはできません。
console.log(echo4("foo", 123, true));

クラスの書き方

class Mirror<T> {
  constructor(public value: T) {}

  echo(): T {
    return this.value;
  }
}

console.log(new Mirror<number>(123).echo());
console.log(new Mirror<string>("T").echo());
console.log(new Mirror<boolean>(true).echo());

参考:
TypeScript入門
Udemy[JavaScriptエンジニアのためのハンズオンで学ぶTypeScript徹底入門2024年最新版]

c.sakyou

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA