【譯】在 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>
  )
}
複製代碼

聯繫做者

做者微信	知識星球	讚揚做者