在 React 中使用 TypeScript

如何在 React 项目中使用 TS，包括以下内容：

1. 使用 CRA 创建支持 TS 的项目

2. TS 配置文件 tsconfig.json

3. React 中的常用类型

使用 CRA 创建支持 TS 的项目

React 脚手架工具 create-react-app (简称 CRA）默认支持 TypeScript。

创建支持 TS 的项目命令：npx create-react-app 项目名称 --template typescript。

 

相对于非 TS 项目，目录结构主要由以下三个变化：

1. 项目根目录中增加了 tsconfig.json 配置文件：指定 TS 的编译选项（比如，编译时是否移除注释）

2. React 组件的文件扩展名变为 *.tsx

3. src 目录中增加了 react-app-env.d.ts：React 项目默认的类型声明文件

1. 三斜线指令：指定依赖的其他类型声明文件，types 表示依赖的类型声明文件包的名称。///

2. 解释：告诉 TS 帮我加载 react-script 这个包。

3. react-script 的类型声明文件包含了两部分类型：

1. react、react-dom、node的类型

2. 图片、样式等模块的类型，以允许在代码中导入图片、SVG等文件

3. TS 会自动加载 .d.ts 文件，以提供类型声明（通过修改 tsconfig.json 中的 include 配置来验证）

 

TS 配置文件 tsconfig.json

tsconfig.json 指定：项目文件和项目编译所需的配置项。

注意：TS 的配置项非常多（100+），以 CRA 项目中的配置为例来学习，其他配置项用时查文档即可。

1. tsconfig.json 文件所在目录为项目根目录（与 package.json 同级）

2. tsconfig.json 可以自动生成，命令：tsc --init

 

除了在 tsconfig.json 文件中使用编译配置外，还可以通过命令行来使用。

使用演示：tsc hello.ts --target es6

注意：

1. tsc 后带有输入文件时（比如：tsc hello.ts)，将忽略 tsconfig.json 文件

2. tsc 后不带输入文件时（比如：tsc），才会启动 tsconfig.json

推荐使用：tsconfig.json 配置文件

 

React 中的常用类型

前提说明：现在，基于 class 组件来讲解 React + TS 的使用（最新的 React Hooks）

在不使用 TS 时，可以使用 proptypes 库，为 React 组件提供类型检查。

说明：TS 项目中，推荐使用 TypeScript 实现组件类型校验（代替 Proptypes）。

不管是 React 还是 Vue，只要是支持 TS 的库，都提供了很多类型，来满足该库对类型的需求。

注意：

1. React 项目是通过@types/react、@types/react-dom 类型声明包，来提供类型的。

2. 这些包 CRA 已帮我们安装好（react-app-env.d.ts），直接用即可。

 

React 中的常用类型

React 是组件化开发模式，React 开发主要任务就是写组件，两种组件：1、函数组件 2、class组件

函数组件主要包括4个方面：

1. 组件的类型

2. 组件的属性，props

3. 组件属性的默认值，defaultProps

4. 事件绑定和事件对象

import { FC } from 'react'; //导入 FC 方法
type Props = { name: string; age?: number } //定义类型
 //创建组件
const Hello: FC<Props> = ({ name, age }) => ( <div>您好，我叫{ name }，我{ age }岁了</div> )
// 简化：完全利用 JS（TS) 自身的能力来编写组件
const hello = ({ name, age }: Props) => ( <div>您好，我叫{ name }，我{ age }岁了</div> )
​
//渲染组件
const App = () => ( 
  <div>
    <Hello name='jack' age={16} />
  </div>
)
​
// 组件属性的默认值
Hello.defaultProps = { age: 18 }
// 简化：
const hello = ({ name, age = 18 }: Props) => ( <div>您好，我叫{ name }，我{ age }岁了</div> )
​
//事件绑定和事件对象
<button onClick = {onClick}>点赞</button>
const onClick = () => {}
const onClicks = (e: React.MouseEvent<HTMLButtonElement>) => {}
<input onChange = {onChange}/>
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {}
// 技巧：在 JSX 中写事件处理程序（e => {}），然后，把鼠标放在 e 上，利用 TS 的类型推论来查看事件对象类型。
<input onChange={ e => {} }/>

class 组件，主要包含2个方面：

1. 组件的类型、属性、事件

2. 组件状态（state）

type State = { count: number }
type Props = { message?: string }
calss C1 extends React.Compoent {}                //无 Props、state
calss C1 extends React.Compoent<Props> {}         //有 Props、无 state
calss C1 extends React.Compoent<{}, State> {}     //无 Props、有 state
calss C1 extends React.Compoent<Props, state> {}  //有 props、state 
​
// class 组件的属性和属性默认值
type Props = { name: string; age?: number }
calss Hello extends React.Compoent<Props> {
    static defaultProps: Partial<Props> = { age: 18 }
    render() {
        const { name, age } = this.props
        return <div> 您好，我叫{name},我{age}岁了</div>    
    }
}
​
// class 组件状体（state）和事件
type State = { count: number }
class Counter extends React.Compoent<{}, State> {
    state: State = { count: 0 }
}
onIncrement = () => { this.setState({ count: this.state.count + 1 })}
<button onClick = {this.onIncrement}>+1</button>