vue3入门27 - typeScript 高级类型-类型断言、类型别名

2,099 阅读2分钟

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

前言

  • 这一节我们来了解下typeScript中高级类型的类型断言和类型别名

类型断言

  • 之前我们在类型保护中使用类型断言!手动去除了nullundefined的情况
  • 除了使用!类型断言,我们还有另外一种类型断言的方式
  • as关键字来声明变量类型,强制将参数转换为具体类型
// 这里我们可以用 as 关键字,告诉typescript 编译器,
// 你没法判断我的代码,但是我本人很清楚,这里我就把它看作是一个 string,你可以给他用 string 的方法。
function getLength(input: string | number): number {
  const str = input as string;
  if (str.length) {
    return str.length;
  } else {
    const number = input as number;
    return number.toString().length;
  }
}

类型别名

  • 类型别名就是给类型起一个别名,让它可以更方便的被重用,它和接口很像,但是可以作用域原始值、联合类型、元组等等你想组合的类型
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver; // 既可以是字符串,也可以是函数
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    }
    else {
        return n();
    }
}
  • 从上面的例子中,我们可以看到,起别名不会新建一个类型,而是创建了一个新的名字来引用那个类型。我们这里使用了联合类型
let sum: (x: number, y: number) => number;
const result = sum(1, 2);
type PlusType = (x: number, y: number) => number;
let sum2: PlusType;
  • 如上所示,我们给相同函数定义,起个别名,赋值给不同的函数进行类型定义。可以提高我们的复用性

字符串字面量类型

  • 字符串字面量类型允许我们指定字符串可以是一个固定值。这种类型可以帮助我们更好地配合联合类型、类型保护、类型别名进行使用。
// 字符串字面量
type Directions = "Up" | "Down" | "Left" | "Right";
let toWhere: Directions = "Up";

function keycode(params: Directions) {
  if(params === 'Up') {
    // ....
  }
  if (params === "Down") {
    // ....
  }
}
  • 比如我们这里,在进行判断时,限制了params只能取"Up" | "Down" | "Left" | "Right"这四种字符串字面量,当判断时,ts也会给到类型提示

image.png

总结

通过这一节我们了解到,类型断言的另一种使用方式as符号,也了解了类型别名的用途。