PS：文章参考了满神的B站TS教程
满神主页

TS 类型断言

类型断言（Type Assertion）是TypeScript中的一种机制，用于告诉编译器某个值的具体类型，当我们比编译器更了解某个值的类型时使用。

1. 类型断言基本概念

1.1 什么是类型断言

• 类型断言类似于其他语言中的类型转换，但是不进行特殊的数据检查和解构
• 它没有运行时的影响，只是在编译阶段起作用
• TypeScript会假设你，已经进行了必须的检查

1.2 类型断言的两种语法

TypeScript提供了两种类型断言的语法：尖括号语法和as语法

// 1. 尖括号语法（在JSX中不可用）
let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length;

// 2. as语法（推荐使用，JSX兼容）
let someValue2: unknown = "this is a string";
let strLength2: number = (someValue2 as string).length;

2. 类型断言的使用场景

2.1 从unknown类型断言到具体类型

// 当我们确定unknown类型的具体类型时
let userInput: unknown = "Hello TypeScript";

// 使用类型断言告诉编译器这是一个字符串
let message: string = userInput as string;
console.log(message.toUpperCase()); // HELLO TYPESCRIPT

2.2 DOM元素类型断言

// 获取DOM元素时，TypeScript只知道它是Element类型
const myCanvas = document.getElementById("main_canvas");
// 此时myCanvas的类型是 HTMLElement | null

// 使用类型断言指定具体的元素类型
const myCanvas2 = document.getElementById("main_canvas") as HTMLCanvasElement;
// 现在可以访问canvas特有的属性和方法
// myCanvas2.getContext('2d');

2.3 联合类型的类型断言

// 当我们确定联合类型中的具体类型时
function getLength(input: string | number): number {
  // 如果我们确定input是字符串
  if (typeof input === 'string') {
    return input.length;
  }
  // 使用类型断言
  return (input as string).length; // 这样做是危险的，仅作演示
}

3. 类型断言的注意事项和限制

3.1 类型断言的安全性

类型断言不会进行运行时检查，使用时需要确保断言的正确性

// 危险的类型断言示例
let someValue: unknown = 42;
let strValue = someValue as string;
// 运行时会出错，因为数字没有toUpperCase方法
// console.log(strValue.toUpperCase()); // 运行时错误

3.2 类型断言的限制

// 类型断言只能断言为更具体的类型或更宽泛的类型
interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

let animal: Animal = { name: "Buddy" };

// 正确：断言为更具体的类型（需要确保对象确实具有这些属性）
let dog = animal as Dog;

// 错误：不能断言为完全不相关的类型
// let num = animal as number; // 编译错误

3.3 双重断言（不推荐）

// 当需要断言为完全不相关的类型时，可以使用双重断言
// 但这是非常危险的做法，应该避免
let animal: Animal = { name: "Buddy" };
let num = (animal as unknown) as number; // 先断言为unknown，再断言为number

4. 类型断言 vs 类型守卫

4.1 类型守卫的安全性

// 类型守卫：运行时检查，更安全
function isString(value: unknown): value is string {
  return typeof value === 'string';
}

let userInput: unknown = "Hello";

// 使用类型守卫
if (isString(userInput)) {
  console.log(userInput.toUpperCase()); // 安全
}

// 使用类型断言
console.log((userInput as string).toUpperCase()); // 可能不安全

4.2 何时使用类型断言

• 当你确定某个值的类型，但TypeScript无法推断时
• 处理DOM元素时
• 处理第三方库返回的类型时
• 从any或unknown类型转换时

4.3 何时使用类型守卫

• 需要运行时类型检查时
• 处理用户输入或外部数据时
• 需要更安全的类型缩窄时

5. 实际应用示例

5.1 处理API响应

interface User {
  id: number;
  name: string;
  email: string;
}

// 模拟API响应
async function fetchUser(): Promise<unknown> {
  // 实际中这里会是真正的API调用
  return { id: 1, name: "John", email: "john@example.com" };
}

// 使用类型断言处理API响应
async function getUser(): Promise<User> {
  const response = await fetchUser();
  return response as User; // 断言为User类型
}

5.2 处理事件对象

// 处理表单提交事件
function handleSubmit(event: Event) {
  event.preventDefault();

  // 断言为更具体的事件类型
  const formEvent = event as SubmitEvent;
  const form = formEvent.target as HTMLFormElement;

  // 现在可以安全地访问表单属性
  const formData = new FormData(form);
}

6. 最佳实践

6.1 优先使用类型守卫

// 推荐：使用类型守卫
function processValue(value: unknown) {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  if (typeof value === 'number') {
    return value.toFixed(2);
  }
  throw new Error('Unsupported type');
}

// 不推荐：直接使用类型断言
function processValueUnsafe(value: unknown) {
  return (value as string).toUpperCase(); // 可能运行时出错
}

6.2 使用as语法而不是尖括号语法

// 推荐：使用as语法（JSX兼容）
let value = someUnknownValue as string;

// 不推荐：尖括号语法（在JSX中不可用）
let value2 = <string>someUnknownValue;

6.3 添加运行时检查

// 结合类型断言和运行时检查
function assertIsString(value: unknown): asserts value is string {
  if (typeof value !== 'string') {
    throw new Error('Expected string');
  }
}

function processString(input: unknown) {
  assertIsString(input); // 运行时检查
  // 现在TypeScript知道input是string类型
  return input.toUpperCase();
}

创作不易，请多支持
写的会有差别，大家也可以参考：

• 阮一峰老师的TS教程
• TS官网