typescript (ts) 泛型初探

简介: 泛型相当于是一个类型变量,在定义时,无法预先知道具体的类型,可以用该变量来代替,只有到调用时,才能确定它的类型。很多时候,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;
})


20210118090830115.png


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


样列代码,是手写的ts的map传送门


20210118092301951.png

20210118092559513.png


3. 泛型可以设置默认值


  • 直接使用默认值, 对应的语法很简单,即 <T=Default Type>


// 定义一个含有默认类型的泛型接口
interface A<T=string> {
    name: T;
  }
  const strA: A = { name: "cll" };
  // 这里会自动推导类型
  const numB: A<number> = { name: 101 };

20210118093357604.png


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


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


  • 通过继承的方式


// 定义一个含有默认类型的泛型接口
interface A {
  name: string;
}
// 打印含有name 属性的方法
function consoleLogName<T extends A>(obj: T) {
  console.log(obj.name)
}


调用方法需要传入满足条件的类型,关于ts 的类型兼容性检查, 另见


2021011809433058.png


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"]);


相关文章
|
4月前
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
239 2
|
4月前
|
JavaScript 编译器
typescript之泛型
typescript之泛型
137 60
|
3月前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
4月前
|
JavaScript 安全
typeScript进阶(14)_泛型和注意事项
TypeScript中的泛型允许创建可重用的代码。泛型可以定义函数、接口、类,支持传递类型参数,实现类型安全。泛型可以用于数组,约束类型参数必须符合特定的接口,也可以在接口和类中使用。泛型类可以包含多个类型参数,甚至在泛型约束中使用类型参数。
31 1
typeScript进阶(14)_泛型和注意事项
|
4月前
|
JavaScript 前端开发
typeScript基础(8)_ts类型断言
本文介绍了TypeScript中的类型断言,它用于在编译时告诉TypeScript某个对象具有特定的类型,即使它看起来不具备。类型断言可以用来访问一个类型上存在而另一个类型上不存在的属性或方法。需要注意的是,类型断言并不会在运行时改变JavaScript的行为,因此如果断言不当,运行时仍然可能出错。文章还提醒避免将类型断言为`any`类型或进行多重断言。
45 1
|
3月前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
63 0
|
3月前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
36 0
|
3月前
|
JavaScript 安全 前端开发
TypeScript :枚举&字符&泛型
本文介绍了 TypeScript 中的泛型、约束、枚举和字符操作的基本用法。通过示例代码展示了如何定义和使用泛型函数、类和接口,以及如何利用 `keyof` 约束类型。此外,还介绍了枚举的定义和使用,包括常量枚举和外部枚举的区别。最后,简要说明了 `?.` 和 `??` 操作符的用途,帮助处理可能为空的属性和提供默认值。
|
5月前
|
JavaScript 安全 算法
TypeScript:一个好泛型的价值
TypeScript:一个好泛型的价值
|
6月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
97 0