配置项目的TS

仅对于Ts项目来说，产生红色波浪线，主要是由于语法错误，当然也有其他情况…

1. 制造红色波浪线

这边先引入一个greeter.ts文件

发现居然没有跟一些项目一样，有红色的波浪线，不是说了函数里面的参数是需要显示追加类型的吗。

tsconfig.json 不知道有什么配置项？鼠标悬浮试试~~

2. tsconfig.json 主配置项

具体可以看官方文档：此处

在 tsconfig.json 中，第一层的配置项包括以下几个：

1. “compilerOptions”：这是一个对象，用于配置 TypeScript 编译器的选项。它可以设置诸如目标版本、模块系统、输出目录、严格类型检查等编译器相关的选项。
2. “files”：这是一个数组，用于指定要编译的文件列表。如果指定了这个选项，编译器将只编译列出的文件，而不会自动包含其他文件。
3. “include”：这是一个数组，用于指定要包含在编译中的文件或文件夹的匹配模式。可以使用通配符来指定多个文件或文件夹。
4. “exclude”：这是一个数组，用于指定要排除在编译之外的文件或文件夹的匹配模式。也可以使用通配符来排除多个文件或文件夹。
5. “references”：这是一个数组，用于指定项目之间的引用关系。可以通过引用其他项目来实现项目之间的依赖管理。
6. “extends”： 属性用于继承其他配置文件的设置。通过指定一个继承的配置文件路径，可以继承该配置文件中的编译选项，并且可以在当前的 tsconfig.json 文件中进行进一步的自定义。 继承包括compilerOptions，files，include，exclude。

这些配置项可以根据项目的具体需求进行设置，以实现更精细化的控制和配置。

• extends：可以引用第三方的配置文件~
• compilerOptions：主要的配置项
• files，include，exclude：这三个参数主要是指定需要编译的文件 files跟include有点像，但是files只能指定文件，不能用正则，一般用不上~
• 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.
        // 
        // Support for newer versions of language built-ins are
        // left for the users to include, because that would require:
        //   - either the project doesn't need to support older versions of browsers;
        //   - or the project has properly included the necessary polyfills.
        "ES2020",
        "DOM",
        "DOM.Iterable"
        // No `ScriptHost` because Vue 3 dropped support for IE
      ],
      // Set to empty to avoid accidental inclusion of unwanted types
      "types": []
    }
  }
  

  再跳 @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:
      // 
      // And `emitDeclarationOnly` is not always wanted.
      // Considering it's not likely to be commonly used in Vue codebases, we don't enable it here.
      // Required in Vue projects
      "jsx": "preserve",
      "jsxImportSource": "vue",
      // `"noImplicitThis": true` is part of `strict`
      // Added again here in case some users decide to disable `strict`.
      // This enables stricter inference for data properties on `this`.
      "noImplicitThis": true,
      "strict": true,
      // 
      // Any imports or exports without a type modifier are left around. This is important for `