对TS里泛型的理解

简介: 对TS里泛型的理解

对TS里泛型的理解

概念

  • 当我们定义一个变量不确定类型的时候有两种解决方式:
  • 使用any(使用any定义时存在的问题:虽然已知道传入值的类型但是无法获取函数返回值的类型;另外也失去了ts类型保护的优势)
  • 使用泛型(泛型指的是在定义函数/接口/类型时,不预先指定具体的类型,而是在使用的时候在指定类型限制的一种特性。)
  • 以上来自:TS中的泛型

    简述

  • 在 TypeScript 中,泛型是一种参数化类型的机制,它可以在不同的数据类型之间共享代码(例如同一个函数,参数可以是字符数组,可以是数字数组,至于是字符还是数字类型,在构造函数的时候会预先定义一个类型变量。以便于调用的时候为其赋值,确认何种类型。)。泛型可以用于函数、类和接口等语法结构。

函数中使用泛型

可以使用尖括号<>来表示泛型类型变量,例如:

function identity<T>(arg: T): T {
   
  return arg;
}

let output = identity<string>("myString");  // output 的类型为 string

let outputNum = identity<number>(123);  // outputNum 的类型为number

这里,函数 identity 接收一个类型为 T 的参数 arg,并返回一个同样类型的值。

调用 identity("myString") 即表示传入一个字符串类型的参数,并返回一个字符串类型的值。此时 output 的类型被推断为 string。

中使用泛型

可以在类名后方使用尖括号来声明泛型类型变量,例如:

class GenericNumber<T> {
   
  zeroValue: T;      // 此处定义了一个泛型变量 zeroValue
  add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) {
    return x + y; };

此时类 GenericNumber 接收一个泛型类型变量 T,并在类中使用了该变量。我们可以创建一个 GenericNumber 的实例,指定 T 为 number 类型,并可以访问该实例的属性和方法。

接口中使用泛型

可以在定义接口时使用尖括号来声明泛型类型变量,例如:

interface GenericIdentityFn<T> {
   
  (arg: T): T;
}

function identity<T>(arg: T): T {
   
  return arg;
}

let myIdentity: GenericIdentityFn<number> = identity;

这里,我们定义了一个接口 GenericIdentityFn,并指定它的函数属性接受一个类型变量 T 类型的参数,并返回一个同样类型的值。

我们实现了一个函数 identity,并将其赋值给 myIdentity,同时指定类型变量 T 为 number。

目录
相关文章
|
6月前
|
存储 JavaScript 算法
TS泛型类型
TS泛型类型
60 0
|
6月前
TS - 函数重载的理解:
TS - 函数重载的理解:
94 0
|
11月前
|
JavaScript
ts中枚举
ts中枚举
55 0
ts - 泛型
泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。
|
JavaScript 前端开发
ts - 类
TypeScript支持JavaScript的新特性,比如支持基于类的面向对象编程。让我们创建一个Student类,它带有一个构造函数和一些公共字段。 注意类和接口可以一起工作。
|
JavaScript
ts - 重载
重载允许一个函数接受不同数量或类型的参数时,作出不同的处理。
|
JavaScript 前端开发
ts -函数的类型
在 JavaScript 中,有两种常见的定义函数的方式——函数声明(Function Declaration)和函数表达式(Function Expression)
|
JavaScript Java
ts - 接口
在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型。
|
JavaScript
TS基本语法 TS中的泛型
TS基本语法 TS中的泛型