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

函数式组件声明

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;

上一篇:vue3+typescript 使用 pinia 作为状态管理


下一篇:vue3+typescript 判断参数类型