TypeScript配置-- 2. 了解ts配置项，根据vite项目了解typescript配置文件，tsconfig.json、tsconfig.node.json、
配置项目的TS
仅对于Ts项目来说，产生红色波浪线，主要是由于语法错误，当然也有其他情况…
1. 制造红色波浪线
这边先引入一个greeter.ts文件
发现居然没有跟一些项目一样，有红色的波浪线，不是说了函数里面的参数是需要显示追加类型的吗。
tsconfig.json 不知道有什么配置项？鼠标悬浮试试~~
2. tsconfig.json 主配置项
具体可以看官方文档：此处
在 tsconfig.json 中，第一层的配置项包括以下几个：
- “compilerOptions”：这是一个对象，用于配置 TypeScript 编译器的选项。它可以设置诸如目标版本、模块系统、输出目录、严格类型检查等编译器相关的选项。
- “files”：这是一个数组，用于指定要编译的文件列表。如果指定了这个选项，编译器将只编译列出的文件，而不会自动包含其他文件。
- “include”：这是一个数组，用于指定要包含在编译中的文件或文件夹的匹配模式。可以使用通配符来指定多个文件或文件夹。
- “exclude”：这是一个数组，用于指定要排除在编译之外的文件或文件夹的匹配模式。也可以使用通配符来排除多个文件或文件夹。
- “references”：这是一个数组，用于指定项目之间的引用关系。可以通过引用其他项目来实现项目之间的依赖管理。
- “extends”： 属性用于继承其他配置文件的设置。通过指定一个继承的配置文件路径，可以继承该配置文件中的编译选项，并且可以在当前的 tsconfig.json 文件中进行进一步的自定义。 继承包括compilerOptions，files，include，exclude。
这些配置项可以根据项目的具体需求进行设置，以实现更精细化的控制和配置。
- compilerOptions：主要的配置项
- files，include，exclude：这三个参数主要是指定需要编译的文件
- references：用于引入其他的配置文件，例如下面将会讲解vite脚手架的项目
3. vite项目 extend\references
接下来通过vite项目来了解一下extend\references的区别
搭建项目，官网：此处
下面都是自动生成的代码加上注释来讲解，官网可能变动，脚手架也可能变动，所以可以先看文章，再自行操作实践
：）
3.1 tsconfig.json
根目录下的tsconfig.json是根文件，他没有什么配置，只引入了另外3个项目。
//tsconfig.json 根文件
// 可见是个空项目，用于引入其他项目
{
"files": [],
// 引入其他项目
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.vitest.json"
}
]
}
3.2 tsconfig.node.json
从tsconfig.node.json 的 include 可以看出，这个主要是限制配置文件的配置文件，比如vite.config.ts 的配置。
// tsconfig.node.json
{
// 继承了npm包，ts默认的配置，ctrl+鼠标左键，可以跳过去
"extends": "@tsconfig/node18/tsconfig.json",
// 需要编译的文件
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"nightwatch.conf.*",
"playwright.config.*"
],
// 编译配置项
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Bundler",
"types": ["node"]
}
}
通过ctrl+鼠标左键，可以跳过去 @tsconfig/node18/tsconfig.json 文件，主要继承了compilerOptions配置项。
// @tsconfig/node18/tsconfig.json 文件
{
"$schema": "https://json.schemastore.org/tsconfig",
"display": "Node 18",
"_version": "18.2.0",
"compilerOptions": {
"lib": ["es2023"],
"module": "node16",
"target": "es2022",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node16"
}
}
3.3 tsconfig.app.json
通过include，exclude 可知，该文件主要为了配置我们的源码，包括 .vue 文件，所以extends 继承了 @vue/tsconfig/tsconfig.dom.json
{
// 继承了
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"composite": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
通过ctrl+鼠标左键，可以跳过去 @vue/tsconfig/tsconfig.dom.json 文件，主要继承了compilerOptions配置项。
// @vue/tsconfig/tsconfig.dom.json 文件
{
"extends": "./tsconfig.json",
"compilerOptions": {
"lib": [
// Target ES2020 to align with Vite.
// 再跳 @vue/tsconfig//tsconfig.json~~~这里的配置项就很充足了。
{
"compilerOptions": {
// As long as you are using a build tool, we recommend you to author and ship in ES modules.
// Even if you are targeting Node.js, because
// - `CommonJS` is too outdated
// - the ecosystem hasn't fully caught up with `Node16`/`NodeNext`
// This recommendation includes environments like Vitest, Vite Config File, Vite SSR, etc.
"module": "ESNext",
// We expect users to use bundlers.
// So here we enable some resolution features that are only available in bundlers.
"moduleResolution": "bundler",
"resolveJsonModule": true,
// `allowImportingTsExtensions` can only be used when `noEmit` or `emitDeclarationOnly` is set.
// But `noEmit` may cause problems with solution-style tsconfigs:
//