• 作者:老汪软件技巧
  • 发表时间:2023-12-26 18:01
  • 浏览量:

我们在定义函数或者的定义类时,如果遇到返回值类型不明确时就可以使用泛型。

比如在如下例子中,我们传入一个a并返回一个a,但是这个a被我们限定了只能传入类型。

function fn(a: number): number {
  return a;
}
fn(5);

但是我们传入的参数的类型和函数返回值的类型都是不确定的,如果我们想要函数能够返回准确的数据类型,我们该怎么做呢?

一、泛型的定义

函数名 (参数 : 泛型名称) : 泛型名称{ // 函数体}

function fn(a: T): T{
  return a;
}

二、泛型的使用

我们可以直接调用具有泛型的函数。

(一)不指定泛型

TS能够自动对传入的数据类型进行推断

比如,在如下代码中,函数传入的是10,所以定义的泛型T是类型;函数传入的是,所以定义的泛型T是类型。

function fn(a: T): T{
  return a;
}
console.log(fn(10));  // 打印:10
console.log(fn("Hello"));  // 打印:"Hello"

(二)指定泛型

我们在使用一个泛型函数的时候可以手动指定传入传输的类型,可以减少出差错的情况。

函数名 (参数)

function fn(a: T): T{
  return a;
}
console.log(fn(10));  // 打印:10
console.log(fn("Hello"));  // 打印:"Hello"

(三)指定多个泛型

我们也可以在定义泛型函数的时候指定多个泛型:

在如下代码中泛型T为类型,泛型K为类型

function fn(a: T, b:K): T{
  return a;
}
console.log(fn(10, "Hello"));  // 打印:10 "Hello"

(四)泛型结合接口使用

函数名 (参数 : 泛型名称) : 数据类型

interface Inter{
  length: number;
}
// 泛型T必须使Inter实现类
function fn(a: T): number{
  return a.length;
}
fn("123");
fn(123);  // 报错:类型“number”不满足约束“Inter”

(五)泛型在类中的使用

class 类名 {

属性: 泛型名称;

(属性: 泛型名称) { //... }

class Myclass {
  name: T;
  constructor(name: T) {
    this.name = name;
  }
}
const c = new Myclass("XunLin");