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不生效。

编译选项

完整的选项列表

字段类型默认值说明
allowJsbooleanfalse允许编译JS文件
checkJsbooleanfalse报告JS文件中存在的类型错误(需打开allowJS
declarationbooleanfalse生成对应的.d.ts声明文件
declarationDirstring-生成的.d.ts文件路径(默认与.ts相同)
experimentalDecoratorsbooleanfalse启用装饰器功能
jsxstringPreserve.tsx中支持JSX,详细说明
libstring[]-编译对应的ES版本(es5/es6/es7/dom等),根据target不同取值不同
modulestringcommonjs/es6生成模块格式,与target有关
moduleResolutionstringclassic/node模块解析方式,与module有关,详细说明
noImplicitAnybooleanfalse存在隐式any时报错
noImplicitReturnsbooleanfalse函数无return时报错
noImplicitThisbooleanfalsethis可能为any时报错
outDirstring-编译输出目录,默认与.ts相同
sourceMapbooleanfalse生成.map文件
targetstringes3编译的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"
  ]
}

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

参考

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页