创建基于 TS 的 React 项目与类型声明文件

目录

1. 创建基于 TS 的 React 项目

2. tsconfig 的介绍 

3. 类型声明文件介绍

4. TS 的两种文件类型

5. 类型声明文件-内置

6. 类型声明文件-第三方库 

7. 类型声明文件-自定义 

8. 类型声明文件的使用说明

9. 类型声明文件的总结

1. 创建基于 TS 的 React 项目

目标：能够使用 CRA 创建基于 TS 的项目

内容：

创建基于 TS 的 React 项目命令：npx create-react-app react-ts --template typescript

说明：在命令行中，添加 --template typescript 表示创建支持 TS 的项目

相比 JS 的 React 项目，目录的变化：

1. 在项目根目录中多了一个文件：tsconfig.json（TS 的配置文件）
2. 在 src 目录中，文件的后缀有变化，由原来的 .js 变为 .ts 或 .tsx
   • .ts ts 文件的后缀名
   • .tsx 是在 TS 中使用 React 组件时的后缀。只要代码中出现 JSX 结构，就得使用该后缀
3. 在 src 目录中，多了 react-app-env.d.ts 文件
   • .d.ts 类型声明文件，用来指定类型
   • 注意：不要动 src/react-app-env.d.ts 文件！！！

// TS 中的 三斜线指令，作用类似于 import 用于指定对其他类型声明文件的依赖关系

// 此处，通过 types 来声明依赖于 react-scripts 包
// https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-
/// <reference types="react-scripts" /> 

2. tsconfig 的介绍 

目标：能够知道 tsconfig 的作用

内容：

• tsconfig.json 是 TS 项目的配置文件，可以用来指定如何编译 TS 代码等
• 手动创建 tsconfig.json 配置文件的命令：tsc --init

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

{
  // 编译选项
  "compilerOptions": {
    // 生成代码的语言版本：将我们写的 TS 代码编译成哪个版本的 JS 代码
    "target": "es5",
    // 指定要包含在编译中的 library
    // https://github.com/microsoft/TypeScript/blob/90e83adb44/lib/lib.dom.iterable.d.ts
    "lib": ["dom", "dom.iterable", "esnext"],
    // 允许 ts 编译器编译 js 文件
    "allowJs": true,
    // 跳过类型声明文件的类型检查
    "skipLibCheck": true,
    // es 模块 互操作，屏蔽 ESModule 和 CommonJS 之间的差异
    "esModuleInterop": true,
    // 允许通过 import x from 'y' 即使模块没有显式指定 default 导