TypeScript 基础笔记 —— tsconfig.json配置文件(TS -- 15)

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: tsconfig.json配置文件(TS -- 15)

生成 tsconfig.json 文件

这个文件是通过 tsc --init 命令生成的

tsconfig.json 是 TypeScript 项目的配置文件。如果一个目录下存在一个 tsconfig.json 文件,那么往往意味着这个目录就是 TypeScript 项目的根目录。

tsconfig.json 包含 TypeScript 编译的相关配置,通过更改编译配置项,我们可以让 TypeScript 编译出 ES6、ES5、node 的代码。

配置详解

"compilerOptions": {

 "incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件,第二次编译会在第一次的基础上进行增量编译,可以提高编译的速度

 "tsBuildInfoFile": "./buildFile", // 增量编译文件的存储位置

 "diagnostics": true, // 打印诊断信息

 "target": "ES5", // 目标语言的版本

 "module": "CommonJS", // 生成代码的模板标准

 "outFile": "./app.js", // 将多个相互依赖的文件生成一个文件,可以用在AMD模块中,即开启时应设置"module": "AMD",

 "lib": ["DOM", "ES2015", "ScriptHost", "ES2019.Array"], // TS需要引用的库,即声明文件,es5 默认引用dom、es5、scripthost,如需要使用es的高级版本特性,通常都需要配置,如es8的数组新特性需要引入"ES2019.Array",

 "allowJS": true, // 允许编译器编译JS,JSX文件

 "checkJs": true, // 允许在JS文件中报错,通常与allowJS一起使用

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

 "rootDir": "./", // 指定输出文件目录(用于输出),用于控制输出目录结构

 "declaration": true, // 生成声明文件,开启后会自动生成声明文件

 "declarationDir": "./file", // 指定生成声明文件存放目录

 "emitDeclarationOnly": true, // 只生成声明文件,而不会生成js文件

 "sourceMap": true, // 生成目标文件的sourceMap文件

 "inlineSourceMap": true, // 生成目标文件的inline SourceMap,inline SourceMap会包含在生成的js文件中

 "declarationMap": true, // 为声明文件生成sourceMap

 "typeRoots": [], // 声明文件目录,默认时node_modules/@types

 "types": [], // 加载的声明文件包

 "removeComments":true, // 删除注释

 "noEmit": true, // 不输出文件,即编译后不会生成任何js文件

 "noEmitOnError": true, // 发送错误时不输出任何文件

 "noEmitHelpers": true, // 不生成helper函数,减小体积,需要额外安装,常配合importHelpers一起使用

 "importHelpers": true, // 通过tslib引入helper函数,文件必须是模块

 "downlevelIteration": true, // 降级遍历器实现,如果目标源是es3/5,那么遍历器会有降级的实现

 "strict": true, // 开启所有严格的类型检查

 "alwaysStrict": true, // 在代码中注入'use strict'

 "noImplicitAny": true, // 不允许隐式的any类型

 "strictNullChecks": true, // 不允许把null、undefined赋值给其他类型的变量

 "strictFunctionTypes": true, // 不允许函数参数双向协变

 "strictPropertyInitialization": true, // 类的实例属性必须初始化

 "strictBindCallApply": true, // 严格的bind/call/apply检查

 "noImplicitThis": true, // 不允许this有隐式的any类型

 "noUnusedLocals": true, // 检查只声明、未使用的局部变量(只提示不报错)

 "noUnusedParameters": true, // 检查未使用的函数参数(只提示不报错)

 "noFallthroughCasesInSwitch": true, // 防止switch语句贯穿(即如果没有break语句后面不会执行)

 "noImplicitReturns": true, //每个分支都会有返回值

 "esModuleInterop": true, // 允许export=导出,由import from 导入

 "allowUmdGlobalAccess": true, // 允许在模块中全局变量的方式访问umd模块

 "moduleResolution": "node", // 模块解析策略,ts默认用node的解析策略,即相对的方式导入

 "baseUrl": "./", // 解析非相对模块的基地址,默认是当前目录

 "paths": { // 路径映射,相对于baseUrl

   // 如使用jq时不想使用默认版本,而需要手动指定版本,可进行如下配置

   "jquery": ["node_modules/jquery/dist/jquery.min.js"]

 },

 "rootDirs": ["src","out"], // 将多个目录放在一个虚拟目录下,用于运行时,即编译后引入文件的位置可能发生变化,这也设置可以虚拟src和out在同一个目录下,不用再去改变路径也不会报错

 "listEmittedFiles": true, // 打印输出文件

 "listFiles": true// 打印编译的文件(包括引用的声明文件)

}

 

// 指定一个匹配列表(属于自动指定该路径下的所有ts相关文件)

"include": [

  "src/**/*"

],

// 指定一个排除列表(include的反向操作)

"exclude": [

  "demo.ts"

],

// 指定哪些文件使用该配置(属于手动一个个指定文件)

"files": [

  "demo.ts"

]

上面的配置详解有点繁杂,我们或许可以将其分类一下

配置分类(compilerOptions 选项)

{

 "compilerOptions": {

 

   /* 基本选项 */

   "target": "es5",                       // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES6'/'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'

   "module": "commonjs",                  // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'

   "lib": [],                             // 指定要包含在编译中的库文件

   "allowJs": true,                       // 允许编译 javascript 文件

   "checkJs": true,                       // 报告 javascript 文件中的错误

   "jsx": "preserve",                     // 指定 jsx 代码的生成: 'preserve', 'react-native', or 'react'

   "declaration": true,                   // 生成相应的 '.d.ts' 文件

   "sourceMap": true,                     // 生成相应的 '.map' 文件

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

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

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

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

   "noEmit": true,                        // 不生成输出文件

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

   "isolatedModules": true,               // 将每个文件做为单独的模块 (与 'ts.transpileModule' 类似).

   /* 严格的类型检查选项 */

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

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

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

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

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

   /* 额外的检查 */

   "noUnusedLocals": true,                // 有未使用的变量时,抛出错误

   "noUnusedParameters": true,            // 有未使用的参数时,抛出错误

   "noImplicitReturns": true,             // 并不是所有函数里的代码都有返回值时,抛出错误

   "noFallthroughCasesInSwitch": true,    // 报告 switch 语句的 fallthrough 错误。(即,不允许 switch 的 case 语句贯穿)

   /* 模块解析选项 */

   "moduleResolution": "node",            // 选择模块解析策略: 'node' (Node.js) or 'classic' (TypeScript pre-1.6)

   "baseUrl": "./",                       // 用于解析非相对模块名称的基目录

   "paths": {},                           // 模块名到基于 baseUrl 的路径映射的列表

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

   "typeRoots": [],                       // 包含类型声明的文件列表

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

   "allowSyntheticDefaultImports": true,  // 允许从没有设置默认导出的模块中默认导入。

   /* Source Map Options */

   "sourceRoot": "./",                    // 指定调试器应该找到 TypeScript 文件而不是源文件的位置

   "mapRoot": "./",                       // 指定调试器应该找到映射文件而不是生成文件的位置

   "inlineSourceMap": true,               // 生成单个 soucemaps 文件,而不是将 sourcemaps 生成不同的文件

   "inlineSources": true,                 // 将代码与 sourcemaps 生成到一个文件中,要求同时设置了 --inlineSourceMap 或 --sourceMap 属性

   /* 其他选项 */

   "experimentalDecorators": true,        // 启用装饰器

   "emitDecoratorMetadata": true          // 为装饰器提供元数据的支持

 }

}

常用的配置

  • 终端命令
  • echo ''>index.ts(创建一个空的名叫index.ts的文件)
  • tsc -init(创建一个tsconfig.json)
  • del index.js(删除名叫index.js文件)
  • mkdir dist(创建一个名叫dist的文件夹)
  • tsc(运行)

1.include

指定编译文件默认是编译当前目录下所有的 ts 文件

  • 这个是在中括号中填入路径,路径指向的那个ts文件会被编译出一个js文件出来。这个我们就可以用来编译指定文件

2.exclude

指定排除的文件

  • include反过来了,除了写入的路径之外,其他全部编译

3.target

指定编译 js 的版本例如 es5 es6

  • 有些低配置的浏览器是不兼容es6的,这个时候我们就可以将其编译成es5使其适配

4.allowJS

是否允许编译 js 文件

  • 是否允许TypeScript帮你编译js文件,默认是不允许的

5.removeComments

是否在编译过程中删除文件中的注释

6.rootDir

编译文件的目录

7.outDir

输出的目录

  • 改变输出的目录,也就是编译后输出到这里设置的文件夹目录中

8.sourceMap

代码源文件

  • 这个文件会打包压缩成一行,sourceMap会记录行数,到时候会比较好找

9.strict

严格模式

严格模式的限制

  • 严格模式主要有以下限制:
  • 变量必须声明后再使用
  • 函数的参数不能有同名属性,否则报错
  • 不能使用 with 语句
  • 不能对只读属性赋值,否则报错
  • 不能使用前缀 0 表示八进制数,否则报错
  • 不能删除不可删除的属性,否则报错
  • 不能删除变量 delete prop,会报错,只能删除属性 delete global [prop]
  • eval 不会在它的外层作用域引入变量
  • eval 和 arguments 不能被重新赋值
  • arguments 不会自动反映函数参数的变化
  • 不能使用 arguments.callee
  • 不能使用 arguments.caller
  • 禁止 this 指向全局对象
  • 不能使用 fn.caller 和 fn.arguments 获取函数调用的堆栈
  • 增加了保留字(比如 protected、static 和 interface)
  • 要注意 this 的限制。ES6 模块之中,顶层的 this 指向 undefined,即不应该在顶层代码使用 this。

10.module

默认 common.js 可选 es6 模式 amd umd 等

目录
相关文章
|
3月前
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
206 2
|
4月前
|
JavaScript 前端开发 编译器
10min代码快速熟悉Tsconfig.json配置文件
【8月更文挑战第16天】10min代码快速熟悉Tsconfig.json配置文件
125 2
|
2月前
|
JSON API 数据格式
低代码实现鸿蒙API返回JSON转TS及快速生成ArkUI代码
低代码实现鸿蒙API返回JSON转TS及快速生成ArkUI代码
56 0
低代码实现鸿蒙API返回JSON转TS及快速生成ArkUI代码
|
3月前
|
JavaScript 前端开发
typeScript基础(8)_ts类型断言
本文介绍了TypeScript中的类型断言,它用于在编译时告诉TypeScript某个对象具有特定的类型,即使它看起来不具备。类型断言可以用来访问一个类型上存在而另一个类型上不存在的属性或方法。需要注意的是,类型断言并不会在运行时改变JavaScript的行为,因此如果断言不当,运行时仍然可能出错。文章还提醒避免将类型断言为`any`类型或进行多重断言。
41 1
|
2月前
|
存储 JavaScript 前端开发
TypeScript :使用mock提供数据&as const 的使用&tsconfig.json配置
本文介绍了如何在项目中使用 Mock 提供数据,包括安装依赖、配置 Vite 和 TypeScript,以及如何使用 `as const`、元组和 tsconfig.json 配置文件。通过这些配置,可以实现更灵活和高效的开发体验。
|
2月前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
59 0
|
2月前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
31 0
|
2月前
|
机器学习/深度学习 JSON JavaScript
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
LangChain-21 Text Splitters 内容切分器 支持多种格式 HTML JSON md Code(JS/Py/TS/etc) 进行切分并输出 方便将数据进行结构化后检索
38 0
|
4月前
|
存储 JavaScript 前端开发
深入浅出TypeScript | 青训营笔记
深入浅出TypeScript | 青训营笔记
37 0
|
6月前
|
JavaScript 前端开发 程序员
typescript入门笔记分享
typescript入门笔记分享
34 0
下一篇
DataWorks