TS泛型坑,编译懵!
💓 博客主页:瑕疵的CSDN主页
📝 Gitee主页:瑕疵的gitee主页
⏩ 文章专栏:《热点资讯》
TS泛型坑,编译懵!
目录
昨天写个工具函数,想从对象里取属性。一编译,直接报错:Property 'key' does not exist on type 'T'。懵了,这不就是个普通取属性吗?
错误代码:
// 想从obj取key,但T没约束functiongetProperty<T>(obj:T,key:string){returnobj[key];// 编译器:Property 'key' does not exist on type 'T'}核心根源:
T是任意类型。编译器不知道key是不是obj的属性。它怕你访问不存在的属性,所以直接报错。就像你让一个陌生人去开保险箱,不给钥匙还说“试试看”。
正确代码:
// K extends keyof T:确保key是T的合法属性functiongetProperty<T,KextendskeyofT>(obj:T,key:K){returnobj[key];// 编译器:放心,key在T里}对比关键:
| 错误写法 | 正确写法 |
|---|---|
T无约束 | K extends keyof T约束 |
key: string可能无效 | key: K编译器自动检查 |
| 编译报错 | 编译通过 |
实际用例:
constuser={id:1,name:'Alice'};getProperty(user,'name');// ✅ 正确getProperty(user,'age');// ❌ 编译报错!age不在user里避坑总结:
泛型函数里,只要涉及对象属性访问,必须用keyof约束。别想偷懒写string,编译器会给你整出一堆错误。我昨天就栽这儿,debug到凌晨三点。记住:
keyof不是装饰品,是救命稻草- 问自己:
key是T的属性吗?不是?就加extends keyof - 类型检查不是来坑你的,是来防你坑自己的
下次写泛型,先写keyof。省的半夜被编译器怼。
