typescript在react使用

前言

近几年前端对 TypeScript 的呼声越来越高，Ryan Dahl 的新项目 Deno 中 TypeScript 也变成了一个必须要会的技能，知乎上经常见到像『自从用了 TypeScript 之后,再也不想用 JavaScript 了』、『只要你用过 ES6，TypeScript 可以几乎无门槛接入』、『TypeScript可以在任何场景代替 JS』这些类似的回答，抱着听别人说不如自己用的心态逐渐尝试在团队内的一些底层支持的项目中使用 TypeScript。

使用 TypeScript 的编程体验真的是爽到爆，当在键盘上敲下 . 时，后面这一大串的提示真的是满屏幕的幸福，代码质量和效率提升十分明显，再也不想用 JavaScript 了。

在单独使用 TypeScript 时没有太大的坑，但是和一些框架结合使用的话坑还是比较多的，例如使用 React、Vue 这些框架的时候与 TypeScript 的结合会成为一大障碍，需要去查看框架提供的 .d.ts 的声明文件中一些复杂类型的定义。本文主要聊一聊与 React 结合时经常遇到的一些类型定义问题，阅读本文建议对 TypeScript 有一定了解，因为文中对于一些 TypeScript 的基础的知识不会有太过于详细的讲解。

编写第一个 TSX 组件

i

mport React from 'react'
import ReactDOM from 'react-dom'

const App = () => {

 return (

  <div>Hello world</div>

 )

}



ReactDOM.render(<App />, document.getElementById('root')

上述代码运行时会出现以下错误

Cannot find module 'react'

Cannot find module 'react-dom'

错误原因是由于 React 和 React-dom 并不是使用 TS 进行开发的，所以 TS 不知道 React、 React-dom 的类型，以及该模块导出了什么，此时需要引入 .d.ts 的声明文件，比较幸运的是在社区中已经发布了这些常用模块的声明文件 DefinitelyTyped 。

安装 React、 React-dom 类型定义文件
使用 yarn 安装

yarn add @types/react

yarn add @types/react-dom

使用 npm 安装

npm i @types/react -s

npm i @types/react-dom -s

有状态组件开发
我们定义一个 App 有状态组件，props、 state 如下。

Props
props	类型	是否必传
color	string	是
size	string	否
State
props	类型
count	string
使用 TSX 我们可以这样写