ts基础-3.联合类型与类型断言

联合类型

function getNum(num:string|number):number{
    return 1
}


getNum(123)
getNum("354")
let div:HTMLElement|null = document.getElementById("#div")

function clearTimeout(id: number | undefined): void;

类型断言

就是认为将某一种不确定的类型断言为确定的类型

只是在编辑器层面进行的欺骗行为

let img = document.getElementById("#img")

// 报错
img.src = "http://xxx.xxx/img"
let img = document.getElementById("#img") as HTMLImageElement
img.src = "http://xxx.xxx/img"

let img = <HTMLImageElement>document.getElementById("#img")
img.src = "http://xxx.xxx/img"

两种写法

value as Type
<Type>value
function getAny():any{
    return ""
}

let s = (getAny()as string).charAt()
let s = (<string>getAny()).charAt()



<think>嗯,用户想了解TypeScript类型断言的使用场景,还特别要求提供实际例子。从问题看,用户可能是个正在学习TypeScript前端开发者,遇到了需要手动指定类型的情况。这类问题通常出现在处理第三方库或动态数据时,用户需要知道什么时候该"告诉编译器我知道这是什么类型"。之前提供的引用材料很有价值。引用[1]明确了类型断言是开发者主动告诉编译器类型的行为,引用[3]则详细列出了适用场景。用户显然不需要基础语法解释,而是要解决实际编码中的类型困惑。值得注意的难点是区分类型断言类型转换。用户可能混淆这两者,需要强调断言只在编译阶段起作用。另外安全边界也很重要,比如asany的危险性应该特别提醒。示例选择上应该覆盖典型场景:DOM操作(基本但高频)、联合类型窄化(实用技巧)、泛型约束(高级用法)、JSON解析(实际痛点)。每个例子都要让用户感受到"啊这正是我遇到的麻烦"。特别要突出React的示例,因为现在很多TS用户都在用React。用户没问但可能想知道的是类型守卫和断言的配合使用,这个可以放在注意事项里作为延伸。最后要提醒eslint规则,很多人会忽略静态检查的重要性。</think> 以下是关于 TypeScript 类型断言的详细解析及典型使用场景: ### 一、类型断言核心概念 1. **本质** 开发者**主动告知编译器变量类型**的机制(非类型转换),通过断言可跳过 TS类型检查(`as` 或 `<Type>` 语法) 2. **类型推论区别** ![类型断言 vs 类型推论](https://via.placeholder.com/400x150?text=TypeScript+类型系统) 如引用[2]所示: ```typescript let str = "Hello"; // 类型推论为 string ✅ str = 10; // Error ❌ ``` --- ### 二、核心使用场景及代码示例 #### 场景 1:操作 DOM 元素 ```typescript // TS 无法推断具体元素类型 const canvas = document.getElementById(&#39;myCanvas&#39;) as HTMLCanvasElement; const ctx = canvas.getContext(&#39;2d&#39;); // 正确识别 canvas API ✅ ``` #### 场景 2:联合类型窄化 ```typescript interface Fish { swim(): void } interface Bird { fly(): void } function move(pet: Fish | Bird) { // 断言后访问特定方法 if ((pet as Fish).swim) { (pet as Fish).swim(); } } ``` #### 场景 3:泛型约束特定类型 ```typescript function convert<T>(input: any): T { return input as T; // 明确指定返回类型 } const data = convert<string>(apiResponse); // => string 类型 ``` #### 场景 4:跨系统数据兼容 ```typescript // 处理非TS系统的API返回 const apiData = { id: 1, name: "TS" } as unknown as ApiResponse; ``` --- ### 三、最佳实践要点 1. **优先类型守卫** ```typescript if (typeof input === &#39;string&#39;) { /*...*/ } // 比断言更安全 ``` 2. **避免双重断言** ❌ `obj as any as Data` (除非必要) 3. **React 特殊场景** ```tsx const fileInput = useRef<HTMLInputElement>(null); // 组件挂载后断言 useEffect(() => { (fileInput.current as HTMLInputElement).click() }, []) ``` > ⚠️ **注意事项** > - 断言不会运行时类型验证(可能引发运行时错误) > - 优先使用类型守卫或函数重载替代 > - 禁用 `as any`(会完全破坏类型系统) --- ### 四、典型错误案例 ```typescript // 错误断言导致运行时崩溃 const num: string = "123"; const value = (num as unknown as number) + 100; // 实际运行时 NaN ``` --- **相关问题** 1. 类型断言类型转换(Type Conversion)有何本质区别? 2. 如何处理 `as` 断言时的 ESlint 报错 (`@typescript-eslint/no-unsafe-cast`)? 3. 类型断言在 React Hooks(如 `useRef`)中的具体应用场景? > 引用来源: > [1] TypeScript 类型断言原理场景. TS 官方文档扩展 > [2] TypeScript Deep Dive. 类型系统章节 > [3] React with TypeScript Best Practices. Frontend Masters 2023
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值