React 和 TypeScript 结合

[oliver1204]

TypeScript 是 JS 类型的超集，并支持了泛型、类型、命名空间、枚举等特性，弥补了 JS 在大型应用开发中的不足，那么当 TypeScript 与 React 一起使用会碰撞出怎样的火花呢？接下来让我们一起探索TypeScript 在编写 React 组件中的一些感想。

由于Ryan Dahl 在新项目 Deno 中 使用了TypeScrip，渐渐的TypeScrip也成为了前端的标配之一😢。
笔者所在项目从18.9月开始使用TypeScrip， 到现在也有小半年了，就简单的写一下对 TypeScrip 的看法，有不对的地方欢迎各位指出。

TypeScrip 的编程体验是真的爽啊，当在键盘上敲击.后一系列的提示爽歪歪😊。当然带来爽歪歪的同时也困扰。 首先，强调一些背景，笔者所在的公司不大，很多地方不是很正规，前后端联调时接口文档变化很大，经常出现字段名称约定是a,但实际开发的时候变成了b,类型原本约定的时候string类型，可能一会儿又变成了number类型，增删改字段更是家常便饭，在这样的环境下使用 TypeScrip 无疑给自己找了很大的麻烦，带来的便捷远不及增加的开发量。（针对这点，欢迎大家指出笔者的理解不足）

但是笔者始终认为在相对成熟的团队中使用 TypeScrip 还是很nice的。

下面笔者将在项目中使用 TypeScrip 遇见的问题简单的罗列一下，供大家参考：

引用@types/react

一个简单的 TSX 模版如下：

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

const App = () => {

 return (
     <div>Hello world</div>
 )
}

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

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

1. Cannot find module 'react'
2. Cannot find module 'react-dom'

错误原因是由于 React 和 React-dom 并不是使用 TS 进行开发的，所以 TS 不知道 React、 React-dom 的类型，以及该模块导出了什么 。

所以我们需要安装React、 React-dom 类型定义文件。

yarn add @types/react
yarn add @types/react-dom

Promise 类型

在做异步操作时我们经常使用 async 函数，函数调用时会 return 一个 Promise 对象，可以使用 then 方法添加回调函数。

Promise 是一个泛型类型，T 泛型变量用于确定使用 then 方法时接收的第一个回调函数（onfulfilled）的参数类型。实例:

interface IResponse<T> {
  message: string,
  result: T,
  success: boolean,
}
async function getResponse (): Promise<IResponse<number[]>> {
  return {
    message: '获取成功',
    result: [1, 2, 3],
    success: true,
  }
}
getResponse()
  .then(response => {
    console.log(response.result)
  })

我们首先声明 IResponse 的泛型接口用于定义 response 的类型，通过 T 泛型变量来确定 result 的类型。

然后声明了一个 异步函数getResponse并且将函数返回值的类型定义为 Promise<IResponse<number[]>> 。

最后调用 getResponse 方法会返回一个 promise 类型，通过 then 调用，此时 then 方法接收的第一个回调函数的参数 response 的类型为，{ message: string, result: number[], success: boolean} 。
Promise<T> 实现源码 node_modules/typescript/lib/lib.es5.d.ts。

事件处理

Event 事件对象类型
常用 Event 事件对象类型：

1. ClipboardEvent<T = Element> 剪贴板事件对象
2. DragEvent<T = Element> 拖拽事件对象
3. ChangeEvent<T = Element> Change 事件对象
4. KeyboardEvent<T = Element> 键盘事件对象
5. MouseEvent<T = Element> 鼠标事件对象
6. TouchEvent<T = Element> 触摸事件对象
7. WheelEvent<T = Element> 滚轮事件对象
8. AnimationEvent<T = Element> 动画事件对象

import { MouseEvent } from 'react'

interface IProps {

  onClick (event: MouseEvent<HTMLDivElement>): void,
}

不确定相定义

imgList: { [key: string]: HTMLImageElement } = {}