• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

React与Hooks如何使用TypeScript书写类型?

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文写于 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 等等即可。

(完)


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
使用typescript构建Vue应用发布时间:2022-07-18
下一篇:
怎么运行Typescript发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap