typescript - 这个地方 tslint 不能识别，请问如何修改？

Question

注意 <Tag 处报错

TS2322: Type '{ children: any; 'data-slate-node': "element"; 'data-slate-inline'?: true | undefined; 'data-slate-void'?: true | undefined; dir?: "rtl" | undefined; ref: any; style: CSSProperties; }' is not assignable to type 'IntrinsicAttributes'.   Property 'children' does not exist on type 'IntrinsicAttributes'.

按理说这里的 Tag 类型是 'h1'|'h2'|'h3'|'h4'|'h5'|'h6'，但是他只识别成了 string 。

我如果手动为 Tag 添加声明就不会报错

这里能让他自己识别么？

Answer 1

这里发生的是widening。例如

const str = "Hello"

虽然定义为"Hello"，但自动推断出来的类型是string。

我们可以加上as const来禁用这种行为。文档

问题中的代码为例：

type Level = 1 | 2 | 3 | 4 | 5 | 6;

const Component = (level: Level) => {
  const Tag = `h${level}` as const;
  const TagBad = `h${level}`;
};