如何创建 JavaScript 变量以用于 TypeScript generics

Question

I have a TypeScript file:

export class Table<T> {
    private readonly records: Record<string, T> = {};
}

export function foo(table: Table<number>) {
    console.log('Foo');
}

And I have a JavaScript file

import { Table, foo } from './scratch';

let table = new Table();
foo(table);

The table argument in foo(table) is underlined yellow with the warning

Argument type Table  is not assignable to parameter type Table
...
    Type Record  is not assignable to type Record
    Type unknown is not assignable to type number 

How can I make the IDE (WebStorm) not yell at me about this (preferably through code changes and not IDE settings)?

Answer 1

One way (but not necessarily the optimal way) is to extend the generic class with a typed version before using it in JavaScript:

export class Table<T> {
    private readonly records: Record<string, T> = {};
}

export class NumberTable extends Table<number> {}

It's not fool-proof since it does require modifying the TypeScript source instead of typing the JavaScript source, but it does the trick.