微商怎么做 和淘宝网站一样吗,杭州网站设计,成都微信小程序推广培训公司,局域网站建设教程越来越多的团队开始使用 TS 写工程项目#xff0c; TS 的优缺点也不在此赘述#xff0c;相信大家都听的很多了。平时对 TS 说了解#xff0c;仔细思考了解的也不深#xff0c;借机重新看了 TS 文档#xff0c;边学习边分享#xff0c;提升对 TS 的认知的同时#xff0c;…越来越多的团队开始使用 TS 写工程项目 TS 的优缺点也不在此赘述相信大家都听的很多了。平时对 TS 说了解仔细思考了解的也不深借机重新看了 TS 文档边学习边分享提升对 TS 的认知的同时也希望能在平时的工作中能用上少写一点 any。泛型A major part of software engineering is building components that not only have well-defined and consistent APIs, but are also reusable. Components that are capable of working on the data of today as well as the data of tomorrow will give you the most flexible capabilities for building up large software systems.In languages like C# and Java, one of the main tools in the toolbox for creating reusable components is generics, that is, being able to create a component that can work over a variety of types rather than a single one. This allows users to consume these components and use their own types.我们工作的大部分内容是构建组件定义有效、一致并且可复用的API很重要。组件能够处理当前的数据又能考虑兼容很多未来的数据这样的组件能提高工作效率也能在构建软件系统的时候提供非常灵活的能力。▐ 基本使用通过泛型可以定义通用的数据结构增加 TypeScript 代码中类型的通用性。处理函数先看一个具体的例子感受一下泛型的应用。首先定一个 log 函数功能很简单把传入的参数直接 return 就行函数参数类型是 string那么返回值也是 string 类型。function log(arg: string): string {return arg;
}当其他地方也想使用这个函数但是参数入参数类型是 number这个时候我们也许可以这么做function log(arg: string number): string | number {return arg;
}当有更多的地方要使用这个函数的时候那这个函数的参数类型定义和返回值类型定义将会变得无比冗长或者可能就直接使用 any 来解决当使用 any 的时候就失去了使用 TS 最初的初心了。这个时候泛型出现了能解决输入输出一致的问题我们可以这样写function logT(arg: T): T {return arg;
}这个 log 函数通过泛型来约束输入输出一致性的问题把动态的泛型类型抛给函数的使用者我们只需要保证输入输出的一致性就可以还能支持任何类型。泛型中的 T 就像一个占位符或者说一个变量在使用的时候把定义的类型像参数一样传入就可以了。我们在使用的时候可以有两种方式指定类型。第一是直接定义要使用的类型第二是默认 TS 的类型推断TS自动推导出要传入的类型logstring(log) // 定义 T 为 stringprint(log) // TS 的类型推断自动推导类型为 T 的类型为 string默认参数在 JS 中对于一个函数入参可以使用默认参数来简化当没有传参数时候的默认值在 TS 中我们可以这样使用function logT string(arg: T): T {return arg;
}当没有传泛型参数的时候 T 的默认类型是 string 类型就如果 JS 中的函数默认参数类似的用法多个参数当函数中有多个参数的时候可以这样使用function logT, U(type: T, info: U): [T, U] {return [type, info];
}通过在泛型定义多个对应位置的类型就可以获取到相应的泛型传参来对输入输出做一些处理。函数返回值泛型不仅可以很方便地约束函数的参数类型还可以用在函数执行副作用操作的时候。发送请求是我们使用的很多的操作我们会有一个通用的发送请求的异步方法请求不同的 url 会返回不同的类型数据那么我们可以这样使用。function requestT(url: string): PromiseT {return fetch(url).then(res res.json())
}interface IUserInfo {name: string;age: number;avatar: string;gender: male | female;city: string;
}requestIUserInfo(/getuserinfo).then(res {console.log(res)
});这个时候返回的数据 TS 就会识别出 res 的类型对解下来的代码编写会有很大帮助。▐ 应用上面的一些小例子我们对泛型有了一些了解在平时我们可以这样使用。泛型约束类定一个栈有出栈和入栈两个方法规定了出栈和入栈的元素类型必须一致。class StackT {private data: T[] []push(item:T) {return this.data.push(item)}pop(): T | undefined {return this.data.pop()}
}在使用的使用传入类型生成实例在调用对应的出栈和入栈方法的时候入参数类型不对就会报错从而约束了栈的元素类型。const test1 new Stacknumber()
const test2 new Stackstring()泛型约束接口function requestT(url: string): PromiseT {return fetch(url).then(res res.json())
}interface IUserInfoT {name: string;age: number;avatar: string;gender: male | female;address: T;
}requestIUserInfostring(/getuserinfo).then(res {console.log(res)
});这样使用 IUserInfo 的 address 的类型就是 string让 interface 更灵活。PickPck 是 TS 内置的函数作用是挑选出对象类型 T 中 U 对应的属性和类型创建一个新的对象类型。type PickT, K extends keyof T {[P in K]: T[P];
};interface IUserInfo {name: string;age: number;avatar: string;gender: male | female;
}type Test PickIUserInfo, name // { name: string }Omit与Pick的功能是互补的挑选出对象类型 T 中不在 U 中的属性和类型创建一个新的对象类型。type OmitT, K extends keyof any PickT, Excludekeyof T, K;interface IUserInfo {name: string;age: number;avatar: string;gender: male | female;
}type Test OmitIUserInfo, name | avatar | gender // { age: number }▐ 总结泛型从字面上来理解就是一般的广泛的具有通用性的。泛型是指在定义函数、接口或类的时候不预先指定具体类型而是在使用的时候再指定类型。泛型中的 T 就像一个占位符、或者说一个变量在使用的时候可以把定义的类型像参数一样传入它可以原封不动地输出。extends本文主要整理 extends 关键字在 typescript中的相关用法平时在看一些复杂的 TS 类型的时候经常会看到使用 extends 这个关键字▐ 继承类型TS 中的 extends 关键字第一个用法可以理解成 JS 中相似的用法继承类型。interface IName { name: string;
}interface IGender {gender: string;
}interface IPerson extends IName, IGender {age: number;
}const corgi: IPerson {name: corgi,gender: female,age: 18,
}以上示例中IName 和 IGender 两个接口分别定义了 name 属性和 gender 属性IPerson 则使用extends 关键字多重继承的方式继承了 IName 和 IGender同时定义了自己的属性age此时 IPerson 除了自己的属性外还同时继承了 IName 和 IGender 的属性。▐ 条件判断When the type on the left of the extends is assignable to the one on the right, then you’ll get the type in the first branch (the “true” branch); otherwise you’ll get the type in the latter branch (the “false” branch).当 extends 左边的类型可以赋值给右边的类型时你会在第一个分支中获取获得这个类型true否你会在第二个个分支中获得这个类型false普通条件类型先来直接看个例子// 示例1
interface IAnimal {name: string;
}interface IDog extends IAnimal {color: string;
}// A的类型为string
type Test IDog extends IAnimal ? string : number;extends 的条件判断和 JS 中的三元表达式很类似如果问号前面的条件为真就把 string 类型赋值给 A否则就把 number 类型赋值给 A。那么问号前面的条件判断真假的逻辑是什么呢就像上面的那段英文描述一样当extends 左边的类型可以赋值给右边的类型的时候就会真否则为假。在上面的例子中IDog 是 IAnimal 的子类子类比父类的限制更多如果能满足子类的条件约束就一定能满足父类的条件约束IDog 类型的值可以满足 IAnimal 类型判断结果为真Test 的类型为 string。再来一个例子// 示例2
interface I1 {name: string
}interface I2 {name: stringage: number
}
// A的类型为string
type Test I2 extends I1 ? string : number这个例子代入上面的解法来看就是能满足 I2 类型约束的值也满足 I1 类型约束判断结果为真Test 的类型为 string。多看几个例子type Test1 x extends x ? true : false; // true
type Test2 x extends y ? true : false // false
type Test3 100 extends 100 ? true : false // true
type Test4 200 extends 100 ? true : false // false
type Test5 {} extends {name:string} ? true : false // false
type Test6 {name:string} extends {} ? true : false // true按照上面的解释能够很好的解释出最后的结果。分配条件类型再多看几个例子type Test1 x extends x ? string : number; // string
type Test2 x | y extends x ? string : number; // numbertype PT T extends x ? string : number;
type Test3 Px | y // tring | numbertype PT x extends T ? string : number;
type Test4 Px | y // tring这里就先把最后的结果直接给出来了看到 Test1、Test2 和 Test4 还能理解但是 Test3 的结果为什么就是 string nunber这个类型了呢同样的按照泛型传参数按照直觉来说Test3 和 Test2 应该是一样的结果为什么结果差异这么大呢这里导致结果和直觉不一样的原因就是所谓的分配条件类型。When conditional types act on a generic type, they become distributive when given a union type当 extends 前面的参数是一个泛型类型当传入的参数是一个联合类型的时候就是使用分配律计算最后的结果分配律就是我们从数学中学到的分配律。把联合类型中的每个类型代入条件判断得到每个类型的结果再把每个类型的结果联合起来得到最后的类型结果。那么就可以按照这个解法来代入 Test3 的解释原因extends 前面的参数 T 是泛型参数Test3 中 泛型代入的的 x | y这个联合类型这个时候就触发了分配条件类型来使用分配律x extends x ? string : number; // string
y extends x ? string : number; // number
type Test3 string | number按照分配条件来看最后的结果恍然大悟总之要触发分配条件类型要满足两个条件第一extends 前面的参数是泛型类型第二参数是联合类型。条件分配类型是系统默认的行为那么在某些需求不想要出发条件分配类型应该怎么办呢看下面的例子type PT [T] extends [x] ? string : number;
type Test Px | y // number这个使用使用了[]这个符号把泛型类型参数包起来这个时候 extends 前面的参数就变成这个样子[x | y]不满足触发分配条件类型的条件按照普通条件来判断得到最后的结果为 number。never来个例子看看// never是所有类型的子类型
type Test1 never extends x ? string : number; // stringtype PT T extends x ? string : number;
type Test2 Pnever // never上面直接给出了最后的结果但是为什么看起来 Test2 最后的结果又和直觉中不太一样never 不是联合类型直接代入条件类型之后按理来说 Test2 和 Test1 的结果应该一样才对。事实上never 被认为是空的联合类型也就是没有任何项的联合类型所以还是满足上面的分配条件类型因为没有任何联合项可以分配所以PT根本就没有执行就和永远没有返回的函数一样属于 never 类型。按照上面的条件可以这样子来阻止分配条件类型。type PT [T] extends [x] ? string : number;
type Test Pnever // string▐ 应用Excludetype ExcludeT, U T extends U ? never : T;Exclude 是 TS 内置的应用方法作用是从第一个联合类型参数 T 中把第二个联合类型参数 U 出现的联合项去掉。type Test ExcludeA | B, A // B其实就是应用了分配条件类型type Test ExcludeA, A type Test ExcludeB, Atype Test A extends A ? never : A B extends A ? never : B
type Test never B
type Test BExtracttype ExcludeT, U T extends U ? T : never;Extract 是 TS 内置的应用方法作用是从第二个联合类型参数 U 中把第一个联合类型参数 T 出现的联合项提取出来。type Test ExcludeA | B, A // A其实就是应用了分配条件类型。type Test ExcludeA, A type Test ExcludeB, A
type Test A extends A ? A : never B extends A ? B : never
type Test A never
type Test A▐ 总结在 typescript 中的 extends 关键字主要用法就是继承类型结合三元表达式来完成更多的类似函数的应用方法在三元表达式中还要注意分配条件类型的应用。文章为笔者在学习过程中做的笔记如果有误欢迎指正。团队介绍我们是大淘宝技术行业与商家技术团队是消费电子线下业务主要面向线下门店的分销、经营、零售相关的产品。技术侧属于大淘宝技术前端团队技术产品服务阿里巴巴整个集团亿万级别的业务。¤ 拓展阅读 ¤3DXR技术 | 终端技术 | 音视频技术服务端技术 | 技术质量 | 数据算法
