多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
>[success] # extends 泛型约束 ~~~ 1.泛型现在似乎可以是任何类型,但实际开发可能往往不是任意类型,需要给以一个范围,这种就叫'泛型约束'关键字('extends') 泛型是具有当前指定的属性写法上'<T extends xx>' 2.注意泛型约束是约束泛型的 在<> 这里写 ~~~ >[danger] ##### 泛型约束 ~~~ 1.限定了泛型入参只能是 number | string | boolean 的子集 ~~~ ~~~ function reflectSpecified<P extends number | string | boolean>(param: P):P { return param; } reflectSpecified('string'); // ok reflectSpecified(1); // ok reflectSpecified(true); // ok reflectSpecified(null); // ts(2345) 'null' 不能赋予类型 'number | string | boolean' ~~~ ~~~ interface ReduxModelSpecified<State extends { id: number; name: string }> { state: State } type ComputedReduxModel1 = ReduxModelSpecified<{ id: number; name: string; }>; // ok type ComputedReduxModel2 = ReduxModelSpecified<{ id: number; name: string; age: number; }>; // ok type ComputedReduxModel3 = ReduxModelSpecified<{ id: string; name: number; }>; // ts(2344) type ComputedReduxModel4 = ReduxModelSpecified<{ id: number;}>; // ts(2344) ~~~ >[danger] ##### 泛型约束结合索引类型的使用 ~~~ 1.看下面案例想 获取对象value 输出出来 type Info = { name:string age:number } function getVal(obj:Info, key:any) { return obj[key] // 报错 } ~~~ ![](https://img.kancloud.cn/25/99/2599f2ee01c774e5002910a712b04141_954x235.png) * 正确写法可以利用keyof 吧传入的对象的属性类型取出生成一个联合类型 ~~~ type Info = { name:string age:number } function getVal(obj:Info, key:keyof Info) { return obj[key] } ~~~ * 使用泛型 ~~~ 1.利用'索引类型 keyof T 把传入的对象的属性类型取出生成一个联合类型',再用'extends 做约束' ~~~ ~~~ // 注意泛型约束是约束泛型的 在<> 这里写 type GetVal = <T extends object, K extends keyof T>(obj: T, key: K) => string function getVal(obj: any, key: any): GetVal { return obj[key] } getVal({ name: 'w' }, 'name') ~~~ >[danger] ##### 多重约束 ~~~ interface FirstInterface { doSomething(): number } interface SecondInterface { doSomethingElse(): string } // // interface ChildInterface extends FirstInterface, SecondInterface {} 二者等同 class Demo<T extends FirstInterface & SecondInterface> { private genericProperty: T useT() { this.genericProperty.doSomething() // ok this.genericProperty.doSomethingElse() // ok } } ~~~