配置

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

  1. {
  2.   "compilerOptions": {
  3.     "target": "esnext",
  4.     "module": "esnext",
  5.     "strict": true,
  6.     "jsx": "preserve",
  7.     "importHelpers": true,
  8.     "moduleResolution": "node",
  9.     "skipLibCheck": true,
  10.     "esModuleInterop": true,
  11.     "allowSyntheticDefaultImports": true,
  12.     "sourceMap": true,
  13.     "baseUrl": ".",
  14.     "types": ["webpack-env"],
  15.     "paths": {
  16.       "@/*": ["src/*"]
  17.     },
  18.     "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  19.   },
  20.   "include": [
  21.     "src/**/*.ts",
  22.     "src/**/*.tsx",
  23.     "src/**/*.vue",
  24.     "tests/**/*.ts",
  25.     "tests/**/*.tsx"
  26.   ],
  27.   "exclude": ["node_modules"]
  28. }

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

compilerOptions 编译选项

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

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

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

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

include 指定哪些要编译

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

  1. "include":[ 
  2.   "./src/**/*.ts",
  3.   "./src/**/*.tsx",
  4.   "./src/**/*.vue"
  5. ]

image.png

exclude 指定哪些不编译

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

  1. "exclude": ["node_modules"]

image.png