首页 前端知识 React支持 TypeScript的项目目录结构说明

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

2024-08-27 09:08:59 前端知识 前端哥 139 727 我要收藏

项目布局

我已经使用命令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自动加载的,因此在其它文件中,就可以直接使用了。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16988.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!