配置

tsconfig.json 是用于配置TypeScript编译时的配置选项：https://www.typescriptlang.org/tsconfig

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

=====================

compilerOptions 编译选项

就是告诉ts，编译成js时有哪些规则。

一般创建通过脚手架创建的项目，会有默认的配置，除非你从零开始自己配置，否则用默认的就可以了。

如果项目使用了babel进行编译，也会读取这个文件

{
  "compilerOptions":{
    // 指定编译的版本，默认会根据项目下.browserslistrc 文件（如果有的话），来看要编译成什么版本。
    // esnext 表示用最新的es版本
    // 兼容低版本浏览器，一般会填es5
    "target":"esnext", 
    // 目标代码需要使用的模块化方案
    // 如es 的 import/export，commonjs 的 request/module.exports，amd，umd（多种模块化）等
    "module":"esnext", 
    // 是否使用严格模式
    "strict":true, 
    // 对jsx做什么处理，比如要不要转化成其他
    // preserve 是不处理
    "jsx": "preserve",
    // 辅助导入功能
    "importHelpers": true,
    // 按nodejs的方式解析模块
    "moduleResolution": "node",
    // 跳过一些库的类型检测，对库里面的类型进行检测。库里面一些没用到的功能就没必要检测，而且库与库直接可能会有冲突，没必要都去检测
    "skipLibCheck": true,
    // 是否允许es 的 import/export，commonjs 的 request/module.exports，混合使用
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    // 是否生成映射文件，映射是ts变量名和编译后的js变量名进行映射，方便测试用
    "sourceMap": true,
    // 文件路径解析时，基本的url
    "baseUrl": ".",
    // 指定具体要解析的类型，如果不写这个，默认就是用上面t
    "types": ["webpack-env"],
    // 路径解析，下面写法是，如果你写@/xxx 这样的路径，默认帮你转为src/*。
    // 这是一个数组，可以写多个，第一个匹配不上就匹配第二个，如此类推。
    // 这个一定要配，否则vite.config.ts 里面配置的别名TS还是会报错的
    "paths": {
      "@/*": ["src/*"]
    },
        // 项目可以使用哪些库的类型，如dom库，才会有对应的写代码自动提示。
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
    "outDir":"./dist", // 编译后的js文件统一储存的文件夹
    "outFile":"./dist/app.js",  
    // 编译后的所有js代码，统一合并后放在1个js文件里面；但是模块化只能用amd或者system；
    // 一般用的少，都是打包工具帮我们进行打包
    "allowJS":false,// 是否对js文件进行编译，默认是false
    "checkJS":false,// 是否检查js代码是否符合TS语法规范，默认是false
    "removeComments":false, // 是否移除注释，默认是false
    "noEmit":false,  // 不生成编译后的文件，默认是false，生成
    "noEmitOnError":true, // 当有错误时不生成编译后的文件，默认是false，生成
    "alwaysStrict":false, // 编译后的js文件是否开启严格模式，默认false
    "noImplicitAny":true,  // 变量不默认是any，默认false，是any
    "noImplicitThis":true,  // 不允许类型不明确的this，默认false，是any
    "strictNullChecks":false, // 严格检查空值，检测有可能出现的空值
  }
}

include 指定哪些要编译

哪些文件是需要编译解析的

"include":[ 
  "./src/**/*.ts",
  "./src/**/*.tsx",
  "./src/**/*.vue"
]

exclude 指定哪些不编译

比如你通过import 引用 axios 这个库，默认是给你解析的，axios默认就在node_modules文件夹内，但没必要完全解析。
因此可以把node_modules排除不解析，只解析引用的部分

"exclude": ["node_modules"]