关于对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 相关文章推荐
实例:尽可能写友好的Javascript代码
Oct 09 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 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 array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
php生成html文件方法总结
2014/12/01 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
python删除文本中行数标签的方法
2018/05/31 Python
python内存动态分配过程详解
2019/07/15 Python
python查看数据类型的方法
2019/10/12 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
python模拟实现分发扑克牌
2020/04/22 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
python中的yield from语法快速学习
2020/11/06 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
数据库测试通常都包括哪些方面
2015/11/30 面试题
禁止高声喧哗的标语
2014/06/11 职场文书
订货会主持词
2015/07/01 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏