2.8 类型断言 - 全栈应用开发修炼手册课程

🎯 学习目标

理解类型断言的概念和语法
掌握两种断言语法的使用
学会正确使用类型断言的场景
了解类型断言的风险和注意事项

📝 类型断言语法

TypeScript 提供两种类型断言语法：

// 语法一：尖括号语法
let value: any = 'hello world';
let length1: number = (<string>value).length;

// 语法二：as 语法（推荐）
let length2: number = (value as string).length;

// JSX 中只能使用 as 语法
// let element = <string>value;  // 在 JSX 中会被误认为是 JSX 标签
      

💡

推荐使用 as

推荐使用 as 语法，因为尖括号语法在 JSX/TSX 文件中会产生歧义。

💻 常见使用场景

1. 缩小类型范围

interface User {
  name: string;
  age: number;
}

let data: unknown = { name: 'Alice', age: 25 };

// 使用类型断言
let user = data as User;
console.log(user.name);  // Alice
      

2. DOM 元素类型

// 获取 DOM 元素并断言类型
const input = document.querySelector('#myInput') as HTMLInputElement;
console.log(input.value);

// 事件处理
const handleClick = (e: Event) => {
  const target = e.target as HTMLButtonElement;
  console.log(target.textContent);
};
      

3. 联合类型断言

type StringOrNumber = string | number;

let value: StringOrNumber = 'hello';

// 断言为具体类型
let str = value as string;
let num = value as number;  // 运行时可能出错
      

⚠️ 断言风险

// 危险示例：类型断言不进行运行时检查
let data: any = 'not an object';

interface User {
  name: string;
}

// 编译通过，运行时出错
let user = data as User;
console.log(user.name);  // undefined，可能引发错误

// 更安全的做法：使用类型守卫
function isUser(data: unknown): data is User {
  return typeof data === 'object' && data !== null && 'name' in data;
}

if (isUser(data)) {
  console.log(data.name);
}
      

⚠️

类型断言警告

类型断言会绕过 TypeScript 的类型检查，如果断言错误，可能导致运行时错误。应尽量使用类型守卫代替断言。

🔒 非空断言

// 非空断言操作符 !
interface User {
  name: string;
  email?: string;
}

let user: User = { name: 'Alice' };

// 普通：可能为 undefined
// let email: string = user.email;  // Error

// 非空断言：告诉 TypeScript 该值不为 null/undefined
let email: string = user.email!;  // OK

// 常用于 DOM 操作
const element = document.getElementById('app')!;
element.textContent = 'Hello';
      

📊 断言方式对比

方式	语法	安全性	使用场景
类型断言	as Type 或 <Type>	低	确定类型时使用
非空断言	!	中	确定值不为空
类型守卫	typeof、instanceof 等	高	运行时检查

📝 本节小结

✅

• 使用 as 或 <> 进行类型断言
• 推荐使用 as 语法，兼容 JSX
• 类型断言绕过检查，需谨慎使用
• 优先使用类型守卫进行类型收窄