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) => {
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
等等即可。
(完)
React 与 Hooks 如何使用 TypeScript 书写类型?的更多相关文章
- C# vs TypeScript - 高级类型
总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...
- 从C#到TypeScript - 高级类型
C# vs TypeScript - 高级类型 上一篇讲了基础类型,基本上用基础类型足够开发了,不过如果要更高效的开发,还是要看下高级类型,这篇和C#共同点并不多,只是延用这个主题. 联合类型 可以从 ...
- TypeScript 之类型判断
在使用 Angular 做项目的时候,对 TypeScript 的类型判断不太熟练,为了方便查找,特意对 TypeScript 的类型判断做了简单梳理.文章只是 TS 官网的内容摘要,没有高深的知识, ...
- 使用 react 的 hooks 进行全局的状态管理
使用 react 的 hooks 进行全局的状态管理 React 最新正式版已经支持了 Hooks API,先快速过一下新的 API 和大概的用法. // useState,简单粗暴,setState ...
- TypeScript的类型
⒈TypeScript的类型 JavaScript语言的数据类型包括以下7种: 1.boolean(布尔),true || false 2.null,表明null值得特殊关键字,JavaScript是 ...
- TypeScript入门三:TypeScript函数类型
TypeScript函数类型 TypeScript函数的参数 TypeScript函数的this与箭头函数 TypeScript函数重载 一.TypeScript函数类型 在上一篇博客中已经对声明Ty ...
- 编写TypeScript工具类型,你需要知道的知识
什么是工具类型 用 JavaScript 编写中大型程序是离不开 lodash 工具的,而用 TypeScript 编程同样离不开工具类型的帮助,工具类型就是类型版的 lodash .简单的来说,就是 ...
- how to create react custom hooks with arguments
how to create react custom hooks with arguments React Hooks & Custom Hooks // reusable custom ho ...
- React Hooks & react forwardRef hooks & useReducer
React Hooks & react forwardref hooks & useReducer react how to call child component method i ...
随机推荐
- (2)_引言Introduction【论文写作】
- 带你玩转prefetch, preload, dns-prefetch,defer和async
现代浏览器性能优化-JS篇 众所周知,JS的加载和执行会阻塞浏览器渲染,所以目前业界普遍推荐把script放到</body>之前,以解决js执行时找不到dom等问题.但随着现代浏览器的普及 ...
- Day10 - JS 实现 Checkbox 中按住 Shift 的多选功能
Day10 - JS 实现 Checkbox 中按住 Shift 的多选功能 作者:liyuechun 简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战.项目免费提供了 3 ...
- 使用 Vuex + Vue.js 构建单页应用【新篇】
使用 Vuex + Vue.js 构建单页应用[新篇] 在去年的七月六号的时候,发布了一篇 使用 Vuex + Vue.js 构建单页应用 的文章,文章主要是介绍 vuex 的基本使用方法,发现对大部 ...
- Issues with position fixed & scroll(移动端 fixed 和 scroll 问题)
转载请注明英文原文及译文出处 原文地址:Issues with position fixed & scrolling on iOS 原文作者:Remy Sharp译文地址:移动端 fixed ...
- Android的Activity屏幕切换动画左右滑动切换
在Android开发过程中,经常会碰到Activity之间的切换效果的问题,下面介绍一下如何实现左右滑动的切换效果,首先了解一下Activity切换的实现,从Android2.0开始在Activity ...
- IO流的简单实现
IO流的几种实现方式 学习目标: 例题: 字节输出流 字节输入流 字符输入流 字符输出流 学习目标: 熟练掌握IO流的基本实现方式 例题: 字节输出流 代码如下: public class Outpu ...
- Bugku的exec执行绕过
题目 思路 1. 打开网页显示403 2. 回去看题目有提示 3. 不用多说,网页访问. 4. 第一行说要传个参数ip,试一下get传参?ip=127.0.0.1 5. 试下 ① 算术运算符 & ...
- Python入门-pip模块管理工具
安装 # 在线安装 pip install <包名> 安装后,该模块文件会在安装python环境目录:lib/packages目录下 # 安装本地安装包 pip install <目 ...
- jquery 日期插件datePicker使用
1.将下载下来的DatePicker压缩包解压后整个放入项目中,不可只引入js和css 2.在html中指定input位置加上class="Wdate"(默认样式不加也可正常显示) ...