TypeScript报错string类型无法分配对应类型，Tooltip组件placement默认值如何修复

错误根因 #

你的类型定义和实际赋值的类型不匹配：

• keyof typeof TOOLTIP_PLACEMENTS 取的是常量对象的键名联合，也就是 "TOP" | "BOTTOM" | "LEFT" | "RIGHT" 类型
• 你给placement设置的默认值是TOOLTIP_PLACEMENTS.BOTTOM，对应的值是字符串"bottom"，属于普通string类型，和上面的键名联合类型完全不匹配，因此触发TS报错。

推荐修复方案 #

修改Props里的placement类型定义，把它从「取对象键的联合」改成「取对象值的联合」，符合你调用常量取值的逻辑：

type Props = {
  text?: string;
  children: React.ReactNode;
  // 改这里：取对象所有值的联合类型
  placement?: typeof TOOLTIP_PLACEMENTS[keyof typeof TOOLTIP_PLACEMENTS];
};

如果你的TS版本低于3.4，Object.freeze没有自动把对象值收窄为字面量类型，可以再给常量定义加as const确保类型收窄：

export const TOOLTIP_PLACEMENTS = Object.freeze({
  TOP: 'top',
  BOTTOM: 'bottom',
  LEFT: 'left',
  RIGHT: 'right',
} as const);

可选替代方案 #

如果你确实需要placement传入大写的键名，直接修改默认值即可：

const Tooltip = ({
  text,
  children,
  placement = "BOTTOM",
}: Props) => (
  // 组件逻辑不变
)

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