typescript语法精讲二(笔记)

-类型缩小

缩小比声明时更小的类型，整个过程称之为缩小

-平等缩小

使用switch或者相等的一些运算符来表达相等性(比如：===、!==、== and !=)

type sendUser = 'Bob' | 'John' | 'James';

function setSendMessage(user: sendUser) {
    switch (user) {
        case 'Bob':
            console.log('调用了Bob信件模板');
            break;
        case 'John':
            console.log('调用了John信件模板');
            break;
        case 'James':
            console.log('调用了James信件模板');
            break;
        default:
            break;
    }
}

setSendMessage('John');

-instanceof运算符

js有一个运算符来检查一个值是否是另外一个值的实例。

function handover(str: Date | string) {
    if (str instanceof Date) {
        console.log(str.toLocaleTimeString());
    } else {
        console.log(str.toLocaleUpperCase());
    }
}

handover(new Date());  // 上午9:02:24
handover('abc');  // ABC

-in运算符

in运算符用于确定对象是否具有带名称的属性：in运算符
如果指定的属性在指定的对象或其原型链中，则in运算符返回true

type Shelf = {
    shelfNo: string,
    locationId: string
}

type Cage = {
    cageNo: string,
    handoverDate: Date
}

function handover(material: Shelf | Cage) {
    if ('handoverDate' in material) {
        console.log(material.handoverDate.toLocaleTimeString());
    } else {
        console.log('打印地标编号: ', material.locationId);
    }
}

handover({ cageNo: 'SC1020', handoverDate: new Date()});  // 上午9:12:11
handover({ shelfNo: 'SP1021', locationId: 'C10'});  // 打印地标编号:  C10

-函数参数的可选类型

可以指定某个参数是可选的：

function info(name: string, age?: number) {
  console.log(name, age);
}

-函数的默认参数

function handover(str: string, date: Date = new Date()) {
    console.log("str: ", str.toUpperCase(), date.toLocaleTimeString());
}

handover('abc');  // str:  ABC 上午9:22:32

-剩余参数

function handover(...str: string[]): void {
    let s: string = '';
    for (const iterator of str) {
        s += iterator.toString();
    }
    console.log(s);
}

handover('a', 'b', 'c', 'd'); // abcd

-指定this类型

type NameType = {
  name: string
}

function getInfo(this: NameType) {
    console.log(this.name);
}

-函数重载

function sum(a1: number, a2: number): number;
function sum(a1: string, a2: string): string;
function sum(a1: any, a2: any): any {
    console.log(a1 + a2);
}

sum('a', 'b');  // ab
sum(1, 2);   // 3

-联合类型和重载

// 联合类型
function sum(str : string | string[]): number {
    return str.length;
}

console.log(sum('abc'));

-类的定义

-使用class关键字来定义一个类
-可以声明一些类的属性：在类的内部声明类的属性以及对应的类型
-类可以有自己的构造函数constructor，当我们通过new关键字创建一个实例时，构造函数会被调用
-构造函数不需要返回任何值，默认返回当前创建出来的实例
-类中可以有自己的函数，定义的函数也被称之为方法

-类的继承

继承是面向对象的其中一大特性，通常使用关键字extends关键字来继承，子类使用super来访问父类;
子类有自己的属性和方法，并且会继承父类的方法和属性，在子类中使用super()来调用父类的

class Parent {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

class Children extends Parent {
    sno: number;
    constructor(sno: number, name: string, age: number) {
        super(name, age);
        this.sno = sno;
    }

    print() {
        console.log('打印name： ', this.name);
    }
}

const child = new Children(1011, 'kychen', 20);
child.print();  // 打印name：  kychen

-类的成员修饰符

类的属性和方法支持三种修饰符：public、private和protected。
public修饰的是在任何地方可见、公有的属性或者方法
，默认编写的属性就是public的;
private修饰的是仅在同一类中可见、私有的属性和方法;
protected修饰的是仅在类自身以及子类中可见、受保护的属性或者方法;

class Person {
  protected name: string;
  
  constructor(name: string) {
    this.name = name;
  }
}

class Student extends Person {
  constructor(name: string) {
      super(name)
  }

  running() {
    console.log(this.name);
  }
}

-只读属性readonly

如果有一个属性我们不希望外界可以任意的修改，只希望确定值后直接使用，那么可以使用readonly;

class Person {
  readonly name: string;
  constructor(name: string) {
    this.name = name;
  }
}

const p = new Person('abc');
console.log(p.name);

export {}

-getters/setters

在前面的私有属性中，不能直接去访问，或者某些属性我们想要监听它的获取(getter)和设置(setter)的过程，这时需要存取器。

class Person {
    private _name: string = '';

    set name(newName) {
        this._name = newName;
    }

    get name() {
        return this._name;
    }

    constructor(name: string) {
        this.name = name;
    }
}

const p = new Person('abc');
p.name = 'def';
console.log(p.name);  // def