React支持 TypeScript的项目目录结构说明

项目布局

我已经使用命令npx create-react-app react-ts-basic --template typescript创建了一个支持typescript的项目，名称为react-ts-basic，项目文件布局为：

package.json文件：

{
  "name": "react-ts-basic",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.105",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

相对于非TS项目，目录结构的主要变化

相对于非TS项目，目录结构只要有以下三个变化：
1）项目根目录中增加了tsconfig.json配置文件：指定TS的编译选项。
2）React组件的文件扩展名变为.tsx。
3）src目录中增加了react-app-env.d.ts：React项目默认的类型声明文件。

react-app-env.d.ts文件

三斜线指令：指定依赖的其它类型声明文件，types表示依赖的类型声明文件包的名称。告诉TS帮我加载react-scripts这个包提供的类型声明。

/// <reference types="react-scripts" />

react-scripts的类型声明文件包含了两部分类型：
1）react、react-dom、node的类型。
2）图片、样式等模块的类型，以允许在代码中导入图片、SVG等文件。

下面来查看下：
按住Ctrl键，然后鼠标左击react-scripts，就跳转到了react-app.d.ts文件：

而react-app.d.ts这个文件在哪儿呢？就在react-scripts这个包中，react-scripts就是这个包的名字：

因为react-scripts的类型声明文件包含了图片、样式等模块的类型，以允许在代码中导入图片、SVG等文件，所以就可以象导入其它资源一样来导入图片、svg文件。
例如，在文件src\App.tsx中导入图片：

TS会自动加载react-app-env.d.ts文件，以提供类型声明。
那么为什么TS会自动加载这个文件呢？
这是在tsconfig.json文件中的include中配置的：

src指的就是src这个目录。它的意思就是说在src这个目录中提供的ts文件、tsx文件、以及类型声明文件，都会被TS处理的。
对于类型声明文件而言，TS会自动加载类型声明文件。
其实，不仅仅限于这个类型声明文件。假设我们在src目录下自己创建了一个类型声明文件common.d.ts，里边定义了一个类型声明：

我们在其它文件中就可以直接使用该类型。例如，我们在App.tsx文件中，就可以联想到该类型了：

这样就验证了我们的想法：在src目录下的.d.ts文件，是会被TS自动加载的，因此在其它文件中，就可以直接使用了。