TypeScript类型兼容错误求助：ElementTypes无法赋值给ElementTypes.word

问题代码 #

enum ElementTypes {
  h1 = 'H1',
  word = "WORD"
}

type DefaultElementType<T> = {
  children: string[];
  id: number | string;
  type: T;
};

type H1Element = DefaultElementType<ElementTypes.h1>;
type WordElement = DefaultElementType<ElementTypes.word> & {
  value: string;
}

type CustomElement =
  | H1Element
  | WordElement

const insertNode = (element: CustomElement) => {
  // do sth here, not important
}

const addInsertNode = ({type, id}: {type: ElementTypes, id: number | string}) => {
  insertNode({type, id, children:[], ...(type === ElementTypes.word ? {value: 'some value'}: {})})
}

报错信息 #

Argument of type '{ value?: string | undefined; type: ElementTypes; id: string | number; children: never[]; }' is not assignable to parameter of type 'CustomElement'.
  Type '{ value?: string | undefined; type: ElementTypes; id: string | number; children: never[]; }' is not assignable to type 'WordElement'.
    Type '{ value?: string | undefined; type: ElementTypes; id: string | number; children: never[]; }' is not assignable to type 'DefaultElementType<ElementTypes.word>'.
      Types of property 'type' are incompatible.
        Type 'ElementTypes' is not assignable to type 'ElementTypes.word'.

问题原因 #

TypeScript的控制流分析无法在对象字面量结合扩展运算符的场景下，将type的类型从ElementTypes联合类型收窄到具体的枚举成员。虽然通过type === ElementTypes.word做了判断，但扩展运算符的存在让TS无法跟踪type和value之间的关联，最终生成的对象类型被推断为包含可选value的松散结构，无法匹配CustomElement的严格判别式类型要求。

解决方案 #

方案1：分支显式创建对应类型对象 #

通过if/else分支分别生成明确类型的对象，让TS能精准识别每个分支的类型：

const addInsertNode = ({type, id}: {type: ElementTypes, id: number | string}) => {
  if (type === ElementTypes.word) {
    insertNode({ type, id, children: [], value: 'some value' });
  } else {
    insertNode({ type, id, children: [] });
  }
}

方案2：泛型约束+类型断言 #

如果希望保持单行写法，可以用泛型约束参数的type，配合类型断言明确对象类型：

const addInsertNode = <T extends ElementTypes>({type, id}: {type: T, id: number | string}) => {
  insertNode({
    type,
    id,
    children: [],
    ...(type === ElementTypes.word ? {value: 'some value'} : {})
  } as T extends ElementTypes.word ? WordElement : H1Element);
}

方案3：工厂函数封装 #

为每种元素类型创建专属工厂函数，进一步提升类型安全性和代码可维护性：

const createH1Element = (id: number | string): H1Element => ({
  type: ElementTypes.h1,
  id,
  children: []
});

const createWordElement = (id: number | string): WordElement => ({
  type: ElementTypes.word,
  id,
  children: [],
  value: 'some value'
});

const addInsertNode = ({type, id}: {type: ElementTypes, id: number | string}) => {
  insertNode(type === ElementTypes.word ? createWordElement(id) : createH1Element(id));
}

以上方案均可让TS正确识别传入insertNode的参数类型，解决类型不匹配问题。

内容的提问来源于stack exchange，提问作者Aryan Mehrabi