什么是泛型,什么是泛型约束

简介: v

在TypeScript中,泛型是一种允许你编写可重用的代码,同时适应各种类型的强大工具。

泛型的主要目标是提高类型安全性和代码重用性,同时保持类型的明确性。

以下是一些具体的使用例子:

泛型函数:你可以定义一个接受某种类型参数的函数,然后这个函数可以操作那个类型的任何值。例如:

typescriptfunction printValue<T>(value: T): void {
console.log(value);
}
printValue(10); // 输出:10
printValue("Hello"); // 输出:"Hello"

泛型类:你可以定义一个类,该类的类型参数可以是任何类型。例如:

typescriptclass Box<T> {
content: T;
constructor(value: T) {
this.content = value;
}
getValue(): T {
return this.content;
}
}
let integerBox = new Box<number>(10);
let stringBox = new Box<string>("Hello");
console.log(integerBox.getValue()); // 输出:10
console.log(stringBox.getValue()); // 输出:"Hello"

泛型接口:你可以定义一个接口,该接口的类型参数可以是任何类型。例如:

typescriptinterface BoxInterface<T> {
content: T;
getValue(): T;
}
class Box<T> implements BoxInterface<T> {
content: T;
constructor(value: T) {
this.content = value;
}
getValue(): T {
return this.content;
}
}

以上的 <T> 就是泛型标记,表示这个类、函数或接口是泛型的,可以接受一个或多个类型参数。使用时可以用实际的类型来替代 <T>,如 <string><number> 等。

在TypeScript中,泛型约束是一种限制泛型类型参数的方式,以便更精确地指定泛型代码的适用范围。

泛型约束可以通过在泛型类型参数后面添加一个约束类型来实现。约束类型可以是一个内置类型、一个类类型或者一个接口类型。

以下是一些泛型约束的使用例子:

约束为内置类型:你可以约束泛型类型参数为某些内置类型。例如:

typescriptfunction printValue(value: number | string): void {
console.log(value);
}

在这个例子中,printValue 函数的泛型类型参数被约束为 numberstring 类型。约束为类类型:你可以约束泛型类型参数为一个类类型。例如:

typescriptclass Animal {
speak(): void {
console.log("Animal speaks");
}
}
function printValue(value: Animal): void {
console.log(value);
}

在这个例子中,printValue 函数的泛型类型参数被约束为 Animal 类类型。

约束为接口类型:你可以约束泛型类型参数为一个接口类型。例如:

typescriptinterface Shape {
area(): number;
}
function printValue(value: Shape): void {
console.log(value);
}

在这个例子中,printValue 函数的泛型类型参数被约束为 Shape 接口类型。

通过使用泛型约束,你可以确保泛型代码适用于特定类型的值,并且可以在编译时捕获潜在的类型错误。

相关文章
|
Kubernetes 容器
Kubernetes部署Dashboard(WEB UI管理界面)
Kubernetes部署Dashboard(WEB UI管理界面)
Kubernetes部署Dashboard(WEB UI管理界面)
|
编解码 小程序 前端开发
微信小程序自定义顶部导航栏并适配不同机型
自定义导航栏是小程序中不可或缺的一个组件,它能够为用户提供清晰的页面结构和功能指引,提高用户体验和操作效率。在实现自定义导航栏时,需要考虑不同机型的适配问题,确保导航栏在不同设备上都能正常显示和使用。同时,还需要注意导航栏的设计风格与页面整体风格的一致性,以及导航项的布局和交互方式等细节问题。
821 4
微信小程序自定义顶部导航栏并适配不同机型
|
小程序 网络安全 Windows
swoole(二)ws与wss的区别
关于ws与wss的区别这里简单的说一下我目前的见解。 如果你有更多的见解欢迎在下方留言讨论。 最简单的理解就是: 服务器上服务端用的是:websocket协议(支持客户端的ws访问) 服务器上服务端用的是:websocket协议+TLS(支持客户端的wss访问) 客户端上用的是: ws协议或者wss协议 Wss与ws其实就和http与https的关系,wss需要验证域名证书,ws不需要验证域名证书。 这个其实都不重要。我们在开发的时候关系不是很大。 下边的才是我要说的重点: Ws链接可以使用IP+端口号的形式访问。 Wss链接只能使用域名的形式访问,因为服务器端需要通过域名来找对应的ssl证书
1338 0
|
API
.net core工具组件系列之Autofac—— 第二篇:Autofac的3种依赖注入方式(构造函数注入、属性注入和方法注入),以及在过滤器里面实现依赖注入
本篇文章接前一篇,建议可以先看前篇文章,再看本文,会有更好的效果。前一篇跳转链接:https://www.cnblogs.com/weskynet/p/15046999.html
1122 0
.net core工具组件系列之Autofac—— 第二篇:Autofac的3种依赖注入方式(构造函数注入、属性注入和方法注入),以及在过滤器里面实现依赖注入
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
930 2
|
JavaScript
Vue2.0、Vue3.0分别使用v-model封装组件[Vue必会]
本文介绍了在Vue 2和Vue 3中如何使用`v-model`来实现组件间的双向数据绑定,包括在Vue 2中使用`value`和`input`事件,以及在Vue 3中使用`modelValue`和`update:modelValue`事件的方法。
970 22
|
JavaScript 前端开发
vue-day03 v-on事件处理,表单输入绑定
文章介绍了Vue.js中事件处理和表单输入绑定的使用。包括v-on指令监听事件、事件处理方法、内联处理器、访问原生DOM事件、事件修饰符、按键修饰符、系统修饰符、exact修饰符和鼠标按钮修饰符。同时,讲解了如何使用v-model实现单行文本、多行文本、复选框和单选按钮的双向数据绑定,并提供了修饰符的使用示例。这些特性使得Vue.js在处理表单输入和事件时更加灵活和方便。
vue-day03 v-on事件处理,表单输入绑定
|
API Swift iOS开发
都2022年了,我们来看看iOS StoreKit 2 吧
都2022年了,我们来看看iOS StoreKit 2 吧
1552 0
|
小程序 开发者
uniapp实战 —— 开发微信小程序的调试技巧
uniapp实战 —— 开发微信小程序的调试技巧
1275 1
|
前端开发 JavaScript
前端封装库/工具库的日期处理库之Moment.js
近年来,随着前端技术的飞速发展,越来越多的前端封装库和工具库被开发出来,用以提高前端开发效率。其中日期处理库——Moment.js,是一个十分优秀的日期库。
408 0