React 与 Hooks 如何使用 TypeScript 书写类型?
2024-09-07 11:27:05
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) => {
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
等等即可。
(完)
最新文章
- Windows中创建桌面快捷方式
- zabbix 微信报警
- check the element in the array occurs more than half of the array length
- 【线段树/数学/扩展欧几里得】 Bzoj 3913:奇数国
- linux 守护进程创建流程
- maven 第一次运行报错
- java IO流整理
- 微信小程序开发之picker
- Java点滴之类与对象
- 阿里云Centos 7.4 mssql-server
- Gym101473A Gym101473E Gym101473F-前缀和
- js的异步和单线程
- [LeetCode] Minimize Max Distance to Gas Station 最小化去加油站的最大距离
- Json中Date映射到model
- jdk的安装和配置环境变量
- Android-Kotlin-单例模式
- bzoj2300【HAOI2011】防线修建
- GO_00:Mac之Item2的配置安装
- WPF中删除打开过的图片
- activemq无法启动且后台管理界面进不去的解决办法