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. (2)_引言Introduction【论文写作】

  2. 带你玩转prefetch, preload, dns-prefetch,defer和async

    现代浏览器性能优化-JS篇 众所周知,JS的加载和执行会阻塞浏览器渲染,所以目前业界普遍推荐把script放到</body>之前,以解决js执行时找不到dom等问题.但随着现代浏览器的普及 ...

  3. Day10 - JS 实现 Checkbox 中按住 Shift 的多选功能

    Day10 - JS 实现 Checkbox 中按住 Shift 的多选功能 作者:liyuechun 简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战.项目免费提供了 3 ...

  4. 使用 Vuex + Vue.js 构建单页应用【新篇】

    使用 Vuex + Vue.js 构建单页应用[新篇] 在去年的七月六号的时候,发布了一篇 使用 Vuex + Vue.js 构建单页应用 的文章,文章主要是介绍 vuex 的基本使用方法,发现对大部 ...

  5. Issues with position fixed & scroll(移动端 fixed 和 scroll 问题)

    转载请注明英文原文及译文出处 原文地址:Issues with position fixed & scrolling on iOS 原文作者:Remy Sharp译文地址:移动端 fixed ...

  6. Android的Activity屏幕切换动画左右滑动切换

    在Android开发过程中,经常会碰到Activity之间的切换效果的问题,下面介绍一下如何实现左右滑动的切换效果,首先了解一下Activity切换的实现,从Android2.0开始在Activity ...

  7. IO流的简单实现

    IO流的几种实现方式 学习目标: 例题: 字节输出流 字节输入流 字符输入流 字符输出流 学习目标: 熟练掌握IO流的基本实现方式 例题: 字节输出流 代码如下: public class Outpu ...

  8. Bugku的exec执行绕过

    题目 思路 1. 打开网页显示403 2. 回去看题目有提示 3. 不用多说,网页访问. 4. 第一行说要传个参数ip,试一下get传参?ip=127.0.0.1 5. 试下 ① 算术运算符 & ...

  9. Python入门-pip模块管理工具

    安装 # 在线安装 pip install <包名> 安装后,该模块文件会在安装python环境目录:lib/packages目录下 # 安装本地安装包 pip install <目 ...

  10. jquery 日期插件datePicker使用

    1.将下载下来的DatePicker压缩包解压后整个放入项目中,不可只引入js和css 2.在html中指定input位置加上class="Wdate"(默认样式不加也可正常显示) ...