JSX节点中的TypeScript类型参数

Question

有没有办法为JSX中呈现的组件指定类型参数？

例如,考虑以下组件:

interface SelectorProps<T> {
    selection: T;
    options: T[];
}

class Selector<T> extends React.Component<SelectorProps<T>, {}> {
    // ...
}

如果我尝试在JSX中呈现此组件:

<Selector selection="a" options={["a", "b", "c"]} />

我收到这些错误:

TS2322:类型'string'不能分配给'T'类型.

TS2322:类型'string []'不能分配给'T []'.类型'string'不能分配给'T'类型.

我希望T被推断为string,否则一些方法来指定T=string在<Selector>.有解决方案吗？

我发现的唯一解决方法是扩展组件以消除所有类型参数:

class StringSelector extends Selector<string> { }

Answer 1

现在支持https://github.com/Microsoft/TypeScript/issues/6395中描述的通用JSX元素- 自TypeScript 2.9起.

您现在应该可以使用:

 <Selector<string> selection="a" options={["a", "b", "c"]} />

另见:http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html