typescript泛型包装-后端深入理解Typescript子类概念

bendan520 2024年4月29日 typescript 0

后端深入理解Typescript子类概念

更新时间：2020年3月09日 11:49:39 作者：A000 陌上花开

本文主要介绍后端Typescript子类概念的深入理解。文章通过示例代码对其进行了详细介绍。对您的学习或工作有一定的参考学习价值。有需要的同事就跟着小编一起学习吧。研究一下

首先我们来介绍一下泛性恋的概念

子类编程（泛型编程）是编程语言的一种风格或范例。类库允许程序员使用稍后指定的类型以强类型编程语言编写代码，并在实例化期间将这些类型指定为参数。

类库是指定义函数、套接字或类时，不预定义具体类型，而是在使用时指定类型的一个特点。

我们先举一个简单的例子

假设我们定义一个函数，它可以接收数字类型作为参数并返回数字类型。

function genericDemo(data: number): number {
  return data;
}

按照上面的写法是没有问题的，那如果我们要接受一个字符串并返回一个字符串怎么办呢？如果逻辑一样的话，还需要再写一遍吗？就像下面这样。

function genericDemo(data: string): string {  
  return data;
}

这段代码看起来非常多余。有没有其他方法可以不使用任何东西来编写它？答案其实很容易看出。可以使用通用的写法，如下所示。

function genericDemo(data: T):T {
  return data;
}

我们在函数名genericDemo前面声明了一个泛型变量，用于捕获调用函数时传入的参数类型（例如：数字），然后我们就可以使用这个类型。后来我们又使用T作为返回值类型。现在我们可以知道参数类型和返回值类型是相同的。这使我们能够跟踪有关函数中使用的类型的信息。

多种类型参数

当我们定义泛型类型时，我们还可以一次定义多个类型参数，如下所示。

function swap(tuple: [T, U]):[U, T] {
  return [tuple[1], tuple[0]];
}

子类套接字

我们首先定义一个通用套接字Identities，然后定义一个函数identities()来使用这个通用套接字

interface Identities {
  id1: T;
  id2: U;
}

我在这里使用 T 和 U 作为我们的类型变量，以证明任何字母（或有效字母数字名称的组合）都是有效类型 - 除了一般用途之外，您对它们的调用没有任何意义。

我们现在可以使用这个套接字作为 Identity() 的返回类型，并更改我们的返回类型以符合它。我们还可以通过 console.log 这些参数及其类型来进一步解释：

function identities (arg1: T, arg2: U): Identities {
  console.log(arg1 + ": " + typeof (arg1));
  console.log(arg2 + ": " + typeof (arg2));
  let identities: Identities = {
  id1: arg1,
  id2: arg2
 };
 return identities;
}

我们现在使用 Identity() 所做的是将类型 T 和 U 传递到函数和身份套接字中，从而允许我们定义相对于参数类型的返回类型。

通用变量

当使用子类创建像identity这样的类库函数时，编译器要求你在函数体中正确使用这种公共类型。换句话说typescript泛型包装，您必须将这些参数视为任何或所有类型。

我们先看之前的案例

function genericDemo(data: T):T {
  return data;
}

假设我们想同时复制数据的厚度。我们可能会这样做

function genericDemo(data: T):T {
  console.log(data.length); // Error: T doesn't have .length
  return data;
}

如果我们这样做，编译器会报错说我们使用了data的.length属性，而没有地方表明data有这个属性。请记住，这种类型的变量代表任何类型，因此使用此函数的人可能会传入一个数字，而数字没有 .length 属性。

现在假设我们想要操作 T 类型的字段而不是直接操作 T。因为我们操作的是链表，所以 .length 属性应该存在。我们可以像任何其他链表一样创建这个字段：

function genericDemo(data: Array):Array {
  console.log(data.length);
  return data;
}

泛型类

我们还可以在类属性和技术的意义上对类进行子类化。对类进行子类化可确保在整个类中一致地使用指定的数据类型。比如ReactTypescript项目中的以下内容。

interface Props {
  className?: string;
  ...
}
interface State {
  submitted?: bool;
  ...
}
class MyComponent extends React.Component {
  ...
}

我们在这里使用一个与 React 组件配合使用的类库，以确保组件的 props 和 state 是类型安全的。

类库约束

我们先来看一个常见的需求。我们需要设计一个函数。该函数接受两个参数，一个参数是对象，另一个参数是对象上的属性。我们通过这两个参数返回这个属性的值，例如：

function getValue(obj: object, key: string){
  return obj[key] // error
}

我们会收到一条错误消息。这是新手 TypeScript 开发人员经常犯的错误。编译器告诉我们参数 obj 实际上是 {}，因此很难获取它旁边的键的任何值。

由于我们为参数obj定义的类型是object，所以默认只能是{}，而我们接受的对象也是多种多样。我们需要一个类库来表示传入的对象类型typescript泛型包装，例如Textendsobject：

function getValue(obj: T, key: string) {
 return obj[key] // error
}

这仍然没有解决问题，因为很难判断我们的第二个参数key是否存在于obj上，所以我们需要对这个key进行约束。我们将其限制为仅存在于 obj 属性中的类型。这时候我们就需要使用我们之前学习的索引类型来进行实现。我们使用索引类型keyofT取出传入对象的属性类型并生成联合类型。这里的子类 U 被限制为这个联合类型，这样函数就被完全定义了：

function getValue(obj: T, key: U) {
 return obj[key] // ok
}

另外，还有一种写多个子类约束的方法，可以作为扩展：

interface firstInterface {
  first(): number
}
interface secondInterface {
  second(): string
}
class Demo{
  ...
}

在子类中使用类类型

在 TypeScript 中使用子类创建鞋工厂函数时，需要引用构造函数的类类型。例如：

function create(type: {new(): T; }): T {
  return new type();
}

参数类型{new():T}的类型表示可以构造这个子类T，实例化后的类型就是基类T。

总结

关于后端对Typescript子类概念的深入理解这篇文章就到此结束了。关于Typescript子类的更多信息，请搜索Script House之前的文章或者继续浏览下面的相关文章。希望大家以后多多支持Script。家！

typescript泛型包装-后端深入理解Typescript子类概念

发表评论

发表回复取消回复

相关文章

发表评论

发表回复 取消回复

发表回复取消回复