ts中的联合类型和类型保护--- as、in、typeof、instanceof、enum、keyof

话不多说直接看例子

interface Bird{
    fly: Boolean;
    sing: ()=>{}
}

interface Dog{
    fly: Boolean;
    bark: ()=>{}
}
// animal 为联合类型
function trianAnimal(animal: Bird|Dog){
    if (animal.fly){
        // 这里的as 相当于强制类型转换 前端叫类型断言 类型保护
        (animal as Bird).sing()
        // 也可以这样写 和as 等效都是类型断言
        // (<Bird>animal).sing()
    }
    (animal as Dog).bark()
}

// 另一种写法
// 使用in语法做类型保护
function trianAnimal2(animal: Bird|Dog){
    if ("sing" in animal){
        animal.sing()
    }else{
        animal.bark()  // 这样做也不报错，并且有提示
    }
}
// 使用typeof判断类型做类型保护
function add(first: string|number, second: string|number){
    if(typeof first === "string" || typeof second === "string"){
        return `${first}${second}`
    }else{
        return first+second
    }
}

// 使用instanceof 做类型保护
function add2(first: object|aaa, second: object|aaa){
    if(first instanceof aaa && second instanceof aaa){
        return first.count+second.count
    }else{
        return 0
    }
}

keyof

interface Person {
  name: string;
  age: number;
  gender: string;
}

class Teacher {
  constructor(private info: Person) {} 
  // 最初的写法
  // getInfo(key: number|string){
  //   if(key ==='name' ||key ==='age' || key ==='gender'){
  //     return this.info[key];
  //   }
  //   // return this.info[key];  直接写外边没有if判断是会报红的
  // }

  // 较高级的写法
  getInfo<T extends keyof Person>(key: T): Person[T] {
    return this.info[key];
  }
  
}

const teacher = new Teacher({
  name: 'dell',
  age: 18,
  gender: 'male'
});

const test = teacher.getInfo('name');
console.log(test);

enum 枚举类型

enum Status {
    // OFFLINE = 1,
    OFFLINE, // 没赋初值则默认从0开始
    ONLINE,
    DELETED
}
function getResult(status: any) {
  if (status === Status.OFFLINE) {
    return 'offline';
  } else if (status === Status.ONLINE) {
    return 'online';
  } else if (status === Status.DELETED) {
    return 'deleted';
  }
  return 'error';
}

const result = getResult(1);
console.log(result); // 输出结果：online
const result1 = getResult(Status.OFFLINE);
console.log(result1); // 输出结果：offline

enum Status {
    OFFLINE = 1, // 可以看出如果是指定了值则后边的都会默认按照升序赋值
    ONLINE,
    DELETED
}
function getResult(status: any) {
  if (status === Status.OFFLINE) {
    return 'offline';
  } else if (status === Status.ONLINE) {
    return 'online';
  } else if (status === Status.DELETED) {
    return 'deleted';
  }
  return 'error';
}

const result = getResult(1);
console.log(result); // 输出结果：offline
const result1 = getResult(Status.OFFLINE);
console.log(result1); // 输出结果：offline
const result2 = getResult(2);
console.log(result2); // online
console.log(Status.OFFLINE)  // 1
console.log(Status.ONLINE)  // 2
console.log(Status.DELETED) // 3
console.log(Status.OFFLINE, Status[0]); // 1 undefined 注意这时的下标是从1开始的
console.log(Status[1]); // OFFLINE