TypeScript系列
文章平均质量分 60
XiaoYu2002-AI
大家好,我是小余,一名前端程序员。向大家分享最实用的技术笔记
展开
-
infer 递归(TS-28)
具体思路 首先使用泛型约束 约束只能传入数组类型的东西 然后从数组中提取第一个,放入新数组的末尾,反复此操作,形成递归 满足结束条件返回该类型。希望通过一个 ts 工具变成。原创 2024-04-21 09:04:11 · 179 阅读 · 0 评论 -
infer 类型提取(TS-27)
one:[]:对T进行泛型约束为数组类型,用infer提取,提取的变量名对应着Arr的a、b、c。然后决定返回one,也就是第一个元素还是空数组。将除了第最后一个之外的其他通过ES6语法提取出来。将除了第一个之外的其他通过ES6语法提取出来。:对T进行泛型约束,一个any类型的数组。原创 2024-04-21 09:03:32 · 111 阅读 · 0 评论 -
TS 进阶用法 infer(TS-26)
infer 是 TypeScript新增到的关键字 充当占位符我们来实现一个条件类型推断的例子定义一个类型 如果是数组类型 就返回 数组元素的类型 否则 就传入什么类型 就返回什么类型。原创 2024-04-21 09:02:29 · 168 阅读 · 0 评论 -
TS 进阶用法 Record & Readonly(TS-25)
2 in 我们可以理解成 for in P 就是 key 遍历 keyof any 就是 string number symbol 类型的每一项。1 keyof any 返回 string number symbol 的联合类型。和 Partial 很像是吧?只是将Partial替换成了 Readonly。做到了约束 对象的 key 同时约束了 value。3 extends 来约束我们的类型。4 T 直接返回类型。原创 2024-04-21 09:01:18 · 184 阅读 · 0 评论 -
TS 进阶用法 Partial & Pick(TS-24)
TypeScript内置高级类型Partial Pick。原创 2024-04-21 09:00:32 · 117 阅读 · 0 评论 -
TS 进阶用法 proxy & Reflect(TS-23)
proxy:对象代理(是ES6新增的对象拦截器,能够监听到一个对象的变化)Reflect:配合proxy来操作对象。原创 2024-04-21 08:59:25 · 448 阅读 · 0 评论 -
TS进阶 协变 逆变 双向协变
在 TypeScript 中,鸭子类型是一种使用接口(interfaces)和类型断言(type assertions)来模拟动态类型系统的方法。A B 两个类型完全不同但是竟然可以赋值并无报错B类型充当A类型的子类型,当子类型里面的属性满足A类型就可以进行赋值,也就是说不能少可以多,这就是协变。是一个术语,用于描述动态类型语言中的类型系统的一种特殊方式。所谓的类型兼容性,就是用于确定一个类型是否能赋值给其他的类型。小满的解释:一只鸟 走路像鸭子 ,游泳也像,做什么都像,那么这只鸟就可以成为鸭子类型。原创 2024-04-21 08:58:28 · 392 阅读 · 0 评论 -
实战TS编写发布订阅模式(TS-22)
什么是发布订阅模式,其实小伙伴已经用到了发布订阅模式例如 addEventListener,Vue evnetBus都属于发布订阅模式简单来说就是 你(小满)要和 大满 二满 三满打球,大满带球,二满带水,三满带球衣。全都准备完成后开始打球。原创 2024-04-21 08:57:19 · 131 阅读 · 0 评论 -
TypeScript高级 - 实战插件编写
使用TypeScript去封装local storage(支持设置过期时间) =>local storage本身无此机制,只能人为手动删除,否则会一直存放在浏览器当中,可不可以跟cookie一样设置一个有效期。如果一直存放在浏览器又感觉有点浪费,那我们可以把。在存储的时候设置一个过期时间,并且存储的数据进行格式化方便统一校验,在读取的时候获取当前时间进行判断是否过期,如果过期进行删除即可。在本地服务器中启动(Stop Live Server)需要安装3个包(直接一次性安装好)//每过0.5s查看是否过期。原创 2024-04-21 08:55:12 · 610 阅读 · 0 评论 -
Rollup构建TS项目(TS-21)
这个视频我是属于过一遍的程度,本章节内容将直接把小满在CSDN的文章copy过来。原创 2024-04-20 10:40:42 · 648 阅读 · 0 评论 -
装饰器Decorator(TS-20)
Decorator是一项实验性特性,在未来的版本中可能会发生改变它们不仅增加了代码的可读性,清晰地表达了意图,而且提供一种方便的手段,增加或修改类的功能若要启用实验性的装饰器特性,你必须在命令行或里启用编译器选项启用的名字叫。原创 2024-04-20 10:39:13 · 383 阅读 · 0 评论 -
Mixins混入(TS-19)
TypeScript 混入 Mixins 其实 vue 也有 mixins 这个东西 你可以把他看作为合并。原创 2024-04-20 10:38:32 · 290 阅读 · 0 评论 -
声明文件d.ts(TS-18)
TS没有流行起来的部分原因:有些第三方库没有写声明文件,那就没有提示还会报错了。时,我们需要引用它的声明文件,才能获得对应的代码补全、接口提示等功能。声明文件 declare ,d.ts中d的简写。,@types是编写声明文件库的规范格式。文件内容与不使用命令生产的不一样。如果装不上就说明社区没有写声明文件。在文件夹下生成默认的。文件,使用命令生成的。给出了提示让你试一试。原创 2024-04-20 10:37:44 · 285 阅读 · 0 评论 -
三斜线指令(TS-17)
三斜线指令是包含单个XML标签的单行注释。注释的内容会做为编译器指令使用。三斜线指令仅可放在包含它的文件的最顶端。一个三斜线指令的前面只能出现单行或多行注释,这包括其它的三斜线指令。如果它们出现在一个语句或声明之后,那么它们会被当做普通的单行注释,并且不具有特殊的涵义。指令是三斜线指令中最常见的一种。它用于声明文件间的依赖。三斜线引用告诉编译器在编译过程中要引入的额外的文件。也可以认为是另一个import你也可以把它理解能import,它可以告诉编译器在编译过程中要引入的额外的文件。原创 2024-04-20 10:36:40 · 295 阅读 · 0 评论 -
namespace命名空间(TS-16)
我们在工作中无法避免全局变量造成的污染,TypeScript 提供了 namespace 避免这个问题出现exportnamespaceTypeScript与 ECMAScript 2015 一样,任何包含顶级import或者export的文件都被当成一个模块。相反地,如果一个文件不带有顶级的import或者export声明,那么它的内容被视为全局可见的(因此对模块也是可见的)命名空间中通过export将想要暴露的部分导出如果不用 export 导出是无法读取其值的案例实际编译成js文件的样子。原创 2024-04-20 10:36:03 · 181 阅读 · 0 评论 -
tsconfig.json配置文件(TS-15)
如果一个目录下存在一个 tsconfig.json 文件,那么往往意味着这个目录就是 TypeScript 项目的根目录。tsconfig.json 包含 TypeScript 编译的相关配置,通过更改编译配置项,我们可以让 TypeScript 编译出 ES6、ES5、node 的代码。echo ‘’>index.ts(创建一个空的名叫index.ts的文件)del index.js(删除名叫index.js文件)指定编译文件默认是编译当前目录下所有的 ts 文件。是否在编译过程中删除文件中的注释。原创 2024-04-20 10:35:21 · 653 阅读 · 0 评论 -
泛型约束|泛型类(TS-14下)
T[P];在以上代码中,首先通过keyof T拿到T的所有属性名,然后使用in进行遍历,将值赋给P,最后通过T[P]取得相应的属性值的类。中间的?号,用于将所有属性变为可选。: T[P]其中是代表移除?这个 modifier 的标识。再拓展一下,除了可以应用于?这个 modifiers ,还有应用在readonly,比如这个类型?R: any;infer在这里用于提取函数类型的返回值类型。原创 2024-04-20 10:33:52 · 965 阅读 · 0 评论 -
泛型(generic) => (TS-14上)
声明接口的时候 在名字后面加一个 使用的时候传递类型Treturn arg。原创 2024-04-20 10:30:57 · 381 阅读 · 0 评论 -
迭代器|生成器 TS-13
迭代器:Symbol.Iterator迭代器(Iterator)是⼀种对象,它能够⽤来遍历标准模板库容器中的部分或全部元素,每个迭代器对象代表容器中的确定的地址通俗点说,迭代器表现的像指针,读取集合或者数组中的⼀个值,读完以后⼜指向下⼀条数据,⼀个个数过去。生成器: for of。原创 2024-04-20 10:30:03 · 723 阅读 · 0 评论 -
never类型(TS-12)|重做
类型通常用于表示不可能出现的情况,它可以用于增强代码的类型安全性和可读性。类型时,表示该变量的类型不能是任何其他类型,即不存在任何值与其兼容。never是底层的内容,所以在联合类型上面会有问题。原创 2024-04-20 10:28:41 · 204 阅读 · 0 评论 -
never类型 TS-12
这些特性的使用增强了TypeScript和JavaScript的能力,使得代码可以更加灵活、安全和健壮。的类型不是所有枚举值的联合,即意味着存在逻辑错误。这是一种利用类型系统来确保代码完整性的技术。是 ECMAScript 2015 中引入的原始数据类型,它是通过。以下例子中也展示了如何在TypeScript的枚举类型检查中使用。类型表示的是那些永远不会发生的值的类型。函数创建的,主要用于创建唯一的标识符。TypeScript 的。原创 2024-04-20 10:10:45 · 253 阅读 · 0 评论 -
类型推论|类型别名 TS-11
let s:str = "我是小满"let s: str = () => "我是小满"//变量s的值 只能是上面value定义的值。原创 2024-04-20 10:07:39 · 398 阅读 · 0 评论 -
枚举类型 TS-10
我们可以为枚举的第一个成员设定一个初始值,随后的成员将会按顺序递增。red = 2,green, // 自动递增为 3blue // 自动递增为 4// 输出:2 3 4。原创 2024-04-20 10:05:56 · 177 阅读 · 0 评论 -
元组类型 TS-9
通过上述的扩展和注释,我们可以看到TypeScript中元组的强大功能以及如何正确地使用它们来增强我们的应用的健壮性和可维护性。这种类型安全的做法能帮助我们避免许多常见的错误,使我们的代码更加可靠。尽管元组非常有用,但它们的管理和使用需要精确的类型定义,特别是在处理越界元素时。开发者需要精通TypeScript的类型系统,才能有效利用元组来构建类型安全的应用。当我们尝试向元组添加新的元素时,这些元素的类型必须是元组中已定义类型的联合类型。在TypeScript中,数组允许我们将相同类型的对象集中存储。原创 2024-04-20 10:00:52 · 299 阅读 · 0 评论 -
抽象类 TypeScript8
在 TypeScript 中,使用abstract关键字可以定义一个抽象类。抽象类提供了一个基础的模板结构,用于构建更具体的类。抽象类本身不能被实例化,这意味着你不能直接创建一个抽象类的实例。它只能被用作其他类的基类。原创 2024-04-17 13:23:29 · 201 阅读 · 0 评论 -
Class类 TS-8
ts interface 定义类使用关键字 implements后面跟 interface 的名字多个用逗号隔开继承还是用 extends通过接口去约束类class Man implements Person{//会提示我们Man中缺少属性run,但类型Person中需要该属性//通过接口去约束类set():voidclass Man implements Person,H{//会报错,提示我们缺少set属性set():voidclass A{//也可以使用继承去使用。原创 2024-04-17 13:20:56 · 419 阅读 · 0 评论 -
内置对象 TS-7
/ NodeList 类型// HTMLElement 类型;// HTMLDivElement 类型,使用非空断言// MouseEvent 类型});// Promise 示例resolve(1);// 解析为数字类型});// 输出:1});通过使用 TypeScript 提供的类型定义和内置对象,我们可以享受更丰富的开发体验和更强的类型安全性。这些内置对象和类型不仅覆盖了 ECMAScript 的核心特性,还包括了丰富的浏览器 API,如操作 DOM 和 BOM 的工具。原创 2024-04-17 13:08:53 · 280 阅读 · 0 评论 -
联合类型|类型断言|交叉类型 TS-6
在这一节中,我们将详细探讨 TypeScript 中的联合类型、交叉类型和类型断言,这些特性增强了 TypeScript 的灵活性和表达力,同时保持了类型安全。原创 2024-04-17 13:00:15 · 297 阅读 · 0 评论 -
函数扩展 TS-5
在 TypeScript 中,定义函数参数的类型是确保函数正确使用的关键一步。我们可以明确每个参数的类型,如果调用时传入的参数类型不匹配,则会在编译时发现错误。通过接口定义对象形式的参数可以使函数调用更加清晰和结构化,特别是当参数数量较多或较复杂时。name: "小满",age: 18});// 输出: {name: '小满', age: 18}原创 2024-04-17 12:57:49 · 251 阅读 · 0 评论 -
数组类型 TS-4
泛型提供了一种方式来确保数组中元素的类型统一,同时保持代码的灵活性和重用性。泛型数组不仅支持基本类型,还可以轻松处理复杂结构,如数组的数组(多维数组)。使用接口定义数组确保了索引和值的类型对应正确,这是 TypeScript 强类型特性的又一体现,帮助我们构建更加安全和可靠的应用程序。这种类型安全确保数组中的元素类型是一致的,防止发生类型错误,如意外将字符串添加到数字数组中。使用接口表示数组或类数组是一种更灵活的方式,它允许我们定义索引签名来约束数组或类数组的结构。的方式,另一种是使用泛型。原创 2024-04-17 12:56:14 · 221 阅读 · 0 评论 -
Object与object{} -- 加餐环节
这一节我们详细探讨了 TypeScript 中Objectobject和{}三种类型的不同用法和特点。下面,我将进一步扩充每个类型的解释和使用场景,以便我们更加深入地理解它们之间的区别和适用情境。原创 2024-04-17 12:14:34 · 564 阅读 · 0 评论 -
接口和对象类型 TS-3
我们首先来看一个基础的interface例子,这里定义了一个名为A的接口,其中包含了必需和可选的属性。// `name` 是只读的,初始化后不可修改age?: number;// `age` 是可选的,这意味着在实现时可以有,也可以没有name: "小满嗷嗷叫",age: 18在这个例子中,如果我们试图修改name属性,TypeScript 将会阻止我们,并提示一个错误,因为name被定义为只读。原创 2024-04-17 12:08:46 · 524 阅读 · 0 评论 -
任意类型 TS-2
在我们的 TypeScript 项目中,any和unknown类型提供了灵活处理不确定类型的能力。使用any类型可以帮我们快速处理多变的情形,而unknown类为我们提供了更安全的方式来保证代码的健壯性。尽管any类型在某些情况下非常有用,但我建议在可能的情况下尽量使用unknown和进行适当的类型检查,这样可以使我们的应用更加稳定和可靠。原创 2024-04-17 12:04:27 · 363 阅读 · 0 评论 -
基础类型 TS-1
在探索 TypeScript 这个强类型的脚本语言时,我们会发现它和 C 语言在某些方面确实有相似之处,尤其是在对语言的严格定义和类型安全方面。现在,让我们深入了解 TypeScript 的基础使用方法,并通过注释来扩展和阐释一些关键的编程概念。原创 2024-04-17 11:56:30 · 227 阅读 · 0 评论