TypeScript类型错误：Object literal属性不匹配与数组类型赋值问题

相关代码实现 #

Action 定义 #

export const setLighting = createAction(
  '[Ui] SET_BACKGROUND',
  props<{
    lighting: Array<{ target: LightD; value: LightE | undefined }>
  }>(),
)

数据流处理逻辑 #

readonly setBackgroundLighting$ = this.stateTheme$.pipe(
  pluck(LightD.LEFT, LightD.RIGHT),
  distinctUntilChanged(),
  map(value =>
    setLighting({
      lighting: { target: LightD.LIGHT, value }
    }),
  ),
)

常量定义 #

export const LightD: {
  readonly CLIGHT: "CLIGHT";
  readonly LIGHT: "LIGHT";
  readonly LEFT: "LEFT";
  readonly RIGHT: "RIGHT";
}

报错信息 #

类型'{ target: "LIGHT"; value: unknown; }'无法赋值给类型'{ target: LightD; value: LightE| undefined; }[]'。
对象字面量只能指定已知属性，且'target'不存在于类型'{ target: LightD; value: LightE | undefined; }[]'中。ts(2322)
预期类型来自属性'lighting'，该属性在类型'{ lighting: { target: LightD; value: LightE| undefined; }[]; }'上声明。

问题根源 #

• 参数结构不匹配：setLighting的lighting参数要求是对象数组，但你传入的是单个对象，数组类型无法接收非数组值。
• 值类型未明确：pluck(LightD.LEFT, LightD.RIGHT)返回的value类型为unknown，不符合LightE | undefined的类型约束。
• 依赖类型缺失：代码中使用了LightE但未提供其定义，TypeScript无法识别该类型，进一步加剧类型不兼容问题。

修复步骤 #

1. 调整lighting参数为数组格式 #

将单个对象包装成数组，匹配setLighting的参数要求：

map(value =>
  setLighting({
    lighting: [{ target: LightD.LIGHT, value }] // 包裹为数组
  }),
)

2. 明确pluck返回值的类型 #

根据stateTheme$的实际结构，处理pluck的返回值并指定类型：

// 示例：提取LEFT属性的值并指定类型
this.stateTheme$.pipe(
  pluck<YourStateThemeInterface, LightE | undefined>(LightD.LEFT),
  distinctUntilChanged(),
  map(value =>
    setLighting({
      lighting: [{ target: LightD.LIGHT, value }]
    }),
  ),
)

// 如果pluck返回LEFT和RIGHT组成的数组，可解构处理
this.stateTheme$.pipe(
  pluck(LightD.LEFT, LightD.RIGHT),
  distinctUntilChanged(),
  map(([leftVal, rightVal]) => {
    // 根据业务逻辑选择值，示例取leftVal
    const targetValue: LightE | undefined = leftVal;
    return setLighting({
      lighting: [{ target: LightD.LIGHT, value: targetValue }]
    });
  }),
)

3. 补充LightE类型定义 #

添加LightE的类型定义，比如枚举或联合类型：

// 枚举形式示例
export enum LightE {
  Bright = "BRIGHT",
  Dim = "DIM",
  Off = "OFF"
}

// 联合类型形式示例
export type LightE = "BRIGHT" | "DIM" | "OFF" | undefined;

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