最适合网络开发者的网站
TypeScript。初学者课程

尿素 西斯

TypeScript 基本泛型


泛型 允许创建“类型变量”,可用于创建不需要明确定义其所使用的类型的类、函数和类型别名。

泛型使编写可重用代码变得更容易。


功能

具有函数的泛型有助于制定更通用的方法,以更准确地表示所使用和返回的类型。

例子

函数 createPair<S, T> (v1:S,v2:T): [S,T] {
返回[v1,v2];
}
console.log(创建Pair<string, number> ('你好', 42)); // ['你好', 42]
亲自尝试 »

TypeScript 还可以从函数参数推断出泛型参数的类型。


课程

泛型可用于创建通用类,例如 地图.

例子

命名值类<T> {
私有_值:T | 未定义;

构造函数(私有名称:字符串){}

公共 setValue(值:T){
这个._value = 值;
  }

公共 getValue():T | 未定义 {
返回这个._value;
  }

公共 toString(): 字符串 {
返回 `${this.name}: ${this._value}`;
  }
}

让值 = 新的 NamedValue<number> ('我的号码');
值.setValue(10);
console.log(value.toString()); // 我的数字: 10
亲自尝试 »

如果在构造函数参数中使用泛型参数,TypeScript 还可以推断其类型。


类型别名

类型别名中的泛型允许创建更可重用的类型。

例子

类型 Wrapped<T> = {值:T};

const surrounded by var ...<number> = {值:10};

这也适用于具有以下语法的接口: interface Wrapped<T> {


默认值

可以为泛型分配默认值,如果没有指定或推断其他值,则应用该默认值。

例子

命名值类<T = string> {
私有_值:T | 未定义;

构造函数(私有名称:字符串){}

公共 setValue(值:T){
这个._value = 值;
  }

公共 getValue():T | 未定义 {
返回这个._value;
  }

公共 toString(): 字符串 {
返回 `${this.name}: ${this._value}`;
  }
}

让值=新的NamedValue('myNumber');
值.setValue('我的值');
console.log(value.toString()); // myNumber:myValue

扩展

可以向泛型添加约束来限制允许的内容。约束使得在使用泛型时可以依赖更具体的类型。

例子

函数 createLoggedPair <S extends string | number, T extends string | number>(v1:S,v2:T): [S,T] {</s>
console.log(`创建对:v1='${v1}',v2='${v2}'`);
返回[v1,v2];
}

这可以与默认值结合。


TypeScript 练习

通过练习测试自己

锻炼:

完成通用:

function createPair, (x: typeX, y: typeY): [typeX, typeY] {
 return [x, y];
}
console.log(createPair<string, number>('Meaning', 42));


用通俗的语言来说,泛型是什么?

考虑到 泛型 作为可用于存储任何类型数据的通用容器。

例如,假设你有一个用来存放苹果的盒子。这个盒子只能装苹果。但是如果你需要一个不仅可以装苹果还可以装香蕉或橙子等其他水果的盒子怎么办?这时就需要用到通用包装了。

TypeScript 中的泛型允许您创建可处理任何类型数据的类型。

例如,您可以创建一个可以对任何数组进行排序的函数,无论它包含数字、字符串还是其他数据类型。

以下是泛型的一个例子:

函数排序<T> (数组:T[]):T[] {
  // ... код сортування ...
返回数组;
}

在此示例中, sort 是一个接受数组的通用函数array 任何类型T 并返回相同类型的排序数组。

以下是更多泛型的示例:

  • Array<T> - 表示 T 类型数据数组的类型。
  • Map<K, V> - 表示字典的类型,其中键为 K 类型,值是 V 类型。
  • Promise<T> - 表示将通过类型 T 的值解决的承诺的类型。

结论

泛型使 TypeScript 代码更加灵活且可重用。借助泛型,您无需编写单独的代码来处理不同的数据类型。

如果您是 TypeScript 新手,请不要担心泛型看起来很难。随着时间和练习,您将更好地理解它们的工作原理,并能够在代码中使用它们。

您可以在 TypeScript 官方网站的以下链接中阅读有关泛型的更多信息: https://www.typescriptlang.org/docs/handbook/2/generics.html



评论