函数组件

我们先来看看分别用js和ts语言来编写函数组件是怎么写的，然后下面会对使用Ts编写的组件做讲解和说明一些注意点。

  1. Js编写函数组件的
  1. import React from 'react';
  2. /**
  3.  *
  4.  * @param {*} props 用来接收父组件的传递的参数
  5.  */
  6. function HelloWorld(props) {
  7.   return <div>HelloWorld</div>;
  8. }
  9. export default HelloWorld;

2 TypeScript编写组件

  1. import React from "react";
  3. // props的参数类型
  4. type PropsType = {
  5.      name:string,
  6.      age:number
  7. }
  8. /**
  9.  * 
  10.  * @param props 用来接收父组件的传递的参数
  11.  */
  12. function HelloWorld(props:PropsType){
  14.     return (<div>
  15.          HelloWorld
  16.     </div>)
  17. }
  18. export default HelloWorld;

我们来看看上面使用TypeScript编写的组件，我们知道使用Ts的作用就是添加类型的检查,所以我们需要给函数组件的Props(存在的时候)规定一个类型,我们使用了TypeScript的类型别名定义了一个PropsType来约束props.以上就是最简单的一个TypeScript编写的函数组件，可能会想为什么要使用类型别名来定义一个类型，其实使用接口也是可以定义约束的,下面就来讨论下。

Types 还是 Interfaces

在TypeScript中，Type和Interface还是有区别的，但就在React中，它们可以做相似的事情。下面有一个经验的法则，在不同的情境下选择到底是选择Type还是Interface

  1. 在编写一个库或者第三方的类型定义文件时，始终用Interface来定义公共的API.
  2. React组件的Props和State来使用Type定义约束,因为Type可以定义混合类型来适应Props类型。

关于Type Interface的区别，TypeScript中文网有详细的介绍，传送门:https://www.tslang.cn/docs/handbook/advanced-types.html

React.FC和React.FunctionComponent?

对于刚开始想使用TypeScript来开发React的小伙伴，肯定是通过Create-react-app或者umi脚手架来直接创建一个Typescript的项目，当我们打开自动生成的一些组件时候，我们可能会发现，有些函数组件是类似于下面的代码形式的

  1. const App: React.FC<{ message: string }> = ({ message }) => (
  2.   <div>{message}</div>
  3. );

我们看到React.F就很懵逼这是什么？我们知道在我们创建支持TypeScript语言项目的时候，脚手架会安装一些支持TypeScript的包，比如 @types/node @types/react @types/react-dom ，这些文件肯定也定义了一些公共的类型文件。React.FC就是一种类型,来定义一个函数组件的类型，该类型全称就是React.FunctionComponent支持范型。范型参数类约束Props，因此就有了上面的写法。

函数组件的返回值？

我们在上面都没有写函数组件的返回值,TypeScript会强制它的返回值可以赋值给JSX.Element。所以我们写函数组件也可以写下面的方式

  2. function MyButton(prop: {size:number}): JSX.Element {
  3.     ...
  4. }

总结

以上就是使用TypeScript来定义函数组件的写法。