tsconfig.json配置说明

本文详细介绍了tsconfig.json的配置属性,包括files、exclude、include等,以及compilerOptions中的关键设置,如allowSyntheticDefaultImports、module、sourceMap等。文章强调了在Vue开发中allowSyntheticDefaultImports的重要性,并提到了如何配合webpack进行模块管理和逐步将JS转换为TS的策略。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

tsconfig.json 所包含的属性并不多,只有 7 个,ms 官方也给出了它的定义文件。但看起来并不怎么舒服,这里就翻译整理一下。(若有误,还请指出)

  • files数组类型,用于表示由 ts 管理的文件的具体文件路径
  • exclude数组类型,用于表示 ts 排除的文件(2.0 以上支持 Glob)
  • include数组类型,用于表示 ts 管理的文件(2.0 以上)
  • compileOnSave布尔类型,用于 IDE 保存时是否生成编译后的文件
  • extends字符串类型,用于继承 ts 配置,2.1 版本后支持
  • compilerOptions对象类型,设置编译的选项,不设置则使用默认配置,配置项比较多,后面再列
  • typeAcquisition对象类型,设置自动引入库类型定义文件(.d.ts)相关,该对象下面有 3 个子属性分别是:
    • enable布尔类型,是否开启自动引入库类型定义文件(.d.ts),默认为 false
    • include数组类型,允许自动引入的库名,如:["jquery", "lodash"]
    • exculde数组类型,排除的库名

如不设定 files  includets 默认是 exclude 以外的所有的以 .ts  .tsx 结尾的文件。如果,同时设置 files 的优先级最高,exclude 次之,include 最低。

上面都是文件相关的,编译相关的都是靠 compilerOptions 设置的,接着就来看一看。

属性名

值类型

默认值

描述

allowJs

boolean

false

编译时,允许有 js 文件

allowSyntheticDefaultImports

boolean

module === "system"

允许引入没有默认导出的模块

allowUnreachableCode

boolean

false

允许覆盖不到的代码

allowUnusedLabels

boolean

false

允许未使用的标签

alwaysStrict

boolean

false

严格模式,为每个文件添加 "use strict"

baseUrl

string

 

 path 一同定义模块查找的路径,详细参考这里

charset

string

"utf8"

输入文件的编码类型

checkJs

boolean

false

验证 js 文件,与 allowJs 一同使用

declaration

boolean

false

生成 .d.ts 定义文件

declarationDir

string

 

生成定义文件的存放文件夹(2.0 以上)

diagnostics

boolean

false

是否显示诊断信息

downlevelIteration

boolean

false

 target  ES5 ES3 时,提供对 for..of,解构等的支持

emitBOM

boolean

false

在输出文件头添加 utf-8 (BOM)字节标记

emitDecoratorMetadata

boolean

false

详见 issue

experimentalDecorators

boolean

false

允许注解语法

forceConsistentCasingInFileNames

boolean

false

不允许不同变量来代表同一文件

importHelpers

 

boolean

false

引入帮助(2.1 以上)

inlineSourceMap

boolean

false

source map 一同生成到输出文件中

 

inlineSources

boolean

false

ts 源码生成到 source map 中,需要同时设置 inlineSourceMap  sourceMap

 

isolatedModules

boolean

false

将每个文件作为单独的模块

 

jsx

string

"preserve"

jsx 编译方式

 

jsxFactory

string

"React.createElement"

定义 jsx 工厂方法,React.createElement 还是 h2.1 以上)

 

lib

string[]

 

引入库定义文件,可以是["es5", "es6", "es2015", "es7", "es2016", "es2017", "esnext", "dom", "dom.iterable", "webworker", "scripthost", "es2015.core", "es2015.collection", "es2015.generator", "es2015.iterable", "es2015.promise", "es2015.proxy", "es2015.reflect", "es2015.symbol", "es2015.symbol.wellknown", "es2016.array.include", "es2017.object", "es2017.sharedmemory", "esnext.asynciterable"]2.0 以上)

 

listEmittedFiles

boolean

false

显示输入文件名

 

listFiles

boolean

false

显示编译输出文件名

 

locale

string

随系统

错误信息的语言

 

mapRoot

string

 

定义 source map 的存放位置

 

maxNodeModuleJsDepth

number

0

检查引入 js 模块的深度,需同 allowJs 一同使用

 

module

string

 

指定模块生成方式,["commonjs", "amd", "umd", "system", "es6", "es2015", "esnext", "none"]

 

moduleResolution

string

 

指定模块解析方式,["classic" : "node"]

 

newLine

string

随系统

行位换行符,"crlf" (windows) "lf" (unix)

 

noEmit

boolean

false

不显示输出

 

noEmitHelpers

boolean

false

不在输出文件中生成帮助

 

noEmitOnError

boolean

false

出错后,不输出文件

 

noFallthroughCasesInSwitch

boolean

false

switch 语句中,每个 case 都要有 break

 

noImplicitAny

boolean

false

不允许隐式 any如果true,函数的形参必须带类型,如果叫不出class名的js对象,那就得any,比如(d:any)=>{}

如果false,函数的样子更像js  d=>{}

 

noImplicitReturns

boolean

false

函数所有路径都必须有显示 return

 

noImplicitThis

boolean

false

不允许 this 为隐式 any

 

noImplicitUseStrict

boolean

false

输出中不添加 "use strict"

 

noLib

boolean

false

不引入默认库文件

 

noResolve

boolean

false

不编译三斜杠或模块引入的文件

 

noUnusedLocals

boolean

false

未使用的本地变量将报错(2.0 以上)

 

noUnusedParameters

boolean

false

未使用的参数将报错(2.0 以上)

 

outDir

string

 

定义输出文件的文件夹

 

outFile

string

 

合并输出到一个文件

 

paths

object

 

 baseUrl 一同定义模块查找的路径,详细参考这里

 

preserveConstEnums

boolean

false

不去除枚举声明

 

pretty

boolean

false

美化错误信息

 

reactNamespace

string

"React"

废弃。改用jsxFactory

 

removeComments

boolean

false

去除注释

 

rootDir

string

当前目录

定义输入文件根目录

 

rootDirs

string []

 

定义输入文件根目录

 

skipDefaultLibCheck

boolean

false

废弃。改用 skipLibCheck

 

skipLibCheck

boolean

false

对库定义文件跳过类型检查(2.0 以上)

 

sourceMap

boolean

false

生成对应的 map 文件

 

sourceRoot

string

 

调试时源码位置

 

strict

boolean

false

同时开启 alwaysStrictnoImplicitAnynoImplicitThis  strictNullChecks (2.3 以上)

 

strictNullChecks

boolean

false

null 检查(2.0 以上)

 

stripInternal

boolean

false

不输出 JSDoc 注解

 

suppressExcessPropertyErrors

boolean

false

不提示对象外属性错误

 

suppressImplicitAnyIndexErrors

boolean

false

不提示对象索引隐式 any 的错误

 

target

string

"es3"

输出代码 ES 版本,可以是 ["es3", "es5", "es2015", "es2016", "es2017", "esnext"]

 

traceResolution

boolean

false

跟踪模块查找信息

 

typeRoots

string []

 

定义文件的文件夹位置(2.0 以上)

 

types

string []

 

设置引入的定义文件(2.0 以上)

 

watch

boolean

false

监听文件变更

 

一般情况下,tsconfig.json 文件只需配置 compilerOptions 部分。

{

  "compilerOptions": {

    "allowSyntheticDefaultImports": true, // 允许引入没有默认导出的模块

    "module": "es2015",

    "removeComments": true,

    "preserveConstEnums": true,

    "sourceMap": true,

    "strict": true,

    "target": "es5",

    "lib": [

      "dom",

      "es5",

      "es2015"

    ]

  }

}

 

其中,allowSyntheticDefaultImports 是使用 vue 必须的,而设置 module 则是让模块交由 webpack 处理,从而可以使用 webpack2 的摇树。另外,加上allowJs,这样就可以一点点将现有的 js 代码转换为 ts 代码了。

如果,你在 webpack 中设置过 resolve -> alias,那么,在 ts config 中也需要通过 baseUrl + path 的方式来定义模块查找的方式。

<a name="tslint"></a>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值