TypeScript-上-类型与配置

TS是什么

TypeScript是一门以JS为基础构建的语言。
TS是JS的超集，所有JS代码均可在TS中运行。
TS扩展了JS，并添加了类型。
注意：TS不能被JS解析器直接执行，需要先编译成JS代码。

类型声明

基本类型

用法

声明变量时对变量类型进行设置，但即使报错依然会编译成js代码：

1
2
3

let a:number;
a = 1;
a = "666"; // error，string类型不能赋值给number类型

如果同时进行声明与赋值，TS可自动对变量进行类型检测：

1 2	let a = 2; a = true; // error

也可对函数的参数类型与返回值类型进行声明：

function sum(a: number, b: number): number {
    return a + b;
}
sum(1,2);
sum(1,"2"); // error

其他类型：

let a: any = 1; // any表示任意类型，相当于关闭了TS的类型检测 
let b; // 若不指定类型，自动判断为any
let str: string;
let c: unknown = 1; // unknown表示未知类型的值，实际上是个类型安全的any
str = a; // any类型的值可以赋值给任何类型的值且不报错
str = c; // error
// 类型断言，用来告诉解析器变量的实际类型
str = c as string; 
str = <string>c; 
function fn1(): void{} // void表示空值
function fn2(): never{} // never表示永远不会返回结果
// "?"表示可选属性，[propName: string]: any表示可添加其他任意类型的属性
let person:{name: string, age?: number, [propName: string]: any} 
// string[],Array<string>表示字符串数组
let arr1: string[]; 
let arr2: Array<string>;

Tuple 元组

tuple元组是一种长度固定、数据类型可以不相同的数组类型，可读性与语义性强，类型安全，便于维护，性能优化。

1 2	let h : [string,number]; h = ["abc",3];

Enum 枚举

enum枚举是一种定义一组命名变量的方式。

enum Gender{
    male, // 默认为0
    female // 1
}
let person: {name: string,gender: Gender};
person = {name:"abc", gender: Gender.male}
console.log(Gender.male) // 输出0

类型别名

当类型需要重复使用时，可以为其起个别名，使用别名代替类型名来简化类型的使用。

1 2	type myType = 1 \| 2 \| 3 \| 4 \| 5; let a: myType;

配置选项

// tsconfig.json
{
    // include 用来指定哪些文件需要被编译, exclude 相反
    "include": [
        "./src/**/*.ts", // 表示src目录下的所有目录里的所有ts文件
    ],
    "exclude": [
    	"name",  // 表示排除name目录下的所有文件
  	],
    // compilerOptions 表示编译器的选项,
  	"compilerOptions": {
    	"target": "es6", // 用来指定编译后的JS代码的目标版本，默认为ES3
    	"module": "commonjs", // 指定编译后的JS代码的模块化规范
    	"outDir": "./dist", // 指定编译后文件的输出目录
    	"outfile": "./dist/test.js", // 指定编译后文件的输出文件名并将文件合为一个文件
    	"lib":["dom" ], // 指定项目中使用的库，一般不需要手动指定
    	"allowJs": true, // 是否允许编译JS文件，默认为false
    	"checkJs": true, // 是否检查JS文件的类型，默认为false
        "removeComments": true, // 编译后是否移除注释
        "noEmit": true, // 编译后是否生成 .js 文件
    	"noEmitOnError": false, // 编译出错时是否生成.js 文件
        
    	"strict": true, // 是否启用所有严格类型检查选项
    	// 是否始终启用严格模式, 默认为false，如果为true，则会在生成文件的顶部添加"use strict"
    	// 若文件使用了ES6的模块语法，js文件会自动进入严格模式
    	"alwaysStrict": true,
    	"noImplicitAny": true, // 不允许隐式的any类型
    	"noImplicitThis": true, // 不允许隐式的this类型
  	},
}