tsconfig.json入门指南

前言

以前开发都是在用脚手架,几乎0配置,只须要会ts的语法就彻底能够开发ts项目了，此次本身从零折腾了一个ts项目，发现配置方面仍是有挺多坑的，因此不如从头看一下具体的方法和文档，因而总结出了这篇文章。相信我，本身系统的了解一遍和使用脚手架直接配置相比，理解上确定会有不同的认知。
本文主要从简单的方式了解tsconfig.json是干什么的、怎么用、和webpack结合起来会有一些常见的坑以及一些经常使用的配置，结合文档来看效果更佳 www.typescriptlang.org/v2/en/tscon…
因为第一次写文章，确定会有些不严谨或者很差的地方，请你们多多指出建议，谢谢~

what

用于编译时遵循的规则表

why

在没有tsconfig的状况下，咱们能够用命令行的方式去执行

tsc --outFile file.js --target es3 --module commonjs index.ts

解释上半句：将index.ts用es3的代码和commonjs的形式，编译为file.js在根目录下

1. 须要编译的调调框框不少的情形下(后面将要写一坨)
2. 团队协做的情形下(你们须要有统一的规范)

how

纯手工命令式

上文有阐述，得本身打一坨

配置文件命令式

• 不显式指定 tsconfig.json ，此时，编译器会从当前路径开始寻，直到找到tsconfig.json文件为止和require,import不写具体路径的查找规则差很少
• 经过 --project （或缩写 -p ）指定一个包含 tsconfig.json 的路径，和import,require写个相对路径差很少

配置文件里的具体参数

配置文件里有不少参数，具体场景有的确实还比较抽象，这里统一举例说明

这个tsconfig.json大致能够分为两个部分描述，第一部分是编译的规则配置(compilerOptions)，第二个部分是对哪些文件进行编译(files,include,exclude)

最经常使用的结构代码举例以下:

{
    "compilerOptions": {},
    "files": [], 
    "include": [],
    "exclude": [] 
}
复制代码

compilerOptions

顾名思义就是编译规则,下面会具体说一些经常使用的详细配置

files

用法很简单，就是个数组，里面的元素为待编译的ts文件，以下图。

files就是根据上面编译规则须要将哪些文件编译,举个例子

上面的配置文件的规则就是将compilerOption的编译规则应用于index.ts下，那若是我下面这样写就确定会报错了

因此得出结论：file适用于比较小型的项目，规定几个特定的文件。

最后一个小细节，file里面只是入口文件，好比test里面依赖一个rely.ts那么在files中不写rely.ts也不会报错。在当前目录下运行一下tsc作比较就知道了~

那文件不少的项目怎么办，下面的include和exclude就派上用场了

include && exclude

当文件有不少的时候，就能够用include和exclude(固然也能够不用)结合使用，好比如今只想让src下的除了带except文件编译，如图所示：

在该项目根目录输入tsc会发生什么呢？

会发现并无编译except.ts的文件

注意

当用webpack进行打包并暴露出bundle文件的时候会和tsconfig产生冲突，由于他俩都是编译/打包出来的文件，所以要在tsconfig.json中添加exclude到webpack打包出的指定路径，理解如图：

把注释中的引开就解决这个问题了~

PS

• include能够和file联用
• exclude只对include有效，对files无效
• 若是 files 和 include 都未设置，那么除了 exclude 排除的文件，编译器会默认包含路径下的全部 TS 文件

几个经常使用的编译配置

allowJs

容许编译js文件

sourceMap

生成一个.map.js的文件，用于其余工具来debugg，相似于webpack的sourceMap

noImplicitAny

不容许用any，若是初学ts，建议项目部太复杂的状况下，能够借此来进行限制，前置本身培养对ts的理解

module && target

这两个有必定的关联关系

target是编译成哪一个版本的js(es3,es5,es6...)

module模板生成的形式，默认状况下，当target是es3的时候，那module默认为commonjs形式，不然为es6形式。

注意(和outFile搭配使用)：生成的模块形式：none、commonjs、amd、system、umd、es六、es2015 或 esnext 只有 amd 和 system 能和 outFile 一块儿使用 target 为 es5 或更低时可用 es6 和 es2015

lib

引入ES的功能库，好比想在项目中用js中Set，Map等新的数据结构，或promise等，那要在lib中引入es2015

removeComments

编译出的文件是否带注释，当为false的时候能够减小编译出文件的体积

allowSyntheticDefaultImports

这个配置挺重要的，若是不知道会很纳闷，很差排查为啥会报错

当它为false的时候,引入模块的时候必须以*as的形式，例如引入react

import * as React from 'react'

当为true的时候

import React from 'react'

jsx

若是用tsx文件(React-ts)那么该项要配置成 jsx:"react"

baseUrl

举个例子:

在根目录的src目录有个hello文件夹，其中hello里包含world.ts

在根目录的app.ts下

import { example } from "./src/hello/world"

当baseUrl: './src'

则上面的目录能够简写成import { example } from "hello/world"

paths

paths必须和上面的baseUrl联用，举个例子：

那么将能够这样引入：

可是有一点必需要特别注意：

若是用了webpack使用了alias,那么致使baseUrl不会生效，从而paths也不会生效，因此paths岂不是没用了吗？其实从实际做用来讲确实是没用了，不过能够将paths的配置和alias配置成同样的，在vscode中会有路径的自动提示，也是很方便很爽的