TS基础

TypeScript简介

1. TypeScript是JavaScript的超集。
2. 它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。
3. TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。
4. TS完全兼容JS，换言之，任何的JS代码都可以直接当成TS使用。
5. 相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS。

类型声明

1. 变量和函数类型声明——声明变量的同时声明类型。
   语法：let 变量: 类型;

let a: string;

2. 声明变量同时声明类型+赋初始值。
   语法：let 变量: 类型 = 值;

let b: number = 3;
b = '';

3. 声明变量时直接赋值,TS可以对变量类型进行检测。
   语法：let 变量 = 值；

let c = 3;
c = true;

4. & 且,合并多种类型。
   语法：let 对象: 类型1 & 类型2

let obj5: {name:string} & {age:number}
obj5 = {name: '悟空', age: 10}  

5. 使用字面量进行类型声明，变量的值是该字面量的值。
   语法：let 变量：值
   语法：可以使用 | 来连接多个类型

// let d: 'e' | 'f';
let d: number | string;
d = 1;
d = 'f';

6. any 表示任意类型。
   一个变量设置类型为any后相当于对其关闭了TS的类型检测;
   any可以赋值给任意类型的值，不安全，不建议使用;
   声明变量时不赋值也不声明类型，相当于any类型。

/**一个变量设置类型为any后相当于对其关闭了TS的类型检测*/
let m : any;
m = true;
m = false;
/**any可以赋值给任意类型的值，不安全，不建议使用*/
let o: string | number;
o = m;
console.log(typeof o);
/**声明变量时不赋值也不声明类型，相当于any类型*/
let n;
n= true;

7. unknown 实际上是一个类型安全的any。
   unknown类型的变量，不能直接赋值给其他类型的变量；
   要用if判断或者类型断言。

let un: unknown;
un = 1;
un = true;
// if判断
let o: string | number;
if ( typeof un === 'string') {
    o = un;
}

8. 类型断言,可以用来告诉解析器变量的实际类型。
   语法： 变量 as 类型 | <类型>变量

let o: string | number;
let un: unknown;
o = un as string;
o = un;

9. void用来表示空。

function fn1(){
    // return 1;
    // return undefined;
    return null;
}
let v: void;
// v = undefined;
v = fn1();

10. never类型没有返回值，是任意类型的子集，可以赋值给任意类型，但不能被任意类型赋值（包括any）,除了自身。例如：抛出错误throw new Error('报错')。

function fn2():never {
    throw new Error()
}

11. object 表示js对象，广义上的。
    语法：{key1：类型， key2：类型}，用来指定对象中包含哪些属性，key值及value的类型

let obj4: object;
obj4 = {};
obj4 = [];
obj4 = function () {};
let obj7: {name: string, age: number};
obj7 = {name: 'yan', age: 18};

12. 在属性名后面加上？，表示该属性是可选的。
    语法： {key1：类型， key2？：类型}

let obj2 : {name:string, age?: number};
obj2 = {name:'pig'}

13. [propName: string]: any,表示任意个数的属性，propName可以用任意值表示。
    语法： {key1：类型， [propName: string]: any}

let obj3: {name:string, [xx: string]: any}
obj3 = {name: 'a', age:12, gender: 'male'};

14. TS函数中的规定参数的类型和个数,规定返回值类型。
    语法：function fn(参数: 类型, 参数: 类型): 类型 {...}

function fn(a:number, b:number){
    return a +b;
    // return a + '';
}
fn(1, 10); // 11
fn(1, '10') // 110 这个例子说明了类型声明的重要性，没有类型校验的话，函数会返回意料外的值，并且没有错误提示。

15. 设置函数结构的参数和返回值类型声明。
    语法：let 变量: (a:类型, b:类型) => 类型，a、b可以是任意值形参名

let fn3: (a:number, b:number) => number;
fn3 = function (n1: number, n2: number) {
    return 10;
}

16. 数组的类型声明。
    语法：let 变量: 类型[] | Array<类型>

let arr1: number[];
arr1 = [1, 2];
let arr2: Array;
arr2 = [1, true, '2'];

17. 元组: 数组长度固定，每一项数组类型固定。
    语法：[类型，类型，类型]

let y: [string, number, boolean]
y = ['', 1, true]

18. 枚举enum。
    语法：enum 枚举类型{ 类型1 = 0, 类型2 = 1}

enum Gender{
    Male = 0,
    Female = 1
}
let p : {name: string, gender: 0|1 }
p = {name: '志远', gender: Gender.Male}

19. 类型的别名
    语法：type 别名 = 1|2|3；

type t1 = 1|2|3;
let aa : 1|2|3;
let bb: 1|2|3;
let cc: t1;
cc = 1;