react+typescript正确的开发姿势之函数式组件

函数式组件声明

使用typescript正确的声明react函数式组件是通常有三种：直接声明、React.FC 和 PropsWithChildren。

直接声明

直接声明函数式组件的code如下：

import React from 'react';

type HomePropsType = {
    name: string;
    age: number;
	children?: React.ReactNode;
}

const Home = (props: HomePropsType) => {
    return (
        <div>
            这是home组件
        </div>
    )
}

export default Home;

使用 React.FC 声明

话不多说，直接上code：

import React, { FC } from 'react';

type HomePropsType = {
    name: string;
    age: number;
}

const Home: FC<HomePropsType> = (props) => {
    return (
        <div>
            这是home组件
        </div>
    )
}

export default Home;

此种方式是通过React.FunctionComponent（FC是FunctionComponent的缩写）结合typescript中的泛型来定义函数式组件，这样声明的好处有以下几个：

• props的类型声明（本例中的HomePropsType）中无需声明children属性，React.FC会自动为props添加这个属性类型；
• React.FC对静态属性：displayName、propTypes、defaultProps提供了类型检查和自动补全；
• React.FC显式地定义了返回类型，其他声明方式的返回类型是隐式推导的；

使用PropsWithChildren声明

这种方式可以为你省去频繁定义 children 的类型，自动设置 children 类型为 ReactNode:

import React from 'react';

type HomePropsType = React.PropsWithChildren<{ name: string; age: number; }>

const Home = (props: HomePropsType) => {
    return (
        <div>
            这是home组件
        </div>
    )
}

export default Home;