返回

TypeScript 默认属性的正确用法，看这篇就够了！

前端

React Native TypeScript 项目中使用 defaultProps

大家好，我是俊宁，今天整理博客时翻到这么一篇去年翻译的文章，现在读来仍不过时，遂与大家分享。

随着时间的推移，TypeScript 改进了 defaultProps 相关的类型检查。本文将讲述最新的用法和旧版本中的用法以及一些问题。

尽管 foo 不是必须的，但是我们并没有把它标记为可选属性，TypeScript 会认为它是必填属性，这是不合理的。

interface Props {
  foo: number;
}

const MyComponent: React.FC<Props> = (props) => {
  // foo is required here
  return <div>{props.foo}</div>;
};

MyComponent.defaultProps = {
  foo: 10,
};

在旧版本的 TypeScript 中，defaultProps 类型标注在 propTypes 属性上，也就是所谓的 ES5 的写法，但这是一个永远不会用到的属性，我们可以把 defaultProps 的类型定义移动到组件本身。

interface Props {
  foo?: number;
}

const MyComponent: React.FC<Props> = (props) => {
  // foo is optional here
  return <div>{props.foo}</div>;
};

MyComponent.defaultProps = {
  foo: 10,
};

React 组件一般是一个纯函数，给定同样的 props 就应该返回同样的结果，所以我们通过 propTypes 来约束 props 的类型，defaultProps 的作用是为 props 提供一个初始值，propTypes 是用来约束 props 的类型。但当 props 的初始值和 propTypes 的类型不一样时，很容易报错。

文中给出了一个解决方案，就是在组件内部定义一个 defaultProps 类型。

interface Props {
  foo?: number;
}

const MyComponent: React.FC<Props> = (props) => {
  // foo is optional here
  return <div>{props.foo}</div>;
};

MyComponent.defaultProps = {
  foo: 10,
} as Props;

这样就可以解决类型检查的问题了。