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