Typescript(十一)联合类型和类型守护

联合类型:通俗点说就是一个变量可能有多种类型。

比如:一个人(person)有可能是老师(teacher),也有可能是服务员(waiter),但是不可能同时是老师和服务员。

interface teacher{
    type:string;
    say:()=>{};
}
 
interface waiter{
    type:string;
    run:()=>{};
}
// 调用
function person(animal: waiter | teacher) {}

animal就是一个联合类型,但是现在直接调用animal中的方法的时候会报错:

function person2(animal: Waiter | Teacher) {
  animal.say();
}

因为,其二种接口中的方法即属性可能是不同的。

这个时候,我们就需要传说中的类型保护

一:类型保护-类型断言

类型断言就是通过断言的方式确定传递过来的准确值,比如上面的程序,如果type是teacher,说明他就是老师,这时候就可以通过断言animal as Teacher,然后直接调用say方法,程序就不再报错了。

同样如果type是waiter,说明就是服务员,这时候调用run()方法,就不会报错了。

这就是通过断言的方式进行类型保护。也是最常见的一种类型保护形式。

interface teacher{
    type:string;
    say:()=>{};
}
 
interface waiter{
    type:string;
    run:()=>{};
}
 
/**
 * 类型断言
 * @param animal 
 */
function person1(animal: waiter | teacher) 
{
    // 通过接口中的类型判断
    if (animal.type == 'teacher') 
    {
        (animal as teacher).say();
    }
    else
    {
        (animal as waiter).run();
    }
}
 

二:类型保护-in 语法

使用in来判断接口中是否有当前你要调用的语法。代码如下:

/**
 * in 语法
 * @param animal 
 */
function person2(animal: waiter | teacher) 
{
    // 通过接口中的类型判断
    if ("say" in animal) 
    {
        animal.say();
    }
    else
    {
        animal.run();
    }
}

三:类型保护-typeof语法

先来写一个新的add方法,方法接收两个参数,这两个参数可以是数字number也可以是字符串string,如果我们不做任何的类型保护,只是相加,这时候就会报错。代码如下:

/**
 * typeof 语法
 */
function add(first: string | number,secord:string | number) 
{
    return first + secord; // 这条语句会报错
}

正确的写法如下:

/**
 * typeof 语法
 */
function add(first: string | number,secord:string | number) 
{
    if(typeof first === 'string' || typeof secord === 'string')
    {
         return `${first}${secord}`;
    }
    return first + secord; 
}

四:类型保护-instanceof 语法

比如现在要作类型保护的是一个对象,这时候就可以使用instanceof语法来作。现在先写一个NumberObj的类,代码如下:

class NumberObj {
  count: number;
}

然后我们再写一个addObj的方法,这时候传递过来的参数,可以是任意的object,也可以是NumberObj的实例,然后我们返回相加值,当然不进行类型保护,这段代码一定是错误的。

function addObj(first: object | NumberObj, second: object | NumberObj) {
  return first.count + second.count;
}

报错不要紧,直接使用instanceof语法进行判断一下,就可以解决问题。

function addObj(first: object | NumberObj, second: object | NumberObj) {
  if (first instanceof NumberObj && second instanceof NumberObj) {
    return first.count + second.count;
  }
  return 0;
}

另外要说的是,instanceof 只能用在类上。这节课我大概说了四种类型保护的方式,每种方式都在不同场景中使用(还有一些不太常用的类型保护方式),可能需要自己深刻理解。

有好的建议,请在下方输入你的评论。

欢迎访问个人博客
https://guanchao.site

欢迎访问小程序:

Typescript(十一)联合类型和类型守护

上一篇:java类代码执行顺序


下一篇:C++多态的使用