vue3入门26 - typeScript 高级类型 - 类型保护

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

前言

• 这一节，我们来了解下typeScript中高级类型的类型保护

类型保护

• 当我们定义联合类型是，我们的成员会包含不同类型的情况，当我们想确切了解到这个成员的具体类型，我们就需要通过类型保护来进行检查

typeof

• 最简单的检查方式是使用typeof

function show(visible: boolean, type: string | number) {
  if(typeof type === "number") {
    console.log('数字处理');
  }
  if(typeof type === 'string') {
    console.log('字符串处理');
  }
}

用户自定义类型保护

• typescript将typeof作为了类型保护机制，我们可以像上面那样直接判断，
• 如果没有默认的保护机制，我们就需要通过封装函数来做类型校验

function isNumber(x:any): x is number {
  return typeof x === "number"
}

function isString(x: any): x is string {
  return typeof x === "string";
}

function show(visible: boolean, type: string | number) {
  if (isNumber(type)) {
    console.log("数字处理");
  }
  if (isString(type)) {
    console.log("字符串处理");
  }
}

• 这里的is的意思就是指定参数是具体的类型，才能校验通过。

可选参数和可选属性

• 当我们定义函数时，有些参数我们在执行的时候可以不传，不传的时候参数就是undefined，我们可以通过可选参数来进行标识

function f(x: number, y?: number) {
    return x + (y || 0);
}
f(1, 2);
f(1);
f(1, undefined);
f(1, null); // error, 'null' is not assignable to 'number | undefined'

• 当我们鼠标悬浮在y参数上时，我们可以看到y是一个联合类型，自动加入了undefined
• 所以我们传入null的时候就会报错

• 可选参数也有对应的处理

class C {
    a: number;
    b?: number;
}
let c = new C();
c.a = 12;
c.a = undefined; // error, 'undefined' is not assignable to 'number'
c.b = 13;
c.b = undefined; // ok
c.b = null; // error, 'null' is not assignable to 'number | undefined'

• 我们创建一个类，实例化类之后，可选参数也会自动加入undefined类型

去除null和undefined

• 由于null类型可以和其他类型组合成联合类型，我们就需要使用类型保护来去除null，

function f(sn: string | null): string {
    if (sn == null) {
        return "default";
    }
    else {
        return sn;
    }
}

• 我们也可以通过短路运算符的形式（或）去除null

function f(sn: string | null): string {
    return sn || "default";
}

• 如果以上两种方式，编译器还是不能去除掉null或者undefined,我们可以使用类型断言手动去除，语法是添加!后缀：

function fn(sn: string | null): string {
  return sn!.toString();
}

• 当我们想调用sn的字符串方法是就需要去除null，使用!可以比较简单粗暴的解决报错问题

总结

• 通过这一节，我们了解到，由于我们的参数可以是组合的类型，拥有更多可能性，在开发时为了限制参数为具体类型，我们可以通过类型保护来做对应的判断处理