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

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

前言

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

类型断言

• 之前我们在类型保护中使用类型断言!手动去除了null和undefined的情况
• 除了使用!类型断言，我们还有另外一种类型断言的方式
• 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也会给到类型提示

总结

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