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 书写类型?的更多相关文章

  1. C# vs TypeScript - 高级类型

    总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...

  2. 从C#到TypeScript - 高级类型

    C# vs TypeScript - 高级类型 上一篇讲了基础类型,基本上用基础类型足够开发了,不过如果要更高效的开发,还是要看下高级类型,这篇和C#共同点并不多,只是延用这个主题. 联合类型 可以从 ...

  3. TypeScript 之类型判断

    在使用 Angular 做项目的时候,对 TypeScript 的类型判断不太熟练,为了方便查找,特意对 TypeScript 的类型判断做了简单梳理.文章只是 TS 官网的内容摘要,没有高深的知识, ...

  4. 使用 react 的 hooks 进行全局的状态管理

    使用 react 的 hooks 进行全局的状态管理 React 最新正式版已经支持了 Hooks API,先快速过一下新的 API 和大概的用法. // useState,简单粗暴,setState ...

  5. TypeScript的类型

    ⒈TypeScript的类型 JavaScript语言的数据类型包括以下7种: 1.boolean(布尔),true || false 2.null,表明null值得特殊关键字,JavaScript是 ...

  6. TypeScript入门三:TypeScript函数类型

    TypeScript函数类型 TypeScript函数的参数 TypeScript函数的this与箭头函数 TypeScript函数重载 一.TypeScript函数类型 在上一篇博客中已经对声明Ty ...

  7. 编写TypeScript工具类型,你需要知道的知识

    什么是工具类型 用 JavaScript 编写中大型程序是离不开 lodash 工具的,而用 TypeScript 编程同样离不开工具类型的帮助,工具类型就是类型版的 lodash .简单的来说,就是 ...

  8. how to create react custom hooks with arguments

    how to create react custom hooks with arguments React Hooks & Custom Hooks // reusable custom ho ...

  9. React Hooks & react forwardRef hooks & useReducer

    React Hooks & react forwardref hooks & useReducer react how to call child component method i ...

随机推荐

  1. 开关电源PCB排版,基本要点分析

    1 开关电源PCB排版基本要点 1.1 电容高频滤波特性 图1是电容器基本结构和高频等效模型. 电容的基本公式是 式(1)显示,减小电容器极板之间的距离(d)和增加极板的截面积(A)将增加电容器的电容 ...

  2. Web最佳实践阅读总结(1)

    介绍 最近开始刷一些书和题,此系列是介绍在读Web最佳实践的一些收获和体会. web前端发展现状 存在问题: 代码组织混乱 代码格式的问题突出 页面布局随意 网站整体性能差,没有意识到应用诸如缓存,动 ...

  3. 【Android开发】控件外边框自定义

    1.在drawable里面新建自定义的资源文件shape <?xml version="1.0" encoding="utf-8"?> <sh ...

  4. jdbc连接MySQL数据库+简单实例(普通JDBC方法实现和连接池方式实现)

    jdbc连接数据库 总结内容 1. 基本概念 jdbc的概念 2. 数据库连接 数据库的连接 DAO层思想 重构设计 3. 事务 概念 事务的ACID属性 事务的操作 4. 连接池 为什么要使用连接池 ...

  5. JavaScript实现按钮改变网页背景色

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  6. pip导出项目依赖包名称及版本,再安装命令

    A导出依赖 pip freeze >requirements.txt B导入安装依赖 pip install -r requirements.txt 使用下面的命令安装依赖能自动跳过安装错误的依 ...

  7. Spring Boot配置文件加载顺序

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.通过spring.config.location改变配置文件的位置 二.外部配置加载顺序 1.使用命令行参数指定加 ...

  8. i.MX rt 系列微控制器的学习记录

    杂记 前言 我总是很希望自己能产生一种感知电压变化的能力,就像B站上的教学动图中,电流从电源流出时导线就像LED亮起来一样,我将指尖触到导线上就能感受到实时的电压变化.我在上学和工作时经常由于无法理解 ...

  9. pytest进阶使用【fixture(一)fixture与setup/teardown区别】

    fixture翻译为装置. 我觉得名字是很贴合功能的,可以自由给函数装置上自己想要的功能. 当在说pytest比unitest灵活时,fixture肯定是其中的一个理由. 测试数据的准备和执行以后的数 ...

  10. v-if 和 v-show 的区别

    1.v-if && v-else && v-else-if <span v-if = "4 > 9">hello</span ...