在 React 中使用 TypeScript、使用CRA创建TS项目、React 中的常用类型

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

React 脚手架工具 create-react-app（简称：CRA）默认支持 TypeScript。
创建支持 TS 的项目命令：npx create-react-app 项目名称 --template typescript。

当看到以下提示时，表示支持 TS 的项目创建成功：

更多：
在已有的项目中使用TS ：https://create-react-app.dev/docs/adding-typescript/

TS结构说明

TS 配置文件 tsconfig.json

tsconfig 的解释说明

• 说明：所有的配置项都可以通过鼠标移入的方式，来查看配置项的解释说明。
• tsconfig 文档链接

{
  // 编译选项
  "compilerOptions": {
    // 生成代码的语言版本
    "target": "es5",
    // 指定要包含在编译中的 library
    "lib": ["dom", "dom.iterable", "esnext"],
    // 允许 ts 编译器编译 js 文件
    "allowJs": true,
    // 跳过声明文件的类型检查
    "skipLibCheck": true,
    // es 模块 互操作，屏蔽 ESModule 和 CommonJS 之间的差异
    "esModuleInterop": true,
    // 允许通过 import x from 'y' 即使模块没有显式指定 default 导出
    "allowSyntheticDefaultImports": true,
    // 开启严格模式
    "strict": true,
    // 对文件名称强制区分大小写
    "forceConsistentCasingInFileNames": true,
    // 为 switch 语句启用错误报告
    "noFallthroughCasesInSwitch": true,
    // 生成代码的模块化标准
    "module": "esnext",
    // 模块解析（查找）策略
    "moduleResolution": "node",
    // 允许导入扩展名为.json的模块
    "resolveJsonModule": true,
    // 是否将没有 import/export 的文件视为旧（全局而非模块化）脚本文件。
    "isolatedModules": true,
    // 编译时不生成任何文件（只进行类型检查）
    "noEmit": true,
    // 指定将 JSX 编译成什么形式
    "jsx": "react-jsx"
  },
  // 指定允许 ts 处理的目录
  "include": ["src"]
}

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

使用演示：指定target tsc hello.ts --target es6 生成es6版本的hello.js

注意：

1. tsc 后带有输入文件时（比如，tsc hello.ts），将忽略 tsconfig.json 文件。
2. tsc 后不带输入文件时（比如，tsc），才会启用 tsconfig.json。
   推荐使用：tsconfig.json 配置文件
   

2. React 中的常用类型

在不使用 TS 时，可以使用 prop-types 库，为 React 组件提供类型检查。
说明：TS 项目中，推荐使用 TypeScript 实现组件类型校验（代替 PropTypes）。
https://reactjs.org/docs/typechecking-with-proptypes.html
不管是 React 还是 Vue，只要是支持 TS 的库，都提供了很多类型，来满足该库对类型的需求。
注意：

1. React 项目是通过 @types/react、@types/react-dom 类型声明包，来提供类型的。
2. 这些包 CRA 已帮我们安装好（react-app-env.d.ts），直接用即可。

参考资料：

• React文档-静态类型检查 https://reactjs.org/docs/static-type-checking.html
• React+TS备忘单 https://github.com/typescript-cheatsheets/react。

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

1. 函数组件

函数组件的类型以及组件的属性

函数组件属性的默认值（defaultProps）

事件绑定和事件对象

2. class 组件

class 组件的类型

class 组件的属性和属性默认值

class 组件状态（state）和事件