React与Hooks如何使⽤TypeScript书写类型？
React 与 Hooks 如何使⽤ TypeScript 书写类型？
本⽂写于 2020 年 9 ⽉ 20 ⽇
函数组件与 TS
对于 Hooks 来说是不⽀持使⽤ class 组件的。
如何在函数组件中使⽤ TS 呢？
⾸先定然是函数的类型，我们需要告诉 TS，这个函数他是个 React 组件。
如果是 JavaScript，我们会这么写函数组件：
import React from 'react';
const MyComponent = () => {
return <h1>你好，世界</h1>
}
但如果是 TypeScript，我们就应该加上类型了。
React 为我们提供了⼀个叫做 React.FunctionComponent 的类型，学过⼩学⼆年级英语的同学应该都知道，这个类型是 React.函数组件的意思。如果你觉得这个名字太长了不好写，React 也提供了⼀个简单版本：React.FC
import React from 'react';
const MyComponent: React.FC = () => {
return <h1>你好，世界</h1>
}
如果我们希望它能接收到 Children 该怎么写呢？直接写就可以了。
const MyComponent: React.FC = (props) => {
reacthooks理解
return (
<div>
{props.children}
</div>
)
}
但这种情况是不可以接受额外的参数的。我们必须要声明我们函数需要接收哪些参数。
interface Props {
title: string;
msg: string;
list: number[];
}
然后将这个 Props 接⼝提供给 React.FC，写成：React.FC<Props>。
此时我们函数接收的参数 props 除了函数组件默认可以接收的⼀些参数，例如 children 之外，还可以接收 Props 接⼝声明的参数了。
useState
useState 的类型声明如右边：const [count, setCount] = useState<number>(0)。
useRef
useRef 我们通常⽤来管理 DOM，但也可以⽤⽤来管理其他的变量。
这⾥就说⼀下取 HTML DOM 元素的类型：HTMLInputElement 等等即可。
（完）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。