TypeScript给解构参数属性标注泛型Merge类型报语法错误如何解决

错误原因 #

在 TypeScript 解构参数的语法规则中，解构对象内部的:默认代表变量重命名，而非类型标注。
你写{ state: Merge<K, S> }时，TS 会将代码解析为「把解构得到的state字段重命名为Merge变量」，后续的<K, S>完全不符合解构语法规则，因此直接抛出语法错误。
另外你误以为写法正确的jsx2实际也存在问题：{state: S, props: P}里的S、P并不是类型标注，同样是将state重命名为S、props重命名为P，只是因为你开启了noImplicitAny=false，TS 没有显式报错，但此时state、props的实际类型都是any，并没有正确绑定到对应的泛型类型。

正确实现方式 #

要给解构参数标注类型，需要将类型定义写在整个解构对象的后方，两种常用写法如下：

写法1：直接给解构对象加完整类型 #

type Merge<a,b> = any

type test<P, S= any, K= any> = {
    jsx1?: (state: Merge<K, S>, props: P, nextJsx?) => JSX.Element;
    jsx3?: ({ state, props, nextJsx }: { state: Merge<K, S>, props: P, nextJsx?: unknown }) => JSX.Element;
};

写法2：提前定义参数类型别名（可读性更高） #

type Merge<a,b> = any

type Jsx3Param<P, S, K> = {
  state: Merge<K, S>
  props: P
  nextJsx?: unknown
}

type test<P, S= any, K= any> = {
    jsx3?: ({ state, props, nextJsx }: Jsx3Param<P, S, K>) => JSX.Element;
};

内容的提问来源于stack exchange，提问作者Eliav Louski