tsconfig.json 配置文件详解 | 02
tsconfig.json (Ts 配置文件)
tsconfig.json
是 ts 项目中配置文件。在项目根目录,如果项目中有 tsconfig.json
, TypeScript
则认为这是项目的根目录。
如果项目源码是 JavaScript
,但是相用 typescript
处理,那配置文件的名字是jsconfig.json
,和 tsconfig
的写法一样。
指定 tsconfig.json
目录
命令行参数--project 或-p 可以指定 tsconfig.json 的位置(目录或文件皆可)。
如果不指定 tsconfig.json
, tsc
会在当前目录搜索 tsconfig.json
文件,如果不存在,就到上一级目录搜索,直到找到为止。
tsconfig.json
文件格式,是一个 JSON 对象,简单到只可以放一个空对象 {}
, 示例如下:
{
"compilerOptions":{
"outDir":"./built",
"allowJs":true,
"target":"es5"
},
"include":["./src/**/*"]
}
tsconfig.json
文件中有很多属性,这样简单说下上面四个属性的含义
outDir
指定编译文件存放的目录allowJs
指定源目录的JavaScript
文件是否原样拷贝到编译后的目录target
指定编译产物的 js 版本include
指定那些文件需要编译
tsconfig.json
文件可以不必手写,使用 tsc 命令的 --init
参数自动生成
tsc --init
tsconfig 一级属性
tsconfig.json 的一级属性并不多,只有很少几个,但是 compilerOptions 属性有很多二级属性。
先介绍下一级属性
1、include
include
属性指定所要编译的文件列表,既支持逐一列出文件,也支持通配符。文件位置相对于当前配置文件而定。
{
"include": ["src/**/*", "tests/**/*"]
}
include 属性支持三种通配符。
- ?:指代单个字符
- *:指代任意字符,不含路径分隔符
- **:指定任意目录层级。
如果不指定文件后缀名,默认包括.ts、.tsx 和.d.ts 文件。如果打开了 allowJs,那么还包括.js 和.jsx。
2、exclude
exclude
属性是一个数组,必须与 include
属性一起使用,用来从编译列表中去除指定的文件,同样支持和 include
属性相同的通配符。
{
"include":["**/*"], // 指定那些文件需要编译
"exclude":["**/*.spec.ts"] // 从编译列表中去除指定文件
}
3、extends
如果一个项目有多个配置文件,可以将共同的配置写在 tsconfig.base.json
tsconfig.json
可以继承另一个 tsconfig.json
文件的配置,这样方便维护。
{
"extends":"../tsconfig.base.json"
}
如果 extends
属性指定的路径如不是以./
或者 ../
开头,那么编译器将在node_modules
目录下查找指定的配置文件。
extends
属性也可也继承已发布的 npm 模块里面的 tsconfig 文件
{
"extends":"@tsconfig/node12/tsconfig.json"
}
extends
指定的 tsconfig.json
会先加载,然后加载当前的 tsconfig.json
。如果两者有重名的属性,后者会覆盖前者。
4、files
files
属性指定编译的文件列表,如果其中一个文件不存在,就会报错。
它是一个数组,排在前面的文件先编译。
{
"files":["a.ts","b.ts"]
}
该属性必须逐一列出文件,不支持文件匹配,如果文件比较多建议使用 include
和 exclude
属性。
5、references
references
属性是一个数组,数组成员为对象,适合一个大项目由多个小项目构成的情况,用来设置需要引用的底层项目。
{
"references":[
{"path":"../pkg1"},
{"path":"../pkg2/tsconfig.json"}
]
}
lesson 1 实战
- 使用 create-react-app project --template typescript 创建脚手架
create-react-app project --template typescript
- 正确生成 tsConfig.json 文件 tsc --init
tsc --init // 使用上面脚手架创建后,项目中自动生成tsconfig.json 文件
- 正确配置打包 dist 命令
先创建 config 配置目录,输入以下命令
npm eject
打开 config 目录,config/paths.js 更改打包目录为 dist
- 正确配置 ts 文件监听
- 配置打包出口文件
// 如上和第三题一样
- 配置 incloude 以及 excloude
{
"include":["src/**/*"], //指定所要编译的文件列表
"exclude": ["**/*.spec.ts"]//从编译列表中去除指定的文件
}
- 用 ts 语法声明一个枚举示例
enum user{
age,
name,
sex
}
- 定义类型不可使用 any;
// 不要用any any any!!!
- 写出 ts 的基础类型 以及 ts 新增类型 写明注释
// 布尔值
let isDone: boolean = false;
// 数字
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;
// 字符串
let name: string = `Gene`;
let sentence: string = `Hello, my name is ${name}.`;
// 数组
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3]; // 数组泛型,Array<元素类型>
// 元组 Tuple
let x: [string, number];
x = ["hello", 10];
- 自行定义 ts 的元组类型
// 定义一个具有固定长度为2的元组类型
type MyTuple = [string, number];
// 声明一个变量并指定其类型为自定义的元组类型
let myTuple: MyTuple;
// 初始化元组变量
myTuple = ["hello", 123]; // 正确
myTuple = ["world", 456];
- 实现元组数据存在多种类型的定义
//myTuple 是一个包含三个元素的元组。第一个元素的类型是 number,第二个元素的类型是 string,第三个元素的类型是 boolean。
let myTuple: [number, string, boolean] = [42, "Hello", true];
- 简单实现去重效果[1,1,1,2,2,2,3]=>[1,2,3]
// 最快速去重 new set() ,注意 set只能去除基本类型,无法去重引用类型,如对象,因为应用类型值相同无法去重
new Set([1, 1, 1, 2, 2, 2, 3]);
- 正确实现函数调用且正确给出函数返回值的类型
const add = (a: number, b: number): number => {
return a + b;
};
- 正确实现效果无 bug;
不要出bug!!!!!
- 添加必要的思路注释
记得写下代码注释,比如声明一个包含xx类型的数据结构
- 录制效果视频正确讲解并标黄;
读者朋友好呀,我是王天~ 😊
如文章有错误或者不严谨的地方,期待给于指正,万分感谢。🙇
如果喜欢或者 有所启发,欢迎 star,对作者也是一种鼓励👏
微信:「wangtian3111」,加我进王天唯一的读者群。