TypeScriptジェネリックスの優先順位

4
2022.01.14

私は現在、次のコードを持っています:

class Table<T,> {
   constructor(records: T[], columns: Column<T>[]) { ... }
}

class Column<T> {
   constructor(name: string, transformer: (item: T) => string) { ... }
   addTooltip(transformer: (item: T) => string): this { ... }
}

class Building {
   constructor (public name: string) {}
}

const buildings = [
   new Building("test"),
   new Building("station")
];

T型であることを指定せずに、テーブルを作成したい。

typescriptは建物配列から型を推測することができ、それが動作するため、これはこれまでのところ機能します。列の transformer でも、私はまだタイプの提案を取得します。

const table = new Table(buildings, [
    new Column("Name", building => building.name)
]);

しかし、addTooltipを使用すると、 が T であると仮定しているため、型スクリプトはTが何であるかを把握でき、完全に変わりつきます。

const table = new Table(buildings, [
    new Column("Name", building => building.name),
    new Column("Name", building => building.name).addTooltip(t => t.name)
]);

recordsコンストラクタ パラメータの型を T のソースとして使用するように TypeScript に指示する方法はありますか。columns: Column<any>[]を使用できることは分かっていますが、列の型チェックは機能しません。

プレイグラウンドリンク

回答
4
2022.01.14

私はあなたが実際にやりたいこと(そして私が実際にやりたいこと)を行う方法を教えることはできませんが、回避策のためのいくつかのオプションをあなたに与えることができます。

  1. Columnを作成し、ツールヒントを追加する組み合わせ操作を実行する、Columnの静的メソッドを持つことができます。
  2. Columnに静的メソッドを持ってColumnを受け入れ、ツールヒントを追加することができます。
  3. #2 の静的メソッドが実行する処理を行うスタンドアロン関数を使用できます。

そうすると、推論が機能します。

#1

static withTooltip<T>(
    name: string,
    transformer: (item: T) => string,
    tooltipTransformer: (item: T) => string,
): Column<T> {
    const col = new Column(name, transformer);
    col.addTooltip(tooltipTransformer);
    return col;
}

次に、配列を構築します。

const table = new Table(buildings, [
    new Column("Name", building => building.name),
    Column.withTooltip("Name", building => building.name, t => t.name),
]);

#2

static plusTooltip<T>(col: Column<T>, transformer: (item: T) => string): Column<T> {
    col.addTooltip(transformer);
    return col;
}

次に、配列を構築します。

const table = new Table(buildings, [
    new Column("Name", building => building.name),
    Column.plusTooltip(new Column("Name", building => building.name), t => t.name),
]);

#3

...は#2ですが、静的メソッドではなく関数です。

プレイグラウンドリンク