TypeScript中的配置文件(上)
初始化ts,在全局安装的ts之后使用tsc --init
会创建tsconfig.json
文件。这个文件实际上是对ts编译配置文件。真正对ts代码进行编译的时候,这个文件的内容会起作用。
运行tsc demo.ts
等等类似命令的时候,直接指定编译某一文件的时候,它并不会使用tsconfig.json
文件。只使用tsc
才会使tsconfig.json
文件。在tsconfig.json
文件没有额外特别配置时,会默认将根目录下的ts
文件统一进行编译。
指定特定的ts文件进行编译。
include
,files
是包含要编译的文件,exclude
指的是不编译的文件。
tsconfig.json 是什么
compilerOptions
指的是编译过程中的编译的一些属性,配置。
"removeComments": true, /* Do not emit comments to output. */ "noImplicitAny": true, /* Raise error on expressions and declarations withan implied 'any' type. */ "strictNullChecks": true, /* Enable strict null checks. */
TypeScript中的配置文件(下)
ts-node
这个工具会使用tsconfig.json
进行编译。但是和tsc
完全不是一个对象。
"rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ "outDir": "./build", /* Redirect output structure to the directory. */
"rootDir": "./",
指定输入文件的地址,和outDir
一起用来控制输出。
"incremental": true, /* Enable incremental compilation */
这个配置项打开,会产生一个文件,来保存上一次编译的信息,这次编译会和上一次编译作比对,已经编译过的内容就不再进行编译,没有进行编译过内容就进行编译。
"allowJs": true, /* Allow javascript files to be compiled. */ "checkJs": true, /* Report errors in .js files. */ "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
"allowJs": true,
是否允许js文件也进行编译, "checkJs": true,
允许对js进行语法检测, "target": "es5",
编译后的js版本
"sourceMap": true, /* Generates corresponding '.map' file. */
创建一个.map
文件。
"noUnusedLocals": true, /* Report errors on unused locals. */
定义未使用的变量会被报错。
"noUnusedParameters": true, /* Report errors on unused parameters. */
针对函数的未使用而报错
联合类型和类型保护
类型保护
Enum枚举类型
const Status = { OFFLINE: 0, ONLINE: 1, DELETED: 2 } function getResult(status) { if (status === Status.OFFLINE) { return 'offline'; } else if (status === Status.ONLINE) { return 'online'; } else if (status === Status.DELETED) { return 'deleted'; } return 'error'; } const result = getResult(1); console.log(result);
enum Status { OFFLINE = 1, ONLINE, DELETED, } console.log(Status.OFFLINE, Status[0]); // 1,1
函数泛型
// 泛型 generic 泛指的类型 function join<T, P>(first: T, second: P) { return `${first}${second}`; } function anotherJoin<T>(first: T, second: T): T { return first; } // T[] function map<T>(params: Array<T>) { return params; } // join<number, string>(1, '1'); // map<string>(['123']); join(1, '1');
类中的泛型以及泛型类型
interface Item { name: string; } class DataManager<T extends Item> { constructor(private data: T[]) {} getItem(index: number): string { return this.data[index].name; } } const data = new DataManager([ { name: 'dell' } ]);
class DataManager<T extends number | string> { constructor(private data: T[]) {} getItem(index: number): T { return this.data[index]; } }
// 如何使用泛型作为一个具体的类型注解 function hello<T>(params: T) { return params; } const func: <T>(param: T) => T = hello;
TypeScript语法进阶(下)https://developer.aliyun.com/article/1392236