面試官：說(shuō)說(shuō)如何在React項(xiàng)目中應(yīng)用TypeScript？

一、前言

單獨(dú)的使用typescript 并不會(huì)導(dǎo)致學(xué)習(xí)成本很高，但是絕大部分前端開(kāi)發(fā)者的項(xiàng)目都是依賴(lài)于框架的

例如和vue、react 這些框架結(jié)合使用的時(shí)候，會(huì)有一定的門(mén)檻

使用 TypeScript 編寫(xiě) react 代碼，除了需要 typescript 這個(gè)庫(kù)之外，還需要安裝@types/react、@types/react-dom

npm i @types/react -s

npm i @types/react-dom -s

至于上述使用@types的庫(kù)的原因在于，目前非常多的javascript庫(kù)并沒(méi)有提供自己關(guān)于 TypeScript 的聲明文件

所以，ts并不知道這些庫(kù)的類(lèi)型以及對(duì)應(yīng)導(dǎo)出的內(nèi)容，這里@types實(shí)際就是社區(qū)中的DefinitelyTyped庫(kù)，定義了目前市面上絕大多數(shù)的JavaScript庫(kù)的聲明

所以下載相關(guān)的javascript對(duì)應(yīng)的@types聲明時(shí)，就能夠使用使用該庫(kù)對(duì)應(yīng)的類(lèi)型定義

二、使用方式

在編寫(xiě)react項(xiàng)目的時(shí)候，最常見(jiàn)的使用的組件就是：

• 無(wú)狀態(tài)組件
• 有狀態(tài)組件
• 受控組件

無(wú)狀態(tài)組件

主要作用是用于展示UI，如果使用js聲明，則如下所示：

import * as React from 'react'

export const Logo = props => {
    const { logo, className, alt } = props

    return (
        <img src={logo} className={className} alt={alt} />
    )
}

但這時(shí)候ts會(huì)出現(xiàn)報(bào)錯(cuò)提示，原因在于沒(méi)有定義porps類(lèi)型，這時(shí)候就可以使用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屬性，我們不可能每個(gè)porps接口里面定義多一個(gè)children，如下：

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

更加規(guī)范的寫(xiě)法是使用React里面定義好的FC屬性，里面已經(jīng)定義好children類(lèi)型，如下：

export const Logo: React.FC<IProps> = props => {
    const { logo, className, alt } = props

    return (
        <img src={logo} className={className} alt={alt} />
    )
}

• React.FC顯式地定義了返回類(lèi)型，其他方式是隱式推導(dǎo)的

• React.FC對(duì)靜態(tài)屬性：displayName、propTypes、defaultProps提供了類(lèi)型檢查和自動(dòng)補(bǔ)全

• React.FC為children提供了隱式的類(lèi)型（ReactElement | null）

有狀態(tài)組件

可以是一個(gè)類(lèi)組件且存在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>
    )
  }
}

上述通過(guò)泛型對(duì)props、state進(jìn)行類(lèi)型定義，然后在使用的時(shí)候就可以在編譯器中獲取更好的智能提示

關(guān)于Component泛型類(lèi)的定義，可以參考下 React 的類(lèi)型定義文件 node_modules/@types/react/index.d.ts，如下所示：

class Component<P, S> {

    readonly props: Readonly<{ children?: ReactNode }> & Readonly<P>;

    state: Readonly<S>;

}

從上述可以看到，state屬性也定義了可讀類(lèi)型，目的是為了防止直接調(diào)用this.state更新?tīng)顟B(tài)

受控組件

受控組件的特性在于元素的內(nèi)容通過(guò)組件的狀態(tài)state進(jìn)行控制

由于組件內(nèi)部的事件是合成事件，不等同于原生事件，

例如一個(gè)input組件修改內(nèi)部的狀態(tài)，常見(jiàn)的定義的時(shí)候如下所示：

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

常用Event 事件對(duì)象類(lèi)型：

• ClipboardEvent<T = Element> 剪貼板事件對(duì)象
• DragEvent<T = Element> 拖拽事件對(duì)象
• ChangeEvent<T = Element>  Change 事件對(duì)象
• KeyboardEvent<T = Element> 鍵盤(pán)事件對(duì)象
• MouseEvent<T = Element> 鼠標(biāo)事件對(duì)象
• TouchEvent<T = Element>  觸摸事件對(duì)象
• WheelEvent<T = Element> 滾輪事件對(duì)象
• AnimationEvent<T = Element> 動(dòng)畫(huà)事件對(duì)象
• TransitionEvent<T = Element> 過(guò)渡事件對(duì)象

T接收一個(gè)DOM 元素類(lèi)型

三、總結(jié)

上述只是簡(jiǎn)單的在react項(xiàng)目使用typescript，但在編寫(xiě)react項(xiàng)目的時(shí)候，還存在hooks、默認(rèn)參數(shù)、以及store等等......

typescript在框架中使用的學(xué)習(xí)成本相對(duì)會(huì)更高，需要不斷編寫(xiě)才能熟練

參考文獻(xiàn)

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