当前位置:网站首页>TypeScript的泛型和泛型约束
TypeScript的泛型和泛型约束
2022-07-02 05:41:00 【用户体验官大龙】
一、泛型
在使用ts封装一个函数时,由于入参是不固定的,必然参数类型也无法固定,这时就要用到泛型来定义参数类型。泛型可以理解为宽泛的类型,通常用于类和函数。
例1. 类中使用泛型
class Person<T>{
private name: T;
constructor(value: T) {
this.name = value;
}
}
const p = new Person<string>('Dalon')
例2. 函数中使用泛型
function identity<T>(data: T): T {
console.log(data)
return data;
}
const id1 = identity<string>('hey boy!');
const id2 = identity<number>(123456);
例3. 接口中使用泛型
interface Person<T1=string, T2=number> {
name: T1
age: T2
}
const dalon:Person = {
name: 'dalon',
age: 18
}
const tom:Person<string, string> = {
name: 'Tom',
age: '18'
}
例3中的T1和T2泛型添加了默认类型,类似于函数的默认参数。
二、泛型约束
泛型约束即是对泛型的类型进行约束控制,如限制为object类型或指定接口类型。当在函数里使用泛型参数的属性或者方法时,就需要对泛型进行约束。
例1. 通过接口约束
interface Lengthwise {
length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
console.log(arg.length); // 如果没有Lengthwise泛型约束,会报错Error: T doesn't have .length
return arg;
}
例2. object约束
function getKeys<T extends object>(data:T) :string[] {
const keys:Array<string> = Object.keys(data)
return keys
}
上面例2的getKeys方法获取一个对象的所有属性名, 由于Object.keys是object的原型方法,所以要求data也必须是一个object类型。
(完)
参考文献:
边栏推荐
- 3D printer G code command: complete list and tutorial
- Simply encapsulate JS and apply it
- 2022-2-15 learning xiangniuke project - Section 8 check login status
- Minimum value ruler method for the length of continuous subsequences whose sum is not less than s
- 来啦~ 使用 EasyExcel 导出时进行数据转换系列新篇章!
- [golang syntax] be careful with the copy of slices
- Ls1046nfs mount file system
- MySQL foundation --- query (learn MySQL foundation in 1 day)
- Centos8 installation mysql8.0.22 tutorial
- 软件测试基础篇
猜你喜欢
Operator details
A collection of commonly used plug-ins for idea development tools
kmp思想及模板代码
Storage of data
软件测试基础篇
Lingyunguang rushes to the scientific innovation board: the annual accounts receivable reaches 800million. Dachen and Xiaomi are shareholders
Using QA band and bit mask in Google Earth engine
"Original, excellent and vulgar" in operation and maintenance work
Gee: analyze the change of spatial centroid of remote sensing image [centroid acquisition analysis]
“簡單”的無限魔方
随机推荐
h5跳小程序
中小型项目手撸过滤器实现认证与授权
Innovation never stops -- the innovation process of nvisual network visualization platform for Excel import
青训营--数据库实操项目
Gee: use of common mask functions in remote sensing image processing [updatemask]
Fabric. JS gradient
Thread pool batch processing data
6. Network - Foundation
Applet jumps to official account
Balsamiq wireframes free installation
在线音乐播放器app
"Original, excellent and vulgar" in operation and maintenance work
all3dp.com网站中全部Arduino项目(2022.7.1)
Get the details of the next largest number
简单封装 js并应用
线程池概述
RGB infinite cube (advanced version)
Thunder on the ground! Another domestic 5g chip comes out: surpass Huawei and lead the world in performance?
Two implementation methods of delay queue
Conglin environmental protection rushes to the scientific and Technological Innovation Board: it plans to raise 2billion yuan, with an annual profit of more than 200million yuan