如何在 React 项目中使用 TS，包括以下内容：
-
使用 CRA 创建支持 TS 的项目
-
TS 配置文件 tsconfig.json
-
React 中的常用类型
使用 CRA 创建支持 TS 的项目
React 脚手架工具 create-react-app (简称 CRA）默认支持 TypeScript。
创建支持 TS 的项目命令：npx create-react-app 项目名称 --template typescript。
相对于非 TS 项目，目录结构主要由以下三个变化：
-
项目根目录中增加了
tsconfig.json配置文件：指定 TS 的编译选项（比如，编译时是否移除注释） -
React 组件的文件扩展名变为
*.tsx -
src 目录中增加了
react-app-env.d.ts：React 项目默认的类型声明文件 -
三斜线指令：指定依赖的其他类型声明文件，types 表示依赖的类型声明文件包的名称。///
-
解释：告诉 TS 帮我加载
react-script这个包。 -
react-script的类型声明文件包含了两部分类型： -
react、react-dom、node的类型
-
图片、样式等模块的类型，以允许在代码中导入图片、SVG等文件
-
TS 会自动加载
.d.ts文件，以提供类型声明（通过修改 tsconfig.json 中的 include 配置来验证）
TS 配置文件 tsconfig.json
tsconfig.json 指定：项目文件和项目编译所需的配置项。
注意：TS 的配置项非常多（100+），以 CRA 项目中的配置为例来学习，其他配置项用时查文档即可。
-
tsconfig.json 文件所在目录为项目根目录（与 package.json 同级）
-
tsconfig.json 可以自动生成，命令：
tsc --init
除了在 tsconfig.json 文件中使用编译配置外，还可以通过命令行来使用。
使用演示：tsc hello.ts --target es6
注意：
-
tsc 后带有输入文件时（比如：tsc hello.ts)，将忽略 tsconfig.json 文件
-
tsc 后不带输入文件时（比如：tsc），才会启动 tsconfig.json
推荐使用：tsconfig.json 配置文件
React 中的常用类型
前提说明：现在，基于 class 组件来讲解 React + TS 的使用（最新的 React Hooks）
在不使用 TS 时，可以使用 proptypes 库，为 React 组件提供类型检查。
说明：TS 项目中，推荐使用 TypeScript 实现组件类型校验（代替 Proptypes）。
不管是 React 还是 Vue，只要是支持 TS 的库，都提供了很多类型，来满足该库对类型的需求。
注意：
-
React 项目是通过
@types/react、@types/react-dom类型声明包，来提供类型的。 -
这些包 CRA 已帮我们安装好（react-app-env.d.ts），直接用即可。
React 中的常用类型
React 是组件化开发模式，React 开发主要任务就是写组件，两种组件：1、函数组件 2、class组件
函数组件主要包括4个方面：
-
组件的类型
-
组件的属性，props
-
组件属性的默认值，defaultProps
-
事件绑定和事件对象
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个方面：
-
组件的类型、属性、事件
-
组件状态（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>