开始使用 Typescript 和 React Hooks

Typescript是前端开发领域的下一个大热门，如果你想将你的技能从初级前端开发人员提升到中级前端开发人员，那么它是一项必备技能。Typescript
是 JavaScript 的上标，所以如果你了解 JavaScript，你就已经成功了一半！Typescript 带来的是运行时类型检查，可以生成更无错误的代码，并且代码更容易编写文档。

本文面向已了解 React 和 JavaScript 并希望转向 TypeScript 的开发者，因此我不会重点介绍任何 React 概念。这是一个速成课程，旨在帮助您了解如何在 React 中使用 TypeScript 的基础知识。

指数

我们将涵盖理解使用 React 和 TypeScript 的基础知识所需的所有主题。

信息
设置
处理状态
处理道具
处理函数
处理事件

在本文中，我们将构建一个简单的个人观看列表，通过获取电影名称、评分和评论来记录您输入的电影。它看起来像这样。（虽然略显程式化，但底层代码很简单）

信息

该项目的 Github 仓库

项目在线演示

设置

让我们从初始化项目开始！我将我的项目命名为 typescript-with-react，但你可以使用任何你喜欢的名称。
npx create-react-app --template typescript typescript-with-react

好的，现在更改目录以进入您的项目文件夹，并像处理任何反应项目一样进行操作。

cd typescript-with-react/
code .
npm start

你的代码结构应该是这样的

注意这些文件的扩展名是.ts或.tsx。这表示这些文件是用 TypeScript 转译的。
好了，现在让我们深入 TypeScript 的细节！

处理状态

在 typescript 中，有必要提及所有变量和函数的类型定义以及它们返回的内容。

为了处理反应中的状态，您需要首先创建一个接口，其中提到变量的数据类型。
在下面的示例中，我们创建了一个名为IState（您可以随意命名）的接口。
接口IState是我们编写类型定义的地方，定义我们希望状态变量是什么，在本例中是一个对象数组。为了表示这一点，我们在类型定义后添加了方括号。然后在使用 useState 时，添加，<IState["form"]>表示状态应该只接受指定格式的值（在本例中为 IState 格式，即以对象“form”作为输入格式）。

我们导出了 IState，以便稍后在另一个文件中使用它。
另一种添加状态的内联方法如下：

const [counter, setCounter] = useState<{name:string,rate:number,review?:string}[]>([])

在我们的案例项目中，我们希望评论成为可选字段，而电影名称和电影评级成为必填字段。
因此，对于 review，我们已经完成了review?:string，其中问号表示 review 的值可以是字符串或未定义。然而，对于name和，rate我们有严格的类型定义，除了指定的类型定义之外，它不会接受任何其他类型。
您可以通过以下方式向变量添加多个类型定义：

inputValue:number | string | null

这里的变量inputValue可以是数字、字符串甚至是空值的数据类型。
注意：null 和 undefined 不是相同的数据类型。

处理道具

在 React 中处理 props 时，组件的发送端和接收端都应该明确声明所涉及的变量或函数的类型和数量。如果发送端或接收端缺少任何内容，Typescript 都会报错。

这是发送方。

<List form={form} />
<Form form={form} setForm={setForm} />

我们App.tsx正在发送一个对象，form即List.tsx

List现在让我们看一下组件的接收端。

import { IState as IProps } from "../App"

const List: React.FC<IProps> = ({ form }) => {
...
}

List 是一个接受 props 的 React 函数式组件。在 TypeScript 中，为了显示，我们在组件声明React.FC<IProps>后添加List。
IState我们可以在别名下导入，IProps因为我们知道对象的类型定义form与对象完全相同IState。
然后我们可以form对参数进行解构并在函数组件中使用它。

在第二个例子中，App.tsx我们发送一个对象，即form和一个函数，即现在setForm让Form.tsx
我们看一下Form组件的接收端。

正如您在该组件中看到的，我们也IState使用别名导入了它Props，但是我们在这里做了一些自定义更改。

这里我们创建了一个名为的新接口IProps，它指定了传入 props 的类型定义，因为我们必须指定的类型setForm。
我们提到form: Props["form"]这意味着应该分配表单，其类型定义IState在别名下导入Props
，然后类似地我们现在将为setForm

专家提示：要了解您不了解的事物的类型定义，只需将鼠标悬停在该元素上并复制类型定义即可。

由于我们已经将 props 的类型定义声明为Props["form"]，因此我们可以缩短的类型定义setForm，并改为这样写

 setForm: React.Dispatch<React.SetStateAction<Props["form"]>>

然后简单地解构函数的参数form并在组件中使用它。setFormForm

处理函数

在 react-typescript 中，您需要提及函数给出的输出类型。

在此示例中，我们调用mapList()函数来映射列表数组并将表行作为输出，这是一个 JSX 元素。

要提及此函数的输出类型，请: JSX.Element[]在参数后面添加，这表示该函数应该返回一个 JSX 元素数组。
值得注意的是，我们编写了一个嵌套的返回语句，因为第一个返回指向映射函数。
然而，我们不应该返回映射函数，因此如果我们只有一个返回语句，typescript 就会给出错误，因为我们已经提到了我们的返回类型为JSX.Element[]。
我们在 map 函数内部嵌套了一个 return 语句，以便它专门返回一个纯 JSX 元素，即本例中的表格行。

专家提示：如果您不确定返回类型是什么，请将鼠标悬停在函数上以了解其返回类型。

或者，如果函数没有返回任何内容，则按:void如下方式在参数后面提及它的空返回类型：

const randomFunction = (): void => {
...
}

处理事件

为了使用 React TypeScript 处理事件，我们将查看Form组件中以下 JSX 元素调用的以下 DOM 事件：

<input className="inputBox" type='text' name="name" value={input.name} onChange={(e) => handleChange(e)} />

<textarea className="inputBox" name="review" value={input.review} onChange={(e) => handleChange(e)}></textarea>

这里，input标签有一个名为的 DOM 属性，当事件触发时onChange会调用该属性。为此，我们创建了一个函数，该函数知道它将接收 HTML 元素作为参数。handleChange

 const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
        setInput({
            ...input,
            [e.target.name]: e.target.value
        })
    }

这里我们声明的e是React.ChangeEvent<HTMLInputElement>标签input将发送的类型。
并且由于对于电影评论字段，我们使用了 textarea 标签而不是 input 标签，因此e也可以React.ChangeEvent<HTMLTextAreaElement>。
因此的整个类型定义e可以写成e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>。
我们需要添加:void以指定该函数不会返回任何内容。

在第二个例子中，我们将看一下onClick表单提交按钮调用的事件。

<button className="button" type="submit" onClick={(e) => handleClick(e)}>Submit</button>

const handleClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
        e.preventDefault();
        if (!input.name || !input.rate) {
            return
        }
        setForm([...form, {
            name: input.name,
            rate: parseInt(input.rate),
            review: input.review
        }])
    }

与handleChange函数类似handleClick，函数采用适当的类型定义，e在本例中为React.MouseEvent<HTMLButtonElement>。

结论

本次速成课程就到这里！希望这能让你对如何在 React 中使用 TypeScript 有一个大致的了解。继续学习，祝你拥有美好的一天！

文章来源：https://dev.to/riyanegi/getting-started-with-typescript-with-react-hooks-2021-5cfd