typeScript学习指南

1. TS 的编译与安装

TS 安装

npm i typescript -g

编译 TS

使用 tsc 命令编译 ts 文件生成 js 文件，再通过 node 运行 js 文件

tsc filename

使用 ts-node 直接运行 ts 文件

npm i ts-node -g

ts-node filename

tsconfig.json 文件

tsconfig.json 是 TypeScript 项目的配置文件。通过手动创建或者使用 tsc -init 命令创建 tsconfig.json 文件。

2. TS 类型

2.1 boolean (布尔) 类型

let isDone: boolean = true;
let isString: boolean = false;

2.2 number (数字) 类型

let decLiteral: number = 6; // 十进制 decimal
let hexLiteral: number = 0xf00d  // 十六进制 hexadecimal   0x开头表示十六进制
let binaryLiteral: number = 0b1010 // 二进制 Binary  0b开头表示二进制
let octalLiteral: number = 0o744 // 八进制 octal  0o开头表示八进制

2.3 string (字符串) 类型

let str: string = 'abc'
str = 'name'
let str1: string = `${
     str}efg`

2.4 array (数组) 类型

// 1  元素类型后面接上 []  表示由此类型元素组成的一个数组
const list: number[] = [1, 2, 3];
const list1: (number | string) [] = [1, 2, 3, '4'];

// 2   Array<元素类型>
const list2:Array<number> = [1, 2, 3];

// 3   ReadonlyArray<元素类型>  只读数组类型
const list3:ReadonlyArray<number> = [1, 2, 3];  // 这里不做多介绍，interface 部分会具体介绍

2.5 tuple (元组) 类型

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。

let x: [string, number] = ['abcdefg', 111];

2.6 enum (枚举) 类型

// 默认情况下枚举从0开始为元素下标，并且按顺序自增。也可以手动的指定下标
enum Color {
   Red, Green, Blue}
let c: Color = Color.Green;
console.log(c) // 1

// 手动指定元素开始的编号
enum Color1 {
   Red = 1, Green, Blue}
let g: Color1 = Color1.Green;
// console.log(g)   // 2

// 使用字符串作为枚举值，使用字符串之后的元素必须要有初始值，否则会报错
enum Color1 {
   
  Red = 2,
  Green,
  Blue = 'blue',
  // White, 会报错
}

let color: Color1 = Color1.Green;
let color1: Color1 = Color1.Blue;
console.log(color, color1); // 3, blue

// 通过枚举的值来查找这个值在这个枚举里映射的key (只能通过number的下标获取，string的会报错)
let colorName: string = Color1[3];
// let colorName1: string = Color1['blue']; // ts 代码不会提示报错

console.log(colorName);  // Green

2.7 any (任何) 类型

在 TypeScript 中，任何类型都可以被归为 any 类型。这让 any 类型成为了类型系统的顶级类型（也被称作全局超级类型）。当我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查，那么我们可以使用 any类型来标记这些变量，不过 any 也不能滥用，滥用的话也就失去了使用 TS 的意义了。

let notSure: any = 4;
notSure = 'abc';

notSure.toFixed(); // 代码不会提示错误

2.8 viod 类型

某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void。

function warnUser(): void {
   
  console.log('This is my warning message');
}

2.9 null 和 undefined 类型

这两个类型的本身用处不是很大， 默认情况下 null 和 undefined 是所有类型的子类型，例如：可以把 null 和 undefined 赋值给 number 类型的变量。但是当你指定了--strictNullChecks标记，null和undefined只能赋值给void和它们自身。

let u: undefined = undefined;
let n: null = null;
let nu: number = 4;
nu = undefined; // 在 tsconfig 里把 strictNullChecks 设置为 false 则不会报错, strictNullChecks 为 true 时 undefined 只能赋值给 void 和自身，ts 官方建议开启 strictNullChecks 选项
let v: void;
v = undefined; // 开启了 strictNullChecks 也是 OK 的
v = null; // 但是 null 不能赋值给 void 类型，暂时不清楚原因，官网文档说是可以的

• tips: js 中通常 void 0 会用来获取 undefined。undefined 可能会被重写，但是 void 0 返回的值一定会是 undefined 。猜测这就是为什么 undefined 可以赋值给 void 类型的原因吧。

2.10 Never 类型

never 类型表示的是那些永不存在的值的类型。例如，throw error 抛出异常的函数，死循环的函数。

function error(message: string): never {
   
  throw new Error(message);
}
// 推断的返回值类型为never
function fail() {
   
  return error('something failed');
}
function infiniteLoop(): never {
   
  while (true) {
   }
}

2.11 unknown 类型

unknown 类型是 TypeScript 3.0 引入了一个顶级的类型，任何类型都可以赋值给 unknown 类型，但是 unknown 类型除了赋值给 any 和它本身之外，不可以赋值给其他类型。所以，unknown 比 any 更安全。

let a: any = 1;
let b: unknown;
let num: number;
b = 'str'; // 任何类型都可以赋值给 unknown
b = a; // any 类型也可以赋值给 unknown
a = b; // unknown 类型只能赋值给 any 或者他自身

let d: unknown = 6.001;
d.toFixed(); // error; unknown 类型上不能执行任何操作
(d as number).toFixed() // 可以使用类型断言来操作

2.12 类型注解与类型推断

类型注解： 在声明变量的时候显式的声明它的类型
类型推断: 在 TS 中，有些没有明确指出类型的地方，会自动推断出值的类型

// 类型注解
let num: number;
num = 123;

// 类型推断
let s = 'string'; // TS 自动推断出 s 为 string 类型
let n; // 定义式没有赋值，TS 会自动推断该变量为 any 类型

2.13 联合类型

多个类型的合并类型，只需要满足多种类型中的一种；可以把 | 理解成 js 中的 ||(或)。

let temp: string | number;
temp = 123;
temp = 'temp