typescript (ts) 泛型初探

typescript (ts) 泛型初探

泛型的定义:
1.泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。
2.就是一种不确定的数据类型,可以把运行时的问题提前到编译时期(java里是这么说的 我觉得在ts 应该同理的)
3.简单粗暴的说不想丢失’ts’ 的类型检查

语法

直接在名称后写上<泛型名称>

命名规范

其中 T 代表 Type,在定义泛型时通常用作第一个类型变量名称。但实际上 T 可以用任何有效名称代替。除了 T 之外,以下是常见泛型变量代表的意思:

  • K(Key):表示对象中的键类型;

  • V(Value):表示对象中的值类型;

  • E(Element):表示元素类型。

类型使用泛型

定义一个类型别名
type test<T> = T;

const str:test<string> = '123'

接口使用泛型

interface T {
  name: T;
}

函数使用泛型

fucntion test<T>(val: T): void{

}

类使用泛型

另见,手动实现ts 中的map函数

特点

1. 泛型相当于是一个类型变量,在定义时,无法预先知道具体的类型,可以用该变量来代替,只有到调用时,才能确定它的类型。很多时候,TS会智能的根据传递的参数,推导出泛型的具体类型

// 定义一个接口
interface Callback<T> {
  (val1: T, val2: T): T
}
// 定义一个求和的函数,传递两个参数,参数类型未知。求和的方式也未知
// 举个例子,我可以传两个数字进来,求乘积,或者求和, 或者我传入两个字符串,做凭借操作等
function sum<T>(val1: T, val2: T, cb: Callback<T>): T {
  return cb(val1, val2)
}
// 求数字的和
sum<number>(1, 2, (v1, v2) => {
  return v1 + v2;
})

// 求字符串的拼接
sum<string>('a', 'b', (v1, v2) => {
  return v1 + v2;
})

在这里插入图片描述
在这里插入图片描述

2. 如果无法完成推导,并且又没有传递具体的类型,默认为空对象 或者 unknown

样列代码,是手写的ts的map传送门在这里插入图片描述在这里插入图片描述

3. 泛型可以设置默认值

  • 直接使用默认值, 对应的语法很简单,即 <T=Default Type>
// 定义一个含有默认类型的泛型接口
interface A<T=string> {
    name: T;
  }
   
  const strA: A = { name: "cll" };
  // 这里会自动推导类型
  const numB: A<number> = { name: 101 };

在这里插入图片描述

注意:泛型参数的默认类型遵循以下规则:

  • 有默认类型的类型参数被认为是可选的。
  • 必选的类型参数不能在可选的类型参数后。
  • 如果类型参数有约束,类型参数的默认类型必须满足这个约束。
  • 当指定类型实参时,你只需要指定必选类型参数的类型实参。未指定的类型参数会被解析为它们的默认类型。
  • 如果指定了默认类型,且类型推断无法选择一个候选类型,那么将使用默认类型作为推断结果。
  • 一个被现有类或接口合并的类或者接口的声明可以为现有类型参数引入默认类型。
  • 一个被现有类或接口合并的类或者接口的声明可以引入新的类型参数,只要它指定了默认类型。
  • 通过继承的方式
// 定义一个含有默认类型的泛型接口
interface A {
  name: string;
}

// 打印含有name 属性的方法
function consoleLogName<T extends A>(obj: T) {
  console.log(obj.name)
}

调用方法需要传入满足条件的类型,关于ts 的类型兼容性检查, 另见
在这里插入图片描述

4. 多泛型

语法

直接在名称后写上<泛型名称1, 泛型名称2>

//将两个数组进行混合
//[1,3,4] + ["a","b","c"] = [1, "a", 3, "b", 4, "c"]
function mixinArray<T, K>(arr1: T[], arr2: K[]): (T | K)[] {
    let result: (T | K)[] = [];
    //... 实现函数的混合
    return result;
}

const result = mixinArray([1, 3, 4], ["a", "b", "c"]);
  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
泛在TypeScript中是一种特性,它允许我们在定义函数、接口或类时不预先指定具体的类型,而是在使用时手动指定类型。它可以帮助我们在编写可重用的代码时增加类型的安全性和灵活性。 在TypeScript中,使用尖括号(< >)来表示泛型,并在类名、函数名或接口名后面使用泛型变量来表示类型参数。例如,我们可以定义一个泛型函数来实现数组元素的反转: ```typescript function reverse<T>(array: T[]): T[] { return array.reverse(); } const numbers = [1, 2, 3, 4, 5]; const reversedNumbers = reverse(numbers); // [5, 4, 3, 2, 1] const names = ["Alice", "Bob", "Charlie"]; const reversedNames = reverse(names); // ["Charlie", "Bob", "Alice"] ``` 在上面的例子中,泛型变量`T`表示类型参数,它可以在函数体内部和函数的参数类型中使用。 除了函数,我们还可以使用泛型来定义类和接口。例如,我们可以创建一个泛型类`Box`来存储不同类型的值: ```typescript class Box<T> { private value: T; constructor(value: T) { this.value = value; } getValue(): T { return this.value; } } const numberBox = new Box<number>(42); console.log(numberBox.getValue()); // 42 const stringBox = new Box<string>("Hello"); console.log(stringBox.getValue()); // "Hello" ``` 上面的例子中,泛型变量`T`可以在类的成员变量类型、构造函数参数类型和方法返回值类型中使用。 总结来说,TypeScript泛型提供了一种灵活的方式来增加代码的可重用性和类型安全性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

twinkle||cll

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值