什么是断言?

简单来说: 就是手动的强行指定数据的类型, 就叫断言

为什么要使用断言

如果我们拿到一个 any unknown 类型的变量, 但是我们明确知道变量中保存的是字符串,此时我们就可以强制的让编译器将这个变量解析为一个字符串类型的变量, 断言之后就能使用字符串的函数了, 如果不断言对于编辑器来说也没有完整的提示

let str: any = "hello typescript";

// 方式一:
let len = (<string>str).length;

// 方式二(推荐):
let len = (str as string).length;

类型断言 & 非空断言

const app = document.querySelector("#app");

// querySelector 这个方法默认返回一个 HTMLElement 或者 null
// 如果我确定这个元素一定是存在的, 就可以使用断言
// 强行指定这个函数的返回值是一个 HTMLDivElement 而不是 null

// 类型断言: as 必须返回某个类型的值
// const app = document.querySelector("#app") as HTMLDivElement;

// 非空断言: ! 代表值不能是 null 或者 undefined 但是可以是其他非空的值
// const app = document.querySelector("#app")!;

DOM 相关断言处理

• DOM 相关类的关系类图

const btn = document.querySelector("#submit-btn") as HTMLButtonElement;
btn.addEventLienter(function (e: PointEvent) {
  console.log(e); // MouseEvent 或 PointEvent
});