TS04 tsconfig.json

概述

在进行少量编译时,可以直接在命令行使用tsc命令:

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

在根目录下新建tsconfig.json文件,用来指定编译这个项目的选项,在命令行使用tsc命令时,如果没有任何输入文件情况下调用,那么编译器会从当前目录开始查找tsconfig.json文件,并逐级向上搜索,直至根目录。

示例

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true
  },
  "files": [
    "app.ts",
    "foo.ts",
  ]
}

compilerOptions用来配置编译选项,files用来指定带编译的入口文件,任何被入口文件依赖的文件,都会被编译器自动纳入为编译对象。

也可以使用includeexclude来指定和排除带编译文件:

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

指定编译目录

可以使用files属性,它接受一个数组,数组元素可以是相对路径或者绝对路径

也可以使用includeexclude属性,它们都接受一个数组,支持通配符*(匹配任意字符)、?(匹配任意单个字符)、**/(递归匹配任何子路径)

对于编译器来说,TS文件默认指的是.ts.tsx.d.ts后缀的文件,如果开启了allowJs选项,那么.js.jsx文件也会被认为是TS文件。

如果filesinclude都未设置,那么除了exclude排除的文件,编译器会默认包含路径下所有TS文件。

如果同时设置filesinclude,那么二者指定的文件都会被编译

exclude的默认值是node_modulesbower_componentsjspm_packages和编译选项outDir指定的路径。

excludeinclude有效,但是对于files无效,如果文件在files中引入,那么exclude不生效。

编译选项

完整的选项列表

字段 类型 默认值 说明
allowJs boolean false 允许编译JS文件
checkJs boolean false 报告JS文件中存在的类型错误(需打开allowJS
declaration boolean false 生成对应的.d.ts声明文件
declarationDir string - 生成的.d.ts文件路径(默认与.ts相同)
experimentalDecorators boolean false 启用装饰器功能
jsx string Preserve .tsx中支持JSX,详细说明
lib string[] - 编译对应的ES版本(es5/es6/es7/dom等),根据target不同取值不同
module string commonjs/es6 生成模块格式,与target有关
moduleResolution string classic/node 模块解析方式,与module有关,详细说明
noImplicitAny boolean false 存在隐式any时报错
noImplicitReturns boolean false 函数无return时报错
noImplicitThis boolean false this可能为any时报错
outDir string - 编译输出目录,默认与.ts相同
sourceMap boolean false 生成.map文件
target string es3 编译的JS文件版本

类型相关

typeRootstypes,指定默认的类型声明文件的查找路径,默认为node_modules/@types,只对NPM安装的模块有效

{
  "compilerOptions": {
    "typeRoots": ["./typings"], // 引入`./typings`下所有TS类型声明模块
    "types": ["node", "lodash"], // 只引入两个声明模块,其他的不会被引入
  }
}

自动引入只对包含全局声明的模块有效,比如jQuery,不用再手动import就可以在任何文件使用$的类型,对于import 'foo',编译器会在node_modulesnode_modules/@types文件下查找foo模块和声明模块

所以,如果想让自定义声明的类型不需要手动引入就可以在任何地方引入,可以将其声明为global

declare global {
  const graphql: (query: TemplateStringsArray) => void;
  namespace Gatsby {
    interface ComponentProps {
      children: () => React.ReactNode,
      data: RootQueryType
    }
  }
}

这样就可以在任何地方直接使用graphqlGatsby对应的类型了

配置复用

可以使用extends来实现配置复用,即一个配置文件可以继承另外一个文件的配置属性:

{
  "extends": "./configs/base",
  "files": [
    "main.ts",
    "supplemental.ts"
  ]
}

要注意,子配置的同名配置会覆盖父配置文件的配置,同时相对路径都会根据子配置文件所在路径进行解析

参考

发布了382 篇原创文章 · 获赞 91 · 访问量 33万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览