TypeScript ts(2322)错误：size属性类型不兼容问题求助

问题场景 #

使用TypeScript时遇到ts(2322)错误，提示size属性类型不兼容：string类型无法赋值给's'|'m'|'l'|'xl'|undefined类型，但实际赋值的's'属于预期的联合类型范围。

相关代码 #

./src/components/App

function App() {
  const params = {
    label: 'Select',
    placeholder: 'Placeholder',
    isRequired: true,
    offset: { X: '0', Y: '100%' },
    zIndex: 10,
    size: 's',
    classes: ['class1', 'class2', 'class3', 'class4', 'class5'],
  };

  return <SelectMenu params={params} />;
}

./src/components/SelectMenu

function SelectMenu({
  params: {
    label,
    placeholder,
    isRequired = false,
    offset = { X: '0', Y: '100%' },
    zIndex = 0,
    size = 'm',
    classes,
  },
}: {
  params: {
    label?: string;
    placeholder?: string;
    isRequired?: boolean;
    offset?: { X: string; Y: string };
    zIndex?: number;
    size?: 's' | 'm' | 'l' | 'xl';
    classes?: string | string[];
  };
})

用户疑问 #

1. 是否可以按以下方式传递参数？

const params = {
  label: 'Select',
  placeholder: 'Placeholder',
  isRequired: true,
  offset: { X: '0', Y: '100%' },
  zIndex: 10,
  size: 's',
  classes: ['class1', 'class2', 'class3', 'class4', 'class5'],
};

return <SelectMenu {...params} />;

2. 同时希望改用以下定义的Params类型来接收参数，如何修复类型错误？

type Params = {
  label?: string;
  placeholder?: string;
  isRequired?: boolean;
  offset?: { X: string; Y: string };
  zIndex?: number;
  size?: 's' | 'm' | 'l' | 'xl';
  classes?: string | string[];
};

function SelectMenu({
  label,
  placeholder,
  isRequired = false,
  offset = { X: '0', Y: '100%' },
  zIndex = 0,
  size = 'm',
  classes,
}: Params)

解决方案 #

错误原因 #

TypeScript会自动推断params对象的类型，其中size会被推断为宽泛的string类型，而非's'|'m'|'l'|'xl'联合类型，导致传递给组件时类型不匹配。

修复方法 #

方法1：给params显式标注类型

复用定义好的Params类型，让TypeScript明确params的类型范围：

// 先定义Params类型
type Params = {
  label?: string;
  placeholder?: string;
  isRequired?: boolean;
  offset?: { X: string; Y: string };
  zIndex?: number;
  size?: 's' | 'm' | 'l' | 'xl';
  classes?: string | string[];
};

function App() {
  // 显式标注params的类型为Params
  const params: Params = {
    label: 'Select',
    placeholder: 'Placeholder',
    isRequired: true,
    offset: { X: '0', Y: '100%' },
    zIndex: 10,
    size: 's',
    classes: ['class1', 'class2', 'class3', 'class4', 'class5'],
  };

  // 两种传参方式都可行
  return <SelectMenu params={params} />;
  // 或者使用展开语法
  // return <SelectMenu {...params} />;
}

方法2：使用as const缩小类型范围

如果不想单独定义类型，可用as const让TypeScript将params的属性推断为字面量类型：

function App() {
  const params = {
    label: 'Select',
    placeholder: 'Placeholder',
    isRequired: true,
    offset: { X: '0', Y: '100%' },
    zIndex: 10,
    size: 's',
    classes: ['class1', 'class2', 'class3', 'class4', 'class5'],
  } as const;

  return <SelectMenu params={params} />;
  // 或者 <SelectMenu {...params} />;
}

注意：as const会让所有属性变为只读，若后续需要修改params的属性值，不建议使用该方式。

关于展开传参的可行性

你提到的<SelectMenu {...params} />展开传参方式完全可行，只要params的类型和组件接收的Params类型匹配，修复类型错误后即可正常使用。

改用Params类型接收参数的注意事项

你定义的Params类型是正确的，直接将组件的参数类型指定为Params即可。需注意：若组件原来接收的是一个params对象，改成直接接收单个属性后，要确保传参方式对应（比如用展开语法传递所有属性）。

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