关于对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表格控件(自写,网上没有的)
Jun 04 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
javascript完美实现给定日期返回上月日期的方法
Jun 15 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
详解vue3.0 的 Composition API 的一种使用方法
Oct 26 Javascript
使用js获取身份证年龄的示例代码
Dec 11 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限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
Python实现的简单读写csv文件操作示例
2018/07/12 Python
python安装pil库方法及代码
2019/06/25 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
wxPython色环电阻计算器
2019/11/18 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
美国著名的团购网站:Woot
2016/08/02 全球购物
毕业自我鉴定
2013/11/05 职场文书
安全责任协议书
2014/04/21 职场文书
实践单位评语
2014/04/26 职场文书
公司投资建议书
2014/05/16 职场文书
三下乡个人总结
2015/03/04 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
公司开业致辞
2015/07/29 职场文书
个人向公司借款协议书
2016/03/19 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python