React + TypeScript 默认 Props 的处理

通过组件的 defaultProps 属性可为其 Props 指定默认值。 以下示例来自 React 官方文档 - Default Prop Values：

复制 1`class Greeting extends React.Component {
 2  render() {
 3    return (
 4      <h1>Hello, {this.props.name}</h1>
 5    );
 6  }
 7}
 8
 9// Specifies the default values for props:
10Greeting.defaultProps = {
11  name: 'Stranger'
12};
13
14// Renders "Hello, Stranger":
15ReactDOM.render(
16  <Greeting />,
17  document.getElementById('example')
18);`

如果是用react框架搭建的项目会有proposal-class-properties：这个包，就可以这样写

复制 1`class Greeting extends React.Component {
 2  static defaultProps = {
 3    name: 'stranger'
 4  }
 5
 6  render() {
 7    return (
 8      <div>Hello, {this.props.name}</div>
 9    )
10  }
11}`

加入 TypeScript

复制 1`interface Props {
 2  name?: string;  // 这里定义类型
 3}
 4class Greeting extends React.Component<Props, {}> {
 5static defaultProps = {
 6name: "stranger",  // 这里赋值默认值
 7};
 8
 9render() {
10return <div>Hello, {this.props.name}</div>;
11}
12}`

时不支持直接通过类访问 defaultProps 来赋值以设置默认属性，因为React.Component类型上并没有该属性。