关于对TypeScript泛型参数的默认值理解


Posted in Javascript onJuly 15, 2022

泛型简介

软件工程中,我们不仅要创建一致的定义良好的 API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。

在像C# 和 Java 这样的语言中,可以使用 泛型 来创建可重用的组件,一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。

举个?

举个最简单的例子来理解泛型?

function getVal(val: string): string {
  return val
}

上述代码很简单,约束 getVal 这个函数入参为 string 类型,约束它的返回值和它的入参一样,也是 string 类型。

关于对TypeScript泛型参数的默认值理解

如上所示,我们传入数值 1 会报错。传入正确类型的参数后,通过上述图像,可以看出 result2 可以调用字符串相关的属性和方法,这是因为 IDE 已经预先推断出了 result2 的类型。

上面的例子是 TypeScript 最基本的应用。此时,我们不妨做一个思考??,getVal 函数就只能接收 string 入参吗?我如果想要实现传入任意类型的值,函数的返回值就是该任意类型怎么实现?

举个??

完成上述提出的疑问可以使用泛型,代码如下?

function getVal<T>(val: T): T {
  return val
}

添加一点测试代码:

关于对TypeScript泛型参数的默认值理解

这一次我们可以传入任何类型的值都不会报错,并且都能够享受 IDE 预推断带来智能提示,这就是 TypeScript 的核心魅力——类型推断和类型约束。

我对于泛型的理解就是:

关于对TypeScript泛型参数的默认值理解

我们程序员在看到 '123'true 等变量时,我们一眼就能看出它是什么类型,计算机当然也能够识别出来。TypeScript 引擎通过解析 AST 的方式推断出了 getVal 的入参类型为 string ,将推断出来的类型用一个变量 T 存起来,这样我们可以将 T 灵活的运用在各种地方。总之,我们可以将泛型看成是一个变量或者是一个形参,只不过在 JavaScript 中变量存储的是,而 TypeScript 中存储的是类型罢了。

泛型参数的默认值——函数重载

我们在上面说到,泛型可以看成是一个形参。在 JavaScript 中形参可以设置一个默认值,那么在 TypeScript 中的泛型参数同样可以设置一个默认值。我们来看一下官方的示例代码?

declare function create(): Container<HTMLDivElement, HTMLDivElement[]>;
declare function create<T extends HTMLElement>(element: T): Container<T, T[]>;
declare function create<T extends HTMLElement, U extends HTMLElement>(
  element: T,
  children: U[]
): Container<T, U[]>;

示例代码中缺少 Container 类型声明,并且函数只有类型声明没有的具体执行代码块,直接复制到编辑器中会报错。这里我们尝试补充一下,如下:

type Container<T, U> = {element: T, children: U}

function create(): Container<HTMLDivElement, HTMLDivElement[]>;
function create<T extends HTMLElement>(element: T): Container<T, T[]>;
function create<T extends HTMLElement, U extends HTMLElement>(element: T, children: U[]): Container<T, U[]>;
function create<T extends HTMLElement, U extends T[]>(element?: T, children?: U): Container<T, U> {
  return {
    element: element as T,
    children: children as U
  }
}

以上代码是一个重载函数的声明,函数重载允许一个函数接受不同数量或类型的参数时,作出不同的处理(PS:这里的处理就是会有不同的类型推断和约束)。

我们先一行一行的解析它的重载声明含义?

  • function create(): Container<HTMLDivElement, HTMLDivElement[]> 声明一个 create 函数,无入参,返回值是一个包含 HTMLDivElement 类型的 Container 类型数据。
  • function create<T extends HTMLElement>(element: T): Container<T, T[]> 声明一个 create 函数,接收一个被约束为 HTMLElement 类型的 element 参数(通过下图可以看出,像这些DOM类型可以满足 HTMLElement 类型约束),返回值是一个包含满足 HTMLElement 类型的 Container 类型数据。

关于对TypeScript泛型参数的默认值理解

  • function create<T extends HTMLElement, U extends HTMLElement>(element: T, children: U[]): Container<T, U[]> 声明一个 create 函数,接收被同样约束为 HTMLElement 类型的 elementchildren 参数。

好了,现在我们来一些测试函数来验证一下以上重载函数的类型推断:

const r1 = create() // Container<HTMLDivElement, HTMLDivElement[]>
const r2 = create(document.createElement('dialog')) // Container<HTMLDialogElement, HTMLDialogElement[]>
const children = [document.createElement('div')] // HTMLDivElement[]
const r3 = create(document.createElement('dialog'), children) // Container<HTMLDialogElement, HTMLDivElement[]>

关于对TypeScript泛型参数的默认值理解

根据图例,可以看出根据不同的入参个数及入参类型,所推断的函数返回值是跟上面的重载声明一一对应的,这就是 TypeScript 中最基础的函数重载的理解。看到这里,相信有很多人会有疑问,一个函数重载写这么多行声明,需要搞这么麻烦?,TS……劳资不学了??。

泛型参数的默认值——正文

由于前面的那么多铺垫,这篇文章的主题部分已经可以一带而过了~

有了泛型参数默认类型,我们可以将上面复杂的重载声明简化为这样?

function create<T extends HTMLElement = HTMLDivElement, U = T[]>(element?: T, children?: U): Container<T, U> {
  return {
    element: element as T,
    children: children as U
  }
}

没错,通过给泛型参数设置默认值,我们只需要写一个普通函数就行了,先看下代码执行效果:

关于对TypeScript泛型参数的默认值理解

我们给 T 设置了一个默认类型 HTMLDivElement 。在解析 create() 语句时,由于没有入参,T 的类型被赋为 HTMLDivElement,而 U = T[],所以 U 的类型是 HTMLDivElement[] ,因此最后的返回值类型推断为 Container<HTMLDivElement, HTMLDivElement[]> 。后续的 r2r3 都是同理。

这里的核心理解要点就是:这里的 T extends HTMLElement = HTMLDivElement, U = T[] 是默认值,只有没传参的时候会生效,如果传参了会被具体的入参类型所替换。

以上便是我对于 TypeScript 中泛型参数默认值的一些粗浅理解,欢迎讨论指正??。

参考

TypeScript 2.3——泛型参数默认值

到此这篇关于对TypeScript泛型参数的默认值理解的文章就介绍到这了,更多相关TS泛型参数默认值内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
jquery实现提示语淡入效果
May 05 jQuery
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
vue递归实现树形组件
Jul 15 #Vue.js
VUE递归树形实现多级列表
Jul 15 #Vue.js
javascript进阶篇深拷贝实现的四种方式
Jul 07 #Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 #Javascript
类和原型的设计模式之复制与委托差异
JS高级程序设计之class继承重点详解
Jul 07 #Javascript
JS class语法糖的深入剖析
Jul 07 #Javascript
You might like
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
js版本A*寻路算法
2006/12/22 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
Python文件操作方法详解
2020/02/09 Python
区分python中的进程与线程
2020/08/13 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
大学毕业生通用求职信
2013/09/28 职场文书
计算机专业推荐信范文
2013/11/20 职场文书
心得体会怎么写
2013/12/30 职场文书
科研先进个人典型材料
2014/01/31 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
感恩节活动策划方案
2014/05/16 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
2019军训心得体会
2019/06/27 职场文书
家电创业计划书
2019/08/05 职场文书