TypeScript可选联合字符串类型默认值的React.FC类型校验异常

问题原因 #

你遇到的情况是因为React.FC泛型的类型推断特性：当不给函数参数显式指定类型时，TypeScript会结合解构默认值自动扩展变量类型，把bar的类型推断为'a' | 'b' | 's'，不会严格校验默认值是否符合原接口的联合类型。

可行解决方案 #

1. 给解构对象显式指定接口类型 #

在解构时直接给整个对象标注IBar类型，强制TypeScript按照接口校验默认值：

interface IBar {
  bar?: 'a' | 'b'
}

const Foo: React.FC<IBar> = (props) => {
  const {
    bar = 's' // 这里会触发类型错误，符合预期
  }: IBar = props;

  return <div />
}

2. 使用函数参数默认值替代解构默认值 #

直接在函数参数层面设置默认值，此时TypeScript会严格按照React.FC泛型传入的IBar接口校验默认值：

interface IBar {
  bar?: 'a' | 'b'
}

const Foo: React.FC<IBar> = ({ bar = 's' }) => { // 这里直接报错，因为's'不属于'a'|'b'
  return <div />
}

3. 放弃React.FC，直接定义函数参数类型 #

如果不需要React.FC提供的额外特性（比如children默认类型），可以直接给函数参数指定类型，既避免冗余又保证类型校验：

interface IBar {
  bar?: 'a' | 'b'
}

const Foo = ({ bar = 's' }: IBar) => { // 这里触发类型错误
  return <div />
}

总结 #

前两种方法保留了React.FC的使用，第三种更简洁。核心是让TypeScript严格依据IBar接口校验默认值的类型，避免自动扩展类型导致的校验失效。

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