面试官：说说如何在React项目中应用TypeScript？

柔光的暖阳◎ 2022-09-11 12:11 198阅读 0赞

![e242a419ae4e7a6dcef1234ba29d37e1.png][]

## 一、前言 ##

单独的使用`typescript` 并不会导致学习成本很高，但是绝大部分前端开发者的项目都是依赖于框架的

例如和`vue`、`react` 这些框架结合使用的时候，会有一定的门槛

使用 `TypeScript` 编写 `react` 代码，除了需要 `typescript` 这个库之外，还需要安装`@types/react`、`@types/react-dom`

npm i @types/react -s
    
    npm i @types/react-dom -s

至于上述使用`@types`的库的原因在于，目前非常多的`javascript`库并没有提供自己关于 `TypeScript` 的声明文件

所以，`ts`并不知道这些库的类型以及对应导出的内容，这里`@types`实际就是社区中的`DefinitelyTyped`库，定义了目前市面上绝大多数的`JavaScript`库的声明

所以下载相关的`javascript`对应的`@types`声明时，就能够使用使用该库对应的类型定义

## 二、使用方式 ##

在编写`react`项目的时候，最常见的使用的组件就是：

*  无状态组件
 *  有状态组件
 *  受控组件

### 无状态组件 ###

主要作用是用于展示`UI`，如果使用`js`声明，则如下所示：

import * as React from 'react'
    
    export const Logo = props => {
        const { logo, className, alt } = props
    
        return (
            <img src={logo} className={className} alt={alt} />
        )
    }

但这时候`ts`会出现报错提示，原因在于没有定义`porps`类型，这时候就可以使用`interface`接口去定义`porps`即可，如下：

import * as React from 'react'
    
    interface IProps {
        logo?: string
        className?: string
        alt?: string
    }
    
    export const Logo = (props: IProps) => {
        const { logo, className, alt } = props
    
        return (
            <img src={logo} className={className} alt={alt} />
        )
    }

但是我们都知道`props`里面存在`children`属性，我们不可能每个`porps`接口里面定义多一个`children`，如下：

interface IProps {
        logo?: string
        className?: string
        alt?: string
        children?: ReactNode
    }

更加规范的写法是使用`React`里面定义好的`FC`属性，里面已经定义好`children`类型，如下：

export const Logo: React.FC<IProps> = props => {
        const { logo, className, alt } = props
    
        return (
            <img src={logo} className={className} alt={alt} />
        )
    }

*  React.FC显式地定义了返回类型，其他方式是隐式推导的
 *  React.FC对静态属性：displayName、propTypes、defaultProps提供了类型检查和自动补全
 *  React.FC为children提供了隐式的类型（ReactElement | null）

### 有状态组件 ###

可以是一个类组件且存在`props`和`state`属性

如果使用`typescript`声明则如下所示：

import * as React from 'react'
    
    interface IProps {
      color: string,
      size?: string,
    }
    interface IState {
      count: number,
    }
    class App extends React.Component<IProps, IState> {
      public state = {
        count: 1,
      }
      public render () {
        return (
          <div>Hello world</div>
        )
      }
    }

上述通过泛型对`props`、`state`进行类型定义，然后在使用的时候就可以在编译器中获取更好的智能提示

关于`Component`泛型类的定义，可以参考下 React 的类型定义文件 `node_modules/@types/react/index.d.ts`，如下所示：

class Component<P, S> {
    
        readonly props: Readonly<{ children?: ReactNode }> & Readonly<P>;
    
        state: Readonly<S>;
    
    }

从上述可以看到，`state`属性也定义了可读类型，目的是为了防止直接调用`this.state`更新状态

### 受控组件 ###

受控组件的特性在于元素的内容通过组件的状态`state`进行控制

由于组件内部的事件是合成事件，不等同于原生事件，

例如一个`input`组件修改内部的状态，常见的定义的时候如下所示：

private updateValue(e: React.ChangeEvent<HTMLInputElement>) {
        this.setState({ itemText: e.target.value })
    }

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

*  ClipboardEvent<T = Element> 剪贴板事件对象
 *  DragEvent<T = Element> 拖拽事件对象
 *  ChangeEvent<T = Element>  Change 事件对象
 *  KeyboardEvent<T = Element> 键盘事件对象
 *  MouseEvent<T = Element> 鼠标事件对象
 *  TouchEvent<T = Element>  触摸事件对象
 *  WheelEvent<T = Element> 滚轮事件对象
 *  AnimationEvent<T = Element> 动画事件对象
 *  TransitionEvent<T = Element> 过渡事件对象

`T`接收一个`DOM` 元素类型

## 三、总结 ##

上述只是简单的在`react`项目使用`typescript`，但在编写`react`项目的时候，还存在`hooks`、默认参数、以及`store`等等......

`typescript`在框架中使用的学习成本相对会更高，需要不断编写才能熟练

## 参考文献 ##

*  https://juejin.cn/post/6952696734078369828
 *  https://juejin.cn/post/6844903684422254606

![ca1d8b2940554ba2aa34917be8221d6f.png][]

往期推荐

[大厂面试过程复盘(微信/阿里/头条,附答案篇)][Link 1]

![ecf218f8adc686c685f9a39ab18d3257.png][]

[面试题：说说事件循环机制(满分答案来了)][Link 2]

![f55c12a78ff9e32fcf61d4fa6ccb95fe.png][]

[专心工作只想搞钱的前端女程序员的2020][2020]

![a5f95c1ce481be0ca11e27b79518f676.png][]

最后

*  欢迎加我微信，拉你进技术群，长期交流学习...  
    
 *  欢迎关注「前端Q」,认真学前端，做个专业的技术人...

![71a5d332a6ce6e9417ab135565e066d1.png][]

![ac6aa2762f65fe74b4b91e9e6b7a27f9.png][]

点个**在看**支持我吧

![825fa17dbc9ecf1b3d302b8785c667c2.gif][]

[e242a419ae4e7a6dcef1234ba29d37e1.png]: /images/20220828/8c59d6ada8ac445eb291812663ea81b5.png
[ca1d8b2940554ba2aa34917be8221d6f.png]: /images/20220828/480b1391bf444e7493169c2a3f45a733.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng==&mid=2649829027&idx=2&sn=1a433047a8d6e8af65012bfa0bd27e3f&chksm=f175e460c6026d76bcdfc6dd42cfe80a3f14ea832d1922d65043f666d6de22bd17b09e779ed9&scene=21#wechat_redirect
[ecf218f8adc686c685f9a39ab18d3257.png]: /images/20220828/c264cf7d3ee14e2db908c2c0fec9513e.png
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng==&mid=2649826653&idx=1&sn=9e5e2de78a8ef4de3820769ff3ab7c02&chksm=f175ef9ec60266880a86f33085ff43f95e3180846c5f139cb9b1b33c3245201157f39d949e9a&scene=21#wechat_redirect
[f55c12a78ff9e32fcf61d4fa6ccb95fe.png]: /images/20220828/932da1c5fdd04604825206f2df1569ba.png
[2020]: http://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng==&mid=2649831877&idx=1&sn=9352cf4624308602c50a6fd10379d132&chksm=f175f306c6027a1029967cde600630a5107fbbfdd125b64ba3f2c9d9b570b102162ab4c3b373&scene=21#wechat_redirect
[a5f95c1ce481be0ca11e27b79518f676.png]: /images/20220828/e5ba04dc35b448d5badc78db72c7d03a.png
[71a5d332a6ce6e9417ab135565e066d1.png]: /images/20220828/8a831f4a9a9f48a3b764fa0f8e9c59e8.png
[ac6aa2762f65fe74b4b91e9e6b7a27f9.png]: /images/20220828/94ec0ec1c56249dca23596fde007fb5c.png
[825fa17dbc9ecf1b3d302b8785c667c2.gif]: /images/20220828/99e01fead8074f888a868afe0526d578.png