项目中TS的配置文件tsconfig.json

1.快速搭建一个浏览器开发环境

1. 建立好文件夹后，打开 VSCode，把文件夹拉到编辑器当中，然后打开终端，运行npm init -y,创建package.json文件。
2. 生成文件后，我们接着在终端中运行tsc -init,生成tsconfig.json文件。
3. 新建src和build文件夹，再建一个index.html文件。
4. 在src目录下，新建一个page.ts文件，这就是我们要编写的ts文件了。
5. 配置tsconfig.json文件，设置outDir和rootDir(在 15 行左右)，也就是设置需要编译的文件目录，和编译好的文件目录。
6. 然后编写index.html，引入<script src="./build/page.js"></script>,当让我们现在还没有page.js文件。
7. 编写page.ts文件，加入一句输出console.log('你好'),再在控制台输入tsc,就会生成page.js文件
8. 再到浏览器中查看index.html文件，如果按F12可以看到‘你好’，说明我们的搭建正常了。

2.快速生成配置文件的方法

在你的项目文件夹下，打开终端，终端中运行tsc -init就可生成tsconfig.json文件

3.配置文件中个项的详细说明

{

  "compilerOptions": { // 描述TypeScrip编译器功能的“大”字段，其值类型是“对象”,因此包含了很多用于描述编译器功能的子字段，其子字段的功能如下：

    "target": "esnext", // 字段指明经过tsc编译后的ECMAScript代码语法版本，根据ECMAScript语法标准，默认值为ES3,我们也可以使用ES5/ES6，甚至最新的ESNext语法来编写TS

    "useDefineForClassFields": true,

    "module": "esnext", // 知名tsc编译后的代码应该符合这种“模块化方案”,可以指定的枚举值有：none, common.js,amd,system,umd,es2015,es2020或esnext,默认值为none

    "moduleResolution": "node",//声明如何处理模块，枚举值：classic、node会根据module字段来决定默认值（推荐手动设置为node）

    // 严格的类型检查选项

    "strict": true, // 启用所有严格类型检查选项

    "noImplicitAny": true, // 在表达式和声明上有隐含的any类型时报错

    "strictNullChecks": true, // 启用严格的null检查

    "noImplicitThis": true, // 当this表达式值为any类型的时候，生成一个错误

    "alwaysStrict": true, // 以严格模式检查每一个模块，并在每个文件里加入“use strict”

    "jsx": "preserve", // 有jsx语法需要支持的项目，可以设置值preserve、react等

    "sourceMap": true, // 生成想要的".map"文件

    "resolveJsonModule": true,

    "esModuleInterop": true, // 支持合成默认导入

    "lib": ["esnext", "dom"], // 用于为了在我们的代码中显示的指明需要支持的ECMAScript语法或环境对应的类型声明文件，例如我们的代码会使用到浏览器中的一些对象window、document这些全局对象api对于TypeScript Complier来说是不能识别的

    "types": ["element-plus/global"], // 需要包含的类型声明文件名列表

    "baseUrl": ".", // 设置基本目录以解析非绝对模块名称（定义一个根目录，以此进行绝对文件路径解析），必选，与paths成对出现，以tsconfig.json文件所在目录开始

    "paths": {

      "@/*": ["src/*"]

    },

    // "plugins": [],//扩展tsc编译器功能的字段

    "rootDirs": [], // 根文件列表，其组合内容表示项目运行时的结构内容

    "outDir": "/dist", // 指定输出目录

    "outFile": "./", // 指定输出文件合并为一个文件

    "rootDir": "./" ,// 用来控制输出目录结构 --outDir

    "removeComments": true, // 删除编译后的所有的注释

    "importHelpers": true, // 从tsLib导入辅助工具函数

    "isolatedModules": true, // 将每个文件作为单独的模块

  },

  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], // 用于指明需要被tsc编译的文件或文件夹列表

  "references": [{ "path": "./tsconfig.node.json" }],

  // "compileOnSave": false, // 是声明是否需要在保存时候自动触发tsc编译的字段，一般说来，我们的代码编译过程会通过Rollup、webpack等打包构建工具，并且使用热更新，因此无需配置该项，保存省略即可

  "files": [], // 用于指明需要tsc编译的一个或者多个ts文件

  "exclude": [],//用于排除不需要tsc编译的文件或文件列表

  // "extends": "@tsconfig/recommended", // 从另一个配置文件里面继承配置

}