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 ...
随机推荐
- 开关电源PCB排版,基本要点分析
1 开关电源PCB排版基本要点 1.1 电容高频滤波特性 图1是电容器基本结构和高频等效模型. 电容的基本公式是 式(1)显示,减小电容器极板之间的距离(d)和增加极板的截面积(A)将增加电容器的电容 ...
- Web最佳实践阅读总结(1)
介绍 最近开始刷一些书和题,此系列是介绍在读Web最佳实践的一些收获和体会. web前端发展现状 存在问题: 代码组织混乱 代码格式的问题突出 页面布局随意 网站整体性能差,没有意识到应用诸如缓存,动 ...
- 【Android开发】控件外边框自定义
1.在drawable里面新建自定义的资源文件shape <?xml version="1.0" encoding="utf-8"?> <sh ...
- jdbc连接MySQL数据库+简单实例(普通JDBC方法实现和连接池方式实现)
jdbc连接数据库 总结内容 1. 基本概念 jdbc的概念 2. 数据库连接 数据库的连接 DAO层思想 重构设计 3. 事务 概念 事务的ACID属性 事务的操作 4. 连接池 为什么要使用连接池 ...
- JavaScript实现按钮改变网页背景色
运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
- pip导出项目依赖包名称及版本,再安装命令
A导出依赖 pip freeze >requirements.txt B导入安装依赖 pip install -r requirements.txt 使用下面的命令安装依赖能自动跳过安装错误的依 ...
- Spring Boot配置文件加载顺序
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.通过spring.config.location改变配置文件的位置 二.外部配置加载顺序 1.使用命令行参数指定加 ...
- i.MX rt 系列微控制器的学习记录
杂记 前言 我总是很希望自己能产生一种感知电压变化的能力,就像B站上的教学动图中,电流从电源流出时导线就像LED亮起来一样,我将指尖触到导线上就能感受到实时的电压变化.我在上学和工作时经常由于无法理解 ...
- pytest进阶使用【fixture(一)fixture与setup/teardown区别】
fixture翻译为装置. 我觉得名字是很贴合功能的,可以自由给函数装置上自己想要的功能. 当在说pytest比unitest灵活时,fixture肯定是其中的一个理由. 测试数据的准备和执行以后的数 ...
- v-if 和 v-show 的区别
1.v-if && v-else && v-else-if <span v-if = "4 > 9">hello</span ...