在TypeScript中，as语法是类型断言的一种形式，用于告诉编译器"我比编译器更了解这个值的类型"。类型断言类似于其他语言中的类型转换，但不会进行特殊的数据检查或解构，它只是编译时的一种类型检查方式。
基本用法
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
与尖括号语法的区别
TypeScript也支持另一种类型断言语法（尖括号语法）：
let strLength: number = (<string>someValue).length;
但as语法在JSX中更为常用，因为尖括号语法会与JSX的语法产生冲突。
使用场景
- 处理any类型：
const unknownObj: any = { name: "Alice" };
const name = (unknownObj as { name: string }).name;
- 类型缩小：
function isString(test: any): test is string {
return typeof test === "string";
}
const maybeString: any = "maybe";
if (isString(maybeString)) {
console.log((maybeString as string).length);
}
- 处理联合类型：
interface Bird {
fly(): void;
layEggs(): void;
}
interface Fish {
swim(): void;
layEggs(): void;
}
function getSmallPet(): Fish | Bird {
// ...
}
let pet = getSmallPet();
if ((pet as Fish).swim) {
(pet as Fish).swim();
}
注意事项
-
不是运行时检查：类型断言只在编译阶段起作用，不会影响运行时的行为。
-
可能导致错误：如果断言错误，可能会导致运行时错误：
const num = 123;
console.log((num as string).length); // 编译通过，但运行时报错
- 双重断言：当类型差异太大时，可以先断言为any，再断言为目标类型：
const str = "hello";
const num = (str as any) as number;
最佳实践
-
尽量避免使用
any结合as，这会失去类型检查的优势 -
优先使用类型守卫(type guards)而不是类型断言
-
在React JSX中必须使用
as语法 -
对于第三方库返回的不确定类型，合理使用类型断言
-
考虑使用类型声明文件(.d.ts)代替频繁的类型断言
与类型声明的区别
类型断言(as)和类型声明(:Type)不同：
- 类型声明是告诉编译器变量应该是什么类型
- 类型断言是告诉编译器变量现在是什么类型
高级用法
- const断言：
let x = "hello" as const; // x的类型是"hello"而不是string
- 非空断言：
function liveDangerously(x?: number | null) {
console.log(x!.toFixed()); // 告诉编译器x不会是null/undefined
}
- 模板字面量类型断言：
type World = "world";
let greet = "hello" as `${string} ${World}`;
类型断言是TypeScript中一个强大的特性，但需要谨慎使用。过度使用类型断言可能会使类型系统失去意义。在大多数情况下，更好的类型设计比类型断言更可取。
