# tsconfig.json
{
// 此json文件中可以写注释！
/*
tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译
*/
/*
"include" 用来指定哪些ts文件需要被编译
默认：当前路径下所有文件, **\*
路径：** 表示任意目录
* 表示任意文件
*/
"include": [
"./src/**/*"
],
/*
"exclude" 不需要被编译的文件目录
默认值：
["node_modules", "bower_components", "jspm_packages", "./dist"]
*/
"exclude": [
"./src/exclude/**/*"
],
/*
被继承的配置文件
例如："extends": "。/configs/base",
*/
// "extends": "",
/*
指定被编译文件的列表，只有需要编译的文件少时才会用到
*/
// "files": [],
/*
compilerOptions 编译器的选项
*/
"compilerOptions": {
// target 用来指定ts被编译为的ES的版本
// 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', ...
"target": "es2015",
// module 指定要使用的模块化的规范
// 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', ...
"module": "es2015",
// lib用来指定项目中要使用的库
// 在node项目中可以声明用到的库，在前端中可以声明dom(浏览器中的内置库，但是在node中是不需要的！)
// 默认就是在浏览器中的运行环境！
//'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020',
// 'esnext', 'dom', 'dom.iterable', ...
"lib": [
"es6",
"dom"
],
// outDir 用来指定编译后文件所在的目录
"outDir": "./dist",
// 将代码合并为一个文件
// 设置outFile后，所有的全局作用域中的代码会合并到同一个文件中
//"outFile": "./dist/app.js"
// 是否对js文件进行编译，默认是false
"allowJs": true,
// 是否检查js代码是否符合语法规范，默认是false
"checkJs": true,
// 是否移除注释
"removeComments": true,
// 不生成编译后的文件
// 仅用TS检查语法
"noEmit": false,
// 当有错误时不生成编译后的文件
"noEmitOnError": true,
/*
语法检查属性
*/
// 所有严格检查的总开关
"strict": true,
// 用来设置编译后的文件是否使用严格模式，默认false
// 在ES6中的模块化会自动使用严格模式，而无需在文件开头添加`'use strict'`
"alwaysStrict": true,
// 不允许隐式的any类型
"noImplicitAny": true,
// 不允许不明确类型的this
"noImplicitThis": true,
// 严格的检查空值
"strictNullChecks": true
}
}
# 编译选项
# 自动编译文件
编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。
示例：
tsc xxx.ts -w
# 自动编译整个项目
如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件。
但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.json
tsconfig.json是一个JSON文件，添加配置文件后，只需只需 tsc 命令即可完成对整个项目的编译
配置选项：
# include
- 定义希望被编译文件所在的目录
- 默认值：["**/*"]
示例：
"include":["src/**/*", "tests/**/*"]
上述示例中，所有src目录和tests目录下的文件都会被编译
# exclude
- 定义需要排除在外的目录
- 默认值：["node_modules", "bower_components", "jspm_packages"]
示例：
"exclude": ["./src/hello/**/*"]
上述示例中，src下hello目录下的文件都不会被编译
# extends
- 定义被继承的配置文件
示例：
"extends": "./configs/base"
上述示例中，当前配置文件中会自动包含config目录下base.json中的所有配置信息
# files
- 指定被编译文件的列表，只有需要编译的文件少时才会用到
示例：
"files": [
"core.ts",
"sys.ts",
"types.ts",
"scanner.ts",
"parser.ts",
"utilities.ts",
"binder.ts",
"checker.ts",
"tsc.ts"
]
- 列表中的文件都会被TS编译器所编译
# compilerOptions
- 编译选项是配置文件中非常重要也比较复杂的配置选项
- 在compilerOptions中包含多个子选项，用来完成对编译的配置
项目选项：
target
设置ts代码编译的目标版本
可选值：
- ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
示例：
"compilerOptions": { "target": "ES6" }
如上设置，我们所编写的ts代码将会被编译为ES6版本的js代码
lib
指定代码运行时所包含的库（宿主环境）
可选值：
- ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost ......
示例：
"compilerOptions": { "target": "ES6", "lib": ["ES6", "DOM"], "outDir": "dist", "outFile": "dist/aa.js" }
module
设置编译后代码使用的模块化系统
可选值：
- CommonJS、UMD、AMD、System、ES2020、ESNext、None
示例：
"compilerOptions": { "module": "CommonJS" }
outDir
编译后文件的所在目录
默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置
示例：
"compilerOptions": { "outDir": "dist" }设置后编译后的js文件将会生成到dist目录
outFile
将所有的文件编译为一个js文件
默认会将所有的编写在全局作用域中的代码合并为一个js文件，如果module制定了None、System或AMD则会将模块一起合并到文件之中
示例：
"compilerOptions": { "outFile": "dist/app.js" }
rootDir
指定代码的根目录，默认情况下编译后文件的目录结构会以最长的公共目录为根目录，通过rootDir可以手动指定根目录
示例：
"compilerOptions": { "rootDir": "./src" }
allowJs
- 是否对js文件编译
checkJs
是否对js文件进行检查
示例：
"compilerOptions": { "allowJs": true, "checkJs": true }
removeComments
- 是否删除注释
- 默认值：false
noEmit
- 不对代码进行编译
- 默认值：false
sourceMap
- 是否生成sourceMap
- 默认值：false
严格检查
- strict
- 启用所有的严格检查，默认值为true，设置后相当于开启了所有的严格检查
- alwaysStrict
- 总是以严格模式对代码进行编译
- noImplicitAny
- 禁止隐式的any类型
- noImplicitThis
- 禁止类型不明确的this
- strictBindCallApply
- 严格检查bind、call和apply的参数列表
- strictFunctionTypes
- 严格检查函数的类型
- strictNullChecks
- 严格的空值检查
- strictPropertyInitialization
- 严格检查属性是否初始化
- strict
额外检查
- noFallthroughCasesInSwitch
- 检查switch语句包含正确的break
- noImplicitReturns
- 检查函数没有隐式的返回值
- noUnusedLocals
- 检查未使用的局部变量
- noUnusedParameters
- 检查未使用的参数
- noFallthroughCasesInSwitch
高级
- allowUnreachableCode
- 检查不可达代码
- 可选值：
- true，忽略不可达代码
- false，不可达代码将引起错误
- noEmitOnError
- 有错误的情况下不进行编译
- 默认值：false
- allowUnreachableCode
# 类型别名
类型别名用来给一个类型起个新名字。
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
if (typeof n === 'string') {
return n;
} else {
return n();
}
}
# 字符串字面量类型
字符串字面量类型用来约束取值只能是某几个字符串中的一个。
type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
// do something
}
handleEvent(document.getElementById('hello'), 'scroll'); // 没问题
handleEvent(document.getElementById('world'), 'dblclick'); // 报错，event 不能为 'dblclick'
// index.ts(7,47): error TS2345: Argument of type '"dblclick"' is not assignable to parameter of type 'EventNames'.
# 元组
数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。
元组起源于函数编程语言（如 F#），这些语言中会频繁使用元组。
定义一对值分别为 string 和 number 的元组：
let tom: [string, number] = ['Tom', 25];
当赋值或访问一个已知索引的元素时，会得到正确的类型：
let tom: [string, number];
tom[0] = 'Tom';
tom[1] = 25;
tom[0].slice(1);
tom[1].toFixed(2);
也可以只赋值其中一项：
let tom: [string, number];
tom[0] = 'Tom';
但是当直接对元组类型的变量进行初始化或者赋值的时候，需要提供所有元组类型中指定的项。
let tom: [string, number];
tom = ['Tom', 25];
let tom: [string, number];
tom = ['Tom'];
// Property '1' is missing in type '[string]' but required in type '[string, number]'.
越界的元素 当添加越界的元素时，它的类型会被限制为元组中每个类型的联合类型：
let tom: [string, number];
tom = ['Tom', 25];
tom.push('male');
tom.push(true);
// Argument of type 'true' is not assignable to parameter of type 'string | number'.
← 基础