使用断言

enum 枚举

不设置值时，值以 0 开始递增 当某个字段设置数值类型的值后，后面的在它基础上递增

enum A {
  b,
  c,
}
enum B {
  b = 1,
  c,
}
enum C {
  b = "xx",
  c = "x",
}

let test = { a: A.c }; // 1 , b的值为0，c的值递增为1
let test2 = { a: B.c }; // 2
let test3 = { a: C.c }; // 'x' ,使用指定内容

as 断言

用户自行判断数据的类型

function one(a: number): string | number {
  return a ? "xxx" : 100;
}

let test = one(100); // 结果为 string | number
let test = one(100) as string; // 结果为 string

const 断言

为表达式推断出它能推断出的最窄或最特定的类型，而不是宽泛的类型 字符串、布尔类型转换为具体值 对象转换为只读属性 数组转换成为只读元组

• 当为变量时转换为变量类型，具体值是转为值类型

let a = "baidu.com";
let b = 100;

let f = [a, b, "xxx", true, 100] as const; // readonly [string, number, "xxx", true, 100]

• 当为对象时，转换为只读属性

let user = { name: "xxx" } as const;
user.name = "xx"; //因为是只读属性，所以不允许设置值

• 当为数组时，转换为 Tuple 元组

let a = "baidu.com";
let b = 100;

let test = [a, b]; // let hd: (string | number)[ ]
let test2 = [a, b] as const; // let hd: readonly [ string ,  number ]
let test3 = <const>[a, b]; // let hd: readonly [ string ,  number ]

test2[1] = "xxx"; //报错，只能是最窄类型即变量 b 的类型 number

解构

function test() {
  let a = "xxx";
  let b = (x: number, y: number): number => x + y;
  return [a, b];
}
let [n, m] = test(); //变量 m 的类型为 string | (() => void)

• 调用时，使用 as 断言

//使用以下类型声明都是可以的
m as Function)(1, 2)
m as (x: number, y: number) => number (1, 5)

• 解构赋值时，使用 as 断言

let [n, m] = test() as [string, (x: number, y: number) => number];

• 函数返回时，使用 as 断言

function test() {
  let a = "xxx";
  let b = (x: number, y: number): number => x + y;
  return [a, b] as [typeof a, typeof b];
}

let [n, m] = test();

• 函数返回时，使用 const 断言

function test() {
  let a = "xxx";
  let b = (): void => {};
  return [a, b] as const;
}

const [x, y] = test(); //变量 y 的类型为 () => void

非空断言

设置 tsconfig.json 的配置项 strictNullChecks 字段为 true 在值后面使用 ! 来声明值非 null

const el: HTMLDivElement = document.querySelector(".app") as HTMLDivElement;
const el: HTMLDivElement = document.querySelector(".app")!;

DOM 类型判断

• 类型判断

const el = document.querySelector(".app"); // el: Element | null
const el = document.querySelector(".app") as HTMLAnchorElement; // const el: HTMLAnchorElement

• 事件监听

const bt = document.querySelector("#bt") as HTMLButtonElement;
bt.addEventListener("click", (e: Event) => {
  e.preventDefault(); //因为设置了 e 的类型，所以会有完善的提示
});