TypeScript笔记

TypeScript4安装及初始化

打开CMD命令行，输入以下代码：npm install -g typescript@4.1.2

TypeScript4项目初始化:
mkdir typescript-demo
cd typescript-demo
tsc --init

TypeScript4数据类型

变量格式与类型：

格式: let 变量名: 变量类型 = 初始化值;

布尔类型: let flag: boolean = true;
数字类型: let num: number = 123;
字符串类型: let str: string = "Hello,TypeScript";
null类型: let n: null = null;
undefined类型: let u: undefined = undefined;
any类型: let demo: any = 'Hello,TypeScript' //  any 类型表示任意数据类型

数组类型: 
let arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
console.log(arr);

let arr: Array<number> = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
console.log(arr);

元组类型: let arr: [number, string] = [1, '1']

枚举类型: 
enum Flag {
    success,
    error,
    overtime
};

let s: Flag = Flag.overtime;
console.log(s);//2
// 如果标识符没有赋值，它的值就是下标，如果从中间突然指定了一个值，那么它之后的值都会从当前值开始重新计算

组合类型:支持一个变量可以赋予多种不同的变量类型，多个变量类型使用 | 分隔
let num: number | null | undefined;

num = 3;
console.log(num);

num = null;
console.log(num);

num = undefined;
console.log(num);

void类型: void 类型表示没有任何类型，一般用于定义方法的时候方法没有返回值
function success(): void {
    console.log('执行成功了，我不需要返回值');
}
never类型:  never 类型是任何类型的子类型，也可以赋值给任何类型，但是没有类型是 never 的子类型或可以赋值给 never 类型， 即使 any 类型也不可以赋值给never。这意味着声明 never 类型的变量只能被 never 类型所赋值
function error(): never {
    throw new Error('抛出错误了');
}

TypeScript函数

函数格式一：

function 函数名(参数列表): 返回值类型 {
    函数体 ...
    [return 返回值;]
}

函数格式二：

let 函数名 = function (参数列表): 返回值类型 {
    函数体 ...
    [return 返回值;]
};

必选参数和可选参数

// 可选参数加个?
function getInfo(name: string, age?: number): string {
    return `${name} --- ${age}`;
}

console.log(getInfo("张三", 28)); // 正确
console.log(getInfo("张三")); // 错误
console.log(getInfo(28)); // 错误

剩余参数

function sum(...result: number[]): number {
    let sum = 0;
    for (let i = 0; i < result.length; i++) {
        sum += result[i];
    }
    return sum;
}

console.log(sum(1, 2, 3, 4, 5, 6));

重载函数

重载指的是两个或者两个以上同名函数，但它们的参数不一样，这时会出现函数重载的情况。

TypeScript 中的重载是通过为同一个函数提供多个函数类型声明来实现函数重载的功能的。
//重载函数声明
function getInfo(name: string): string;
function getInfo(name: string, age: number): string;
//重载函数签名：就是把声明中出现的参数都写出来，如果可选，就使用可选参数，一个变量名可以使用多种类型用组合类型
function getInfo(name: string, age?: string | number): string {
    if (age) {

        return "我叫：" + name + "，年龄：" + age;
    } else {

        return "我叫：" + name;
    }
}

console.log(getInfo("zhangsan"));// 正确
console.log(getInfo("lisi", 20));// 正确
console.log(getInfo(123));// 错误

TypeScript类

类的定义

class Person {
    name: string;//属性，前面省略了public关键词

    constructor(n: string) {//构造函数，实例化类的时候触发的方法
        this.name = n;//使用this关键字为当前类的name属性赋值
    }

    run(): void {//方法
        console.log(this.name+ "在跑步");
    }
}

var p = new Person("张三");
p.run();

类的继承

类的继承：在 TypeScript 中要想实现继承使用 extends 关键字，只要一旦实现了继承关系，那么子类中便拥有了父类的属性和方法，而在执行方法过程中，首先从子类开始找，如果有，就使用，如果没有，就去父类中找。类的继承只能单向继承。

class Person {
    name: string;//父类属性，前面省略了public关键词

    constructor(n: string) {//构造函数，实例化父类的时候触发的方法
        this.name = n;//使用this关键字为当前类的name属性赋值
    }

    run(): void {//父类方法
        console.log(this.name + "在跑步");
    }
}

//中国人这个类继承了人这个类
class Chinese extends Person {
    age: number;//子类属性

    constructor(n: string, a: number) {//构造函数，实例化子类的时候触发的方法
        super(n);//使用super关键字调用父类中的构造方法
        this.age = a;//使用this关键字为当前类的age属性赋值
    }

    speak(): void {//子类方法
        super.run();//使用super关键字调用父类中的方法
        console.log(this.name + "说中文");
    }
}

var c = new Chinese("张三", 28);
c.speak();

修饰符

TypeScript 里面定义属性的时候给我们提供了 三种修饰符

public：公有类型，在当前类里面、子类、类外面都可以访问 (默认修饰符public)
protected：保护类型，在当前类里面、子类里面可以访问，在类外部没法访问
private：私有类型，在当前类里面可以访问，子类、类外部都没法访问

静态属性

静态属性：被静态修饰符修饰的属性就是静态属性，静态属性可以通过类名直接调用

class Person {
    name: string;//属性，前面省略了public关键词
    static sex: string = "男";//被静态修饰符static修饰的属性

    constructor(n: string) {//构造函数，实例化类的时候触发的方法
        this.name = n;
    }

    run(): void {//方法
        console.log(this.name+ "在跑步");
    }
}

console.log(Person.sex);

静态方法

静态方法：被静态修饰符修饰的方法就是静态方法，静态方法可以通过类名直接调用，但是在静态方法内部，不能直接调用当前类的非静态属性、非静态方法。

class Person {
    name: string;//属性，前面省略了public关键词
    static sex: string = "男";//被静态修饰符static修饰的属性

    constructor(n: string) {//构造函数，实例化类的时候触发的方法
        this.name = n;
    }

    run(): void {//方法
        console.log(this.name + "在跑步");
    }

    static print(): void {//被静态修饰符static修饰的方法
        // console.log('姓名：' + this.name);//错误
        console.log('性别：' + Person.sex);//正确
        // this.run();//错误
    }
}

Person.print();

抽象类

TypeScript 中的抽象类：它是提供其他类继承的基类，不能直接被实例化。

用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类（也就是其子类）中实现，abstract抽象方法只能放在抽象类里面。

我们常常使用抽象类和抽象方法用来定义标准。
 

//动物抽象类，所有动物都会跑（假设），但是吃的东西不一样，所以把吃的方法定义成抽象方法
abstract class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    abstract eat(): any;//抽象方法不包含具体实现并且必须在派生类中实现
    run() {
        console.log(this.name + "会跑")
    }
}

class Dog extends Animal {
    constructor(name: string) {
        super(name);
    }
    eat(): any {//抽象类的子类必须实现抽象类里面的抽象方法
        console.log(this.name + "吃骨头");
    }
}

var d: Dog = new Dog("小狼狗");
d.eat();

class Cat extends Animal {
    constructor(name: string) {
        super(name);
    }
    eat(): any {//抽象类的子类必须实现抽象类里面的抽象方法
        console.log(this.name + "吃老鼠");
    }
}

var c: Cat = new Cat("小花猫");
c.eat();

多态

多态：父类定义一个方法不去实现，让继承它的子类去实现 ，每一个子类有不同的表现，多态属于继承。

//动物抽象类，所有动物都会跑（假设），但是吃的东西不一样，所以把吃的方法定义成抽象方法
abstract class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    abstract eat(): any;//抽象方法不包含具体实现并且必须在派生类中实现
    run() {
        console.log(this.name + "会跑")
    }
}

class Dog extends Animal {
    constructor(name: string) {
        super(name);
    }
    eat(): any {//抽象类的子类必须实现抽象类里面的抽象方法
        console.log(this.name + "吃骨头");
    }
}

var d: Animal = new Dog("小狼狗");
d.eat();

class Cat extends Animal {
    constructor(name: string) {
        super(name);
    }
    eat(): any {//抽象类的子类必须实现抽象类里面的抽象方法
        console.log(this.name + "吃老鼠");
    }
}

var c: Animal = new Cat("小花猫");
c.eat();

TypeScript接口