【译】在 React Native TypeScript 项目中使用 defaultProps

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

TypeScript 3.0 以上

TypeScript 特地添加了对 defaultProps 的支持以此让类型检查符合你的预期：

import React from 'reac'
import { Text } from 'react-native'

interface Props {
  foo: string;
  bar: string;
}

export default Hello extends React.Component<Props, {}> {
  public static defaultProps = {
    foo: "default"
  }

  public render() {
    const { bar, foo } = this.props
    return (
      <Text>{ bar }, { foo.toUpperCase() }</Text>
    )
  }
}
复制代码

Hello 这个组件能够在不传递 foo 属性的状况下渲染、编译正常：

<Hello bar="Hello" />
复制代码

注意

• 尽管foo不是必须的，可是咱们并无把它被标记为可选的（例如 foo?: string）。标记为可选的意味着它多是 undefined，可是实际上由于 defaultProps 提供了默认值，它绝对不可能变成 undefined。
• defaultProps 没有明确的类型声明。它的类型是由编译器推断的。
• 须要 @types/react 版本在 16.4.11 以上

TypeScript 2.1 到 3.0

你可使用 TypeScript 的 Partial type 特性，这意味着当前的接口只会实现被包裹的接口的一部分，这样咱们能够随意拓展 defaultProps 而不须要改其余任何地方。

import React from 'reac'
import { Text } from 'react-native'

interface Props {
  foo?: string;
  bar: number;
}

export default class MyComponent extends React.Component<Props, {}> {
  static defaultProps: Partial<Props> = {
    foo: 'default',
  }
}
复制代码

注意

• 由于 TypeScript 在检查 JSX 属性时只考虑了 props，你必须把有默认值的 props 标记为可选的
• 当使用 strictNullChecks时，this.props.foo 的值可能会是 undefined。你可使用非空断言（例如 this.props.foo!）或者类型守护（例如 if (this.props.foo) {...}）来移除 undefined。这是很是恼人的，由于实际上它是有默认值，因此绝对不会是 undefined，可是 TS 并不理解这个逻辑。这也是 TS 3.0 专门支持 defaultProps 的主要缘由之一。

函数组件的 defaultProps

您也能够在函数组件上使用 defaultProps：

import React from 'react'
import { Text } from 'react-native'

interface Props {
  foo: string;
  bar: number;
}

const MyComponent: React.SFC<Props> = props => (
  <Text> Hello, {props.foo}, {props.bar} </Text>
)

MyComponent.defaultProps = {
  foo: 'default',
}

export default MyComponent
复制代码

注意：你没必要再使用 Partial<Props>，由于 React.SFC 已经在 TS 2.1+ 被指定为 partial.

另外一个可选的方案是解构你的 props 参数而后直接符默认值：

import React from 'react'
import { Text } from 'react-native'

interface Props {
  foo: string;
  bar: number;
}

const MyComponent: React.SFC<Props> = ({ foo = 'default', bar }) => {
  return (
    <Text> Hello, {foo}, {bar} </Text>
  )
}
复制代码

联系做者

做者微信	知识星球	赞扬做者