TypeScript整理笔记

前提准备：

npm install -g typescript：全局安装TypeScript。

tsc -v：查看typescript的版本。

tsc test.ts：运行test.ts文件并编译成test.js文件。

tsc test.ts --outFile ./dist/cc.js ：将test.ts编译到当前dist文件下的cc.js中（自动创建文件/文件夹）。

vscode下运行typescript参考：https://blog.csdn.net/gofun4/article/details/80293222。

（一）Typescript类型校验。

1、TypeScript数据类型：包括基础类型（Boolean，String，Number，Null，Undefined）和特殊类型（Array，Any，Never，Void，Enum，Tuple）以及自定义类型。

（1）Boolean 布尔类型：true/false。

var bool: boolean = false;

//注意：当var bool=false; bool=12时在typescript中会报错，因为ts中如果变量声明时没有说明类型，
//会根据第一次赋值的类型，设定该变量的类型，后面赋值也需要赋值该类型的值。

（2）Number 数字类型：

var decLiteral: number = 6;
var hexLiteral: number = 0x9837abdef;
var binaryLiteral: number = 0b0010;
var octalLiteral: number = 0o74563;

（3）String 字符串类型：

var name: string = "bob";
name = 'smith';

var name: string = `Gene`;
var age: number = 37;
var sentence: string = `Hello, 我是 ${ name },下个月我将 ${ age + 1 }岁了！`

var sentence1: string = 'Hello, 我是'+  name +',下个月我'+ (age + 1)+'岁了！'`

（4）Array 数组类型：

var list: Array<number> = [1, 2, 3];
//或者
var list: number[] = [1, 2, 3];//数组中的所有元素都是数字类型
var list: any[] = [1, 2, 3,'a'];//数组中所有元素都是任意类型

（5）Tuple 元组类型：即表达固定数量的已知（相同/不同）类型集合，是数组类型的一种。

var x: [string, number];  // 声明一个元组类型
x = ['hello', 10]; // 准确
x = [10, 'hello']; // 错误
console.log(x[0].substr(1)); // 正确
console.log(x[1].substr(1)); // 错误，'number' 类型没有 'substr' 方法
//当访问的索引超过边界时，将使用联合类型处理
x[3] = 'world'; // 正确，string允许被分配到 (string | number)
console.log(x[5].toString()); // 正确，'string' 和 'number' 都有 toString 方法
x[6] = true; // 错误，布尔值不是 (string | number) 中的一种

（6）Enum 枚举类型：包括数字枚举，字符串枚举，异构枚举，const枚举。

//1.数字枚举
enum Color {Red = 1, 'Green', Blue}; //给Red设置初始化值为1，之后的元素以此在,前一个元素值1的基础上+1，即1,2,3。
//如果enum Color {Red, Green, Blue};则Red默认从0开始，之后的元素以此在,前一个元素值1的基础上+1。即0,1,2
console.log(Color.Red)  //输出结果为1
console.log(Color[2])  //输出结果为Green
var colorName: string = Color[1];
var colorName: Color = Color[1];
alert(colorName); //输出的是Red，即枚举类型Color值为1的对应的元素名称。

//2.字符串枚举
enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}

//3.异构枚举：即混合字符串和数字成员
enum BsEnum {
    No = 0,
    Yes = "YES",
}

//4.常量枚举：常量枚举只能使用常量枚举表达式，并且不同于常规的枚举，它们在编译阶段会被删除。
const enum Enum {
    A = 1,
    B = A * 2
}

（7）Any 任意类型：

var notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // 正确，因为notSure是不确定的类型，即可以是任意类型

notSure.ifItExists(); // 正确，在运行时有可能有 ifItExists 这个方法
notSure.toFixed(); // 正确，toFixed 是真实存在的方法 (但是编译器不会验证准确性)
var prettySure: Object = 4;
prettySure.toFixed(); // 错误，Object类型没有toFixed()方法。

var list: any[] = [1, true, "free"];
list[1] = 100;  //正确


let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;  //数组的只读，即不能修改数组元素，数组长度，新增/删除数组元素。
ro[0] = 12; // 错误，只读数组下不能修改数组元素值!
ro.push(5); // 错误，只读数组下不能添加/删除数组元素!
ro.length = 100; // 错误，只读数组下不能修改数组长度!
a = ro; // 错误，只读数组下不能将该只读数组赋值给其他变量!
a = ro as number[];  //正确，只读数组，可以通过‘类型断言 as’的方式修改只读数组的类型，并可以赋值给其他变量。
//ro as number[]，或ro as boolean即将ro类型重写成数字数组/boolean类型

（8）Void没有类型：一般用于没有返回值的函数。

function warnUser(): void { //void就像any的相反面：void就是没有，any就是所有。没有返回值的函数就可以认为是'void'类型：
    alert("This is my warning message");
}


var unusable: void = undefined;//不建议声明一个变量是 void类型，因为这个变量就只能赋值undefined 或 null。

（9）Null类型和Underfined类型以及Never类型（Never是Null和Undefined类型的子类型）：

var a:null=null; //null 类型只能赋值null或者不赋值
var b:undefined=undefined; //undefined 类型只能赋值undefined或者不赋值
var c:undefined | number;
var d:undefined | null |number; //要么不赋值，要么赋值为null/undefined/number
console.log(c); //申明不赋值/申明赋值


let e:never;//代表从来不会出现的值

e=(()=>{ //never类型很少用 比如用在这里
    throw new Error('报错')
})

2、函数返回值类型，参数类型，默认参数，可选参数，不确定参数个数的参数，函数重载：

function fun(x:string):void{  //函数没有返回
    //表示函数fun的参数x是字符串类型，且函数没有返回。否则报错。
}

function fun(x:string):number{//函数有返回值 且返回值类型是number
    //表示函数fun的参数x是字符串类型，且函数有返回值(return) 返回值类型是数字类型。否则报错。
}

function fun(x:number=1):number{ //函数默认参数，在必选参数之后
    //表示函数fun的参数x默认值为1，且函数有返回值(return) 返回值类型是数字类型。否则报错。
}


function fun(x?:string):number{//函数可选参数，在必选参数之后
    x?true:false;
    //表示函数fun的参数x可传可不传,可选参数和默认参数必须在必选参数后面，且函数有返回值(return) 返回值类型是数字类型。否则报错。
}

function fun(...args:any[]):number{//不确定个数的参数
    args.forEach((item)=>{

    })
    //表示函数fun的参数args个数不确定,可选参数和默认参数必须在必选参数后面，且函数有返回值(return) 返回值类型是数字类型。否则报错。
}

var fun(x:number,y:number)=>number=function(x:number,y:number):number{
    return x+y
}
//或简写为
var fun(x:number,y:number)=>number=function(x,y){
    return x+y
}

//函数重载（即同名函数），调用fn4函数时，里面的参数要么全是number类型，要么全是string，否则报错。
function fn4(x:number,y:number):number;
function fn4(x:string,y:string):string;
function fn4(x:any,y:any):any{
    if(typeof x=='number'){
        return x*y
    }else{
        return x+y
    }
};

3、TypeScript接口：

interface LabeledValue {  //interface：定义一个接口
  label: string;  //接口类型必填属性
  color?: string; //接口类型可选属性 "?"
  readonly y: number;  //只读，即只能读取LabeledValue.y的值，不能修改和删除
}

function printLabel(labeledObj: LabeledValue) {
  console.log(labeledObj.label);
}

let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);


interface ReadonlyStringArray {
  readonly [index: number]: string;
}
let myArray: ReadonlyStringArray = ["Alice", "Bob"];
myArray[2] = "Mallory"; // 错误，下标索引是数字类型，且只读，即不能对下标索引进行重写赋值。只能读取下标索引对应的值。

4、TypeScript类型断言：

//1. 尖括号 类型断言：
function fun():string | number[]{
    if(Math.random<.5){
        return 'Ace'
    }else{
        return [28]
    }
}
let a: string | number[]=fun();
(<string>a).length;
(<number[]>a).push(0);
//2. as 类型断言：
let b=a as string;
b.length;

5、TypeScript类：

class Animal {
    name:string;
    constructor(name:string) { 
        this.name = name; 
    }
    move(distanceInMeters: number = 0) :void{
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}