React-Typescript：如何为组件默认属性（defaultProps）添加类型？

这个问题我之前在项目里也碰到过——既要让组件使用者不用必填某个属性，又要保证组件内部访问时永远不会拿到undefined，还要遵守团队用defaultProps的要求对吧？其实这是TypeScript和React defaultProps配合时的典型类型缺口问题，我给你两个实用的解决方案：

首先先提个小细节，你原代码里defaultProps的语法写错了，应该用冒号:赋值而不是等号=，这个先改过来：

static defaultProps = {
  someOptionalProperty: 'some default value', // 这里是:不是=
}

方案一：拆分外部/内部Props接口 #

最直观的方式是把Props分成两个接口：一个给外部组件使用者（保留可选属性），一个给组件内部（把对应属性设为必填）：

// 外部使用的Props，属性可选
interface SomeComponentExternalProps {
  someOptionalProperty?: string;
}

// 组件内部接收的Props，把可选属性转为必填
interface SomeComponentInternalProps extends SomeComponentExternalProps {
  someOptionalProperty: string;
}

interface SomeComponentState { /* ... */ }

class SomeComponent extends React.Component<SomeComponentInternalProps, SomeComponentState> {
  // defaultProps对应外部的可选属性，用Partial确保类型匹配
  static defaultProps: Partial<SomeComponentInternalProps> = {
    someOptionalProperty: 'some default value',
  };

  method() {
    // 这里TypeScript会推断someOptionalProperty是string类型，完全不用担心undefined
    const shouldNotBeOptional = this.props.someOptionalProperty;
  }
}

这样做的逻辑很清晰：React会在渲染时自动用defaultProps填充缺失的属性，所以组件内部永远能拿到有效值；而外部使用者看到的还是可选属性，完全符合需求。

方案二：用TypeScript工具类型简化代码 #

如果不想写两个接口，可以用TypeScript内置的Omit、Required、Pick工具类型来快速生成内部Props类型：

// 基础Props接口，外部使用时属性可选
interface SomeComponentProps {
  someOptionalProperty?: string;
}

interface SomeComponentState { /* ... */ }

// 生成内部Props：移除可选属性，再把它转为必填
type SomeComponentInternalProps = Omit<SomeComponentProps, 'someOptionalProperty'> & 
                                 Required<Pick<SomeComponentProps, 'someOptionalProperty'>>;

class SomeComponent extends React.Component<SomeComponentInternalProps, SomeComponentState> {
  // defaultProps直接对应基础Props里的可选属性
  static defaultProps: Pick<SomeComponentProps, 'someOptionalProperty'> = {
    someOptionalProperty: 'some default value',
  };

  method() {
    const shouldNotBeOptional = this.props.someOptionalProperty; // 类型为string，非可选
  }
}

这种方式不用额外定义新接口，适合属性不多的场景，代码更紧凑。

两种方案本质都是告诉TypeScript：「虽然外部这个属性是可选的，但组件内部因为有defaultProps兜底，所以它一定存在」。这样既满足了团队用defaultProps的要求，又彻底解决了内部属性可能为undefined的类型警告。

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