阅读 1996

React中使用TypeScript

新建 react + typescript 项目:

npx create-react-app my-app --typescript

已有项目迁移到typescript:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

TypeScript入门教程

1.引入插件

typescript中引入外部插件除了要引入插件本身还要引入它的声明@types,@type统一管理第三方库的声明文件。
比如: 引入路由插件react-router-dom
npm i react-router-dom    还需    npm i @types/react-router-dom

查找声明文件:microsoft.github.io/TypeSearch/

2.ts中路由配置

前文我有说过react中的路由, 但是在ts环境里你会发现引入@types/react-router-dom后直接使用withRouterts会一直报错(ts2339), 原因是必需使用 RuoteComponentProps,。

import React from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';

type PropsType = RouteComponentProps & {};

class demo extends React.Component<PropsType, any> {
  
  constructor(props: PropsType) {
    super(props);
    this.state = {
      demo: 'demo',
    }
  }

  goBack() {
    this.props.history.goBack();
  }

  render() {
    return (
      <div>
        <button onClick={() => this.goBack()}>goBack</button>
      </div>
    )
  }
}

export default withRouter(demo);
复制代码

3.props、state的使用

ts中React的组件中使用props或者state的时候,需要给组件传两个参数:指定类型(types)和对象的形(shape),原因是ts的规则一切都应该按住预期的方式工作,类型检查方面得先定义。

React.Compnent<types, shape>
复制代码

如果类型对不上ts会提示报错:

应该对应类型:

当你不确定自己需要创建多少参数和参数类型时,建议使用any(任意类型):

class demo extends React.Component<any, any>
复制代码

给组件传入 RuoteComponentProps 后就相当于定义了 any , 如果是没有使用路由插件的普通组型,需要注意如果React.Compnent<types, shape>中的types被定义了,则没办法接手来自路由的参数。

this.props.history.push({
  pathname: 'demo',
  state: {
    data: 1
  }
})
复制代码
同样的我们可以把 demoData 改为 any 来解决。

吐槽:React + TypeScript 一开始摸起来真的是非常多问题,因为第一次使用ts也是很多不习惯,加上还要适应react路由插件的声明和各种特殊处理...

文章分类
前端
文章标签