在 React 中使用 TypeScript 创建组件

函数组件

在 TypeScript 中不再需要导入 Props 类来限制 props 的类型，而是使用 type 来限制。自定义函数组件 Info 的类型是一个带有泛型的函数，我们需要把 Props 传入到泛型中。并将 {name, age}放进参数列表中，对从父组件接收到的 props 解构赋值。

import React, {FC} from 'react';

// 限制 props 类型
type Props = {
    name: string
    age: number
}

// 自定义函数组件 Info
const Info: FC<Props> = ({name, age}) => (
    <h1>I'm {name}, my age is {age}</h1>
)

export default Info

可以利用 TypeScript 的类型推断进一步简化。

import React from 'react';

type Props = {
    name: string
    age: number
}

const Info = ({name, age} : Props) => (
    <h1>I'm {name}, my age is {age}</h1>
)

export default Info

可以用 Info.defaultProps对 props 设置默认值。

import React from 'react';

type Props = {
    name: string
    age?: number // 可选的 props
}

const Info = ({name, age} : Props) => (
    <h1>I'm {name}, my age is {age}</h1>
)

Info.defaultProps = {
    age: 100
}

export default Info

设置默认值的方式也可以通过 js 的语法进一步简化。当解构赋值没有从父组件传递过来的 props 上得到age的值时，对其赋默认值。

import React from 'react';

type Props = {
    name: string
    age?: number
}

const Info = ({name, age = 100} : Props) => (
    <h1>I'm {name}, my age is {age}</h1>
)

export default Info

class 组件

class 既可以有 props ，又可以有 state ，情况稍微复杂一些。根据有无 props 和 state 排列组合可以分为下面四种。

import React from 'react';

type Props = { message?: string }
type State = { count: number }

class C1 extends React.Component {}
class C2 extends React.Component<Props> {}
class C3 extends React.Component<{}, State> {}
class C4 extends React.Component<Props, State> {}

类组件使用static defaultProps提供默认属性值。其需要在Props中选择一部分字段添加默认值，所以这是Partial<Props>类型的。

import React from 'react';

type Props = { message?: string }

class Counter extends React.Component<Props, State> {

    static defaultProps: Partial<Props> = {
        message: 'no message'
    }

    render() {
        return (
            <div>
                <h1>message: {this.props.message}</h1>
            </div>
        )
    }
}

export default Counter

同理，可以像上面的函数组件一样通过解构赋值语法简化。

import React from 'react';

type Props = { message?: string }

class Counter extends React.Component<Props, State> {

    render() {

        const {message = 'no message'} = this.props // 解构赋值同时设置默认值

        return (
            <div>
                <h1>message: {message}</h1>
            </div>
        )
    }
}

export default Counter

下面加上 state

import React from 'react';

type Props = { message?: string }
type State = { count: number }

class Counter extends React.Component<Props, State> {
	
	// 定义 state
    state: State = {
        count: 0
    }
	
	// 更新 state
    handleClick = () => {
        this.setState({
            count: this.state.count + 1
        })
    }
    
    render() {

        const {message = 'no message'} = this.props
        const {count} = this.state

        return (
            <div>
                <h1>message: {message}</h1>
                <h1>count: {count}</h1> 
                <button onClick={this.handleClick}></button>
            </div>
        )
    }
}

export default Counter