如何合并React组件Props类型以通过TypeScript类型检查

你只需要通过类型合并，把原有SpaProps和包含d属性的IT类型组合成新的组件Props类型即可，不需要修改原有两个类型的定义，有两种常用写法：

• 直接内联合并类型（适合仅当前组件使用的场景）
  直接在React.FC的泛型参数里用交叉类型&合并两个类型，代码改动最小：

export const Component: React.FC<SpaProps & IT> = function({
    a,
    b,
    c,
    d
}) {
  // 正常写组件逻辑即可，四个属性都会被正确推导类型
  return <div />
}

• 抽离独立Props类型（适合类型需要复用的场景）
  如果合并后的Props要在其他地方（比如组件内部hooks、子组件传参）使用，可以单独定义新的组件Props类型，两种写法效果一致：

// 写法1：接口多继承
interface ComponentProps extends SpaProps, IT {
  // 还可以在这里加组件独有的其他Props属性
}

// 写法2：类型别名交叉
// type ComponentProps = SpaProps & IT;

// 组件使用新定义的Props类型
export const Component: React.FC<ComponentProps> = function({
    a,
    b,
    c,
    d
}) {
  return <div />
}

注意：如果两个合并的类型存在同名属性、且属性类型不兼容，TS会直接抛出类型错误。你当前场景下SpaProps和IT没有重名属性，合并后会自动做类型校验：a/b/c必须符合SpaProps的类型定义，d必须是AxiosInstance类型，缺传、错传属性都会触发TS检查报错。

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