53
Help us understand the problem. What are the problem?

posted at

updated at

Organization

TypeScript: <T>の書く位置チートシート

この投稿はTypeScriptのジェネリクスの型変数(type parameter)をどこに書くのかのチートシートです。

<T>の書く位置まとめ

  • 関数宣言
  • 関数式
  • アロー関数
  • メソッド宣言
  • 関数型
  • コンストラクタ型
  • 関数シグネチャ
  • コンストラクタシグネチャ:
    • 引数リスト()の直前
  • クラス宣言
  • インターフェース宣言
  • 型エイリアス:
    • 識別子の直後

<T>の書く位置チートシート

関数宣言

function name<T>() {}

関数式

const name = function <T>() {};
const name = function* <T>() {}; // ジェネレーター
const name = function name<T>() {}; // 名前付き関数式

アロー関数

const name = <T>() => {};
const name = <T,>() => {}; // コンパイラオプションのjsxがnone以外のときは、JSXと解釈されないように「,」を書く
const name = async <T>() => {}; // 非同期関数
const a = {
  method: <T>() => {},
};

クラス宣言

class Name<T> {}

メソッド宣言

// クラス宣言
class Name {
  method<T>() {}
}

// オブジェクトリテラル
const a = {
  method<T>() {},
};

インターフェース

interface Name<T> {}

メソッドシグネチャ

// インターフェース宣言
interface Name {
  method<T>();
}

// 型エイリアス
type A = {
  method<T>();
};

関数シグネチャ

type A = { <T>(): any };

コンストラクタシグネチャ

type A = { new <T>(): any };

関数型

type A = <T>() => any;

コンストラクタ型

type A = new <T>() => any;

型エイリアス

type A<T> = any;
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
53
Help us understand the problem. What are the problem?