TypeScript组件展开传参时类型不兼容问题咨询

1. 修正数据源（推荐） #

既然Project组件要求externalLink为必填布尔值，最根本的解决方式是确保projectInformation数组里的每一项都明确包含externalLink字段，值为true或false，而非undefined。

比如把数据源里的externalLink: undefined替换为明确的布尔值：

const projectInformation = [
  { projectTitle: "项目A", externalLink: true },
  { projectTitle: "项目B", externalLink: false },
  // ...其他项目数据
];

2. 调整组件Props类型 #

如果业务逻辑允许externalLink不存在，可将其标记为可选字段，并在组件内部设置默认值：

// Project组件的Props定义
interface ProjectProps {
  projectTitle: string;
  externalLink?: boolean; // 用?标记为可选字段
  // ...其他必填字段
}

// 组件内部给externalLink设置默认值
const Project = ({ projectTitle, externalLink = false }: ProjectProps) => {
  // 业务逻辑中externalLink默认取false
  return <div>{projectTitle}</div>;
};

3. 传参时兜底处理undefined值 #

如果既不想修改数据源，也不想调整组件类型，可在遍历传参时用空值合并运算符给externalLink兜底：

{projectInformation.map(project => (
  <Project 
    {...project} 
    externalLink={project.externalLink ?? false} // undefined时自动设为false
    key={project.projectTitle}
  />
))}

以上三种方式都能解决类型不匹配的问题，同时符合TypeScript的类型规范。

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