TS config 详解

827 阅读2分钟

ts.config进行详细介绍 要使用tsconfig.json文件 npm运行直接tsc就好 不然会忽视这个文件

outDir

输出到指定目录 文件夹📂不存在 -> 会创建

target

options:[ ES3|"ES5"|"ES6"|"ES2015"|ES2016"|"ES2017"|"ESNext"]

默认值:ES3
指定编译的ECMAScript目标版本
*这个需要与lib选项配合*

lib

options详情

编译过程中需要引入的库文件的列表 不然编译通不过
*代码中使用ES新特性 编译的代码宿主环境的polyfill 需要自己引入 babel-core*

module

options:["None"|"CommonJS"|"AMD"|"System"|"UMD"|"ES6"|"ES2015"]

None: 没有模块 代码不能出现import modele.exports等等
其余生成对应的模块代码
默认值:target === "ES6" ? "ES6" : "commonjs"
*注意:这个决定模块怎么解析*

baseUrl

模块解析

module:commonjs -> baseUrl 模块解析 nodejs相似
step1: baseUrl的路径去搜索 -> 运用 baseUrl/[*.js|*.jsx|*(目录)]
step2: tsconfig.json文件路径下 -> 运用 nodejs require

module:非commonjs -> baseUrl 模块解析 Classic
step1: 文件搜索 tsconfig所在目录一层层向上搜索
step1: 目录搜索 逐级 -> node_modules -> (找到)node_modules/@types

traceResolution

生成模块解析日志信息,帮助理解baseUrl等相关配置 非常有用

sourceMap

生成sourceMap

allowJs

是否编译js

jsx

.tsx文件里支持JSX

jsxFactory

render () { <div /> } => ${jsxFactory}(div, null, [])
这个可以写自己的编译函数 omi taro里面全是这个原理

esModuleInterop

用来兼容模块commonjsES module混用导入导出问题,比如你的module: commonjs

// a.ts es module
export default (log) => console.log(log)
// b.ts commonjs
const consoleLog = require('./a.js')
consoleLog(10) // 报错 不存在这个函数
// ****** -----> 修正 <----- ********
consoleLog.default(10)

那为了解决上面的问题, ts提供了新的方法解决commonjses module混用的情况

// a.ts
export = (log) => console.log(log)
// b.ts commonjs
improt consoleLog = require('./a.js')
consoleLog(10) // 这样就不会报错了

当你esModuleInterop: true的时候,完全可以写成:

// b.ts
import consoleLog from './a.js'
consoleLog(10)

allowUmdGlobalAccess

用于.ts文件中全局使用UMD库的全局变量

TODO 后续更新。。。