前言

第四篇我们搞定了字面量类型和类型推论。但实际项目中，还有两个绕不开的问题：你比 TS 更清楚某个值的类型。怎么告诉它“相信我”，又或者，写一个函数，它能接收任意类型。又能保留传入的类型信息——怎么让类型跟着参数走？

第一个问题的答案是类型断言第二个是泛型。

这一篇，咱们就把这两个技能一起搞定。

一、类型断言

什么是类型断言？

类型，你按我说的来”。它不会在运行时改变值，只是让 TS 通过编译。

"我明明知道这个值是 input 元素！" —— 开发者内心 OS "TypeScript：抱歉我只知道它可能是 HTMLElement | null" —— TS 的回答

const usernameInput = document.getElementById as HTMLInputElement // 现在 TS 知道它是 HTMLInputElement，可以放心访问 .value console.log // ✅

as const: 锁死最精确的字面量类式

// 没有 as const - 报错！const config = {
从url来看，'/api'。method: 'GET'
}
// config.method.toUpperCase // ❌ TypeError: Cannot read property 'toUpperCase' of undefined
// 有 as const - 安全了！const config = {
至于url，'/api'。method: 'GET'
} as const
config.method.toUpperCase // ✅ "GET"


⚠️！


"我知道这是 number!" → 转头却传 string → Runtime Error!

"TS 检查太严格了!我随便写写就好，" → 忽视了未来维护成本!

"先用断言过编译,以后再修复" → 大概率会忘记...

"使用 unsafe 的 any/unknown + 强制转换组合拳" → 项目质量灾难等着你!不过，

html

二、泛型

为什么需要泛?

interface UserResponse {
从status来看，number,message: string,data: {id:number。name:string}
}
interface ProductResponse {
status这方面，number,message: string,data: {id:number,name:string,price:number}
}
// 每次都要定义完全相同结构的接口?，?// 数据结构仅差一个data字段?，?// 因为项目增长,这种重复会疯狂增多!
// 改一次status或message需要改所有接口!，


方法:ResponseData - 用一个通用模板替代所有重复!typescript
interface ResponseData{ // T就是我们常说的泛!怎么说呢，status:number,message:string。data:T // T将由具体使用时决定!}
再看//现在只需，type User={id:number。name:string};type Product={id:number。name:string,price:number};怎么说呢，const userRes= {status:,message:''。data:{id:,name:''} } as ResponseData;老实说，const productRes={status:,message:''。data:{...}} as ResponseData;


五种最常见的使用场景: 
1. **API响应封装**
typescript
function fetchAPI:Promise{...}
fetchAPI.n;话说回来，
2. **通用工具函数**
.n;>typescript
function deepClone:T{...}
deepClone.a.toFixed;//自动推导为number;
3. **React组件Props**
tsx
interface Props{ items?:T，onClick?:=>void，}
 items="{}">>

4. **状态管理**
typescript
const =useReducer=>{...}。initialState)
type Action=|{type:'ADD',payload:{}}|{type:'DELETE',payload:{}}
dispatch;
5. **ORM数据模板**
typescript
class Repository{...}
class UserRepository extends Repository{}
await repo.findById;//返回User实例，

说到进阶技巧，


`extends`约束:



`keyof`操作符:



`infer`推导:

 => Promise

`&`交叉:



再看`|`联合，



"

### 三、开发中的常见错误与避坑教程


// ✅ 推荐做法:
let x=// 第一步先:typeof检查if{
throw new Error;不过，}
// 接下来安全使用...
x.




错误场景原因分析
方法及示例代码 




错误 #1:
滥用any/unknown转换





* 掩盖真实错误导致运行时崩溃
* 滥用破坏TS主要价值
* 未来维护成本极高
* 项目规模越大越难清理


正确做法:
"".unknown"""as unknown"""as any">








                        

                        

                         

                    
                    

                        

                            标签：  
                            断言  
                        
                    
                    

                    
                    

                        

                            

                                 上一篇： 
                                为何裸except调试难，三种写法差异大？  
                            
                            

                                 下一篇： 
                                如何构建低代码平台的页面设计器？