TypeScript配置-- 2. 了解ts配置项,根据vite项目了解typescript配置文件,tsconfig.json、tsconfig.node.json、
作者:mmseoamin日期:2023-12-18

配置项目的TS

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

1. 制造红色波浪线

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

TypeScript配置-- 2. 了解ts配置项,根据vite项目了解typescript配置文件,tsconfig.json、tsconfig.node.json、,在这里插入图片描述,第1张

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

TypeScript配置-- 2. 了解ts配置项,根据vite项目了解typescript配置文件,tsconfig.json、tsconfig.node.json、,在这里插入图片描述,第2张

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

TypeScript配置-- 2. 了解ts配置项,根据vite项目了解typescript配置文件,tsconfig.json、tsconfig.node.json、,在这里插入图片描述,第3张


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的区别

    搭建项目,官网:此处

    TypeScript配置-- 2. 了解ts配置项,根据vite项目了解typescript配置文件,tsconfig.json、tsconfig.node.json、,在这里插入图片描述,第4张

    下面都是自动生成的代码加上注释来讲解,官网可能变动,脚手架也可能变动,所以可以先看文章,再自行操作实践

    :)

    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 `