
Typescript
文章平均质量分 76
Wang's Blog
Keep learning for the innovation era.
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Typescript高级: 深入实践Record类型
Record 类型是TS中其众多强大特性之一它为我们提供了创建键值对映射的强大能力极大地增强了代码的灵活性与类型安全性。原创 2024-06-03 19:30:00 · 11653 阅读 · 1 评论 -
Typescript高级: 深入理解in与in keyof
in和keyof是两个非常重要的操作符,它们允许开发者对对象的键(key)进行更精细化的操作和约束in 关键词in关键词则在TypeScript的类型上下文中有特定的用途,它用于映射类型和类型查询当与keyof一起使用时,in可以遍历一个类型的所有键,并在类型层次上进行操作比如创建新的类型映射类型、条件判断或是泛型约束keyof 关键词keyof T是一个类型查询操作符,其中T是一个类型它返回一个联合类型,该联合类型包含了T所有公开属性的键(即属性名)原创 2024-06-02 22:39:24 · 1505 阅读 · 1 评论 -
Typescript高级: 深入理解extends keyof语法
在TypeScript中,extends关键字是类型系统中一个极其重要的组成部分它不仅用于类的继承,也是类型兼容性检查和泛型约束的关键机制特别是当它与keyof关键字结合,形成的结构时它为类型系统带来了强大的灵活性和表达能力,让我们能够在泛型中对对象的属性进行操作和约束。原创 2024-06-02 21:27:33 · 1378 阅读 · 0 评论 -
Typescript高级: 深入理解Omit类型和Pick类型
Omit 是一个非常实用的工具类型,它的功能是从一个已知的对象类型中排除某些属性,并返回一个新的对象类型这在处理复杂对象结构、实现更严格的类型限制时非常有用Pick 的工作原理基于 TypeScript 的映射类型当我们使用Pick时,TypeScript 会遍历 K 中的每一个属性并在新的类型中创建一个同名的属性其类型与原始类型 T 中的对应属性相同。原创 2024-06-02 16:51:04 · 1460 阅读 · 0 评论 -
Typescript高级: 深入理解Partial类型和Required类型
在 TypeScript 中,Partial 是一个非常实用的内置类型工具它允许我们轻松地将某个类型的所有属性变为可选的这对于处理可能缺少某些属性的对象时特别有用然而,Partial 背后的概念和它在实际开发中的应用场景远比表面看起来要丰富Partial 是 TypeScript 中一个非常实用的类型工具,它允许我们轻松地将类型的所有属性变为可选的通过深入理解 Partial 的原理和使用场景,我们可以更有效地利用它来提高代码的可读性和可维护性。原创 2024-06-02 12:01:34 · 2843 阅读 · 1 评论 -
Typescript高级: 深入理解Exclude类型
Exclude 是一个强大的类型操作符,用于从一个类型集合中排除另一个类型集合中存在的类型这对于创建更加精确和动态的类型定义非常有用,尤其是在处理复杂的类型系统和进行类型筛选时Exclude 是一个高级类型,用于从类型 T 中排除那些可以赋值给类型 U 的所有成员换句话说,Exclude 类型返回一个新类型,该类型包含类型 T 中所有不属于类型 U 的成员never : T;Exclude 类型操作符是 TypeScript 强大类型系统的一个缩影。原创 2024-06-02 09:10:05 · 538 阅读 · 0 评论 -
Typescript高级: 深入理解ConstructorParameters类型及借助infer构建带参数的工厂实例方法
在TypeScript中,利用泛型和类型推断,我们可以编写出既灵活又安全的代码特别是在处理类和其实例化过程中,这些特性显得尤为重要我们着重关注构造函数参数(constructor parameters)的类型处理以及如何利用泛型工厂函数来创建类的实例构造函数是面向对象编程中初始化对象状态的核心手段在TypeScript中,通过为构造函数及其参数添加类型注解可以确保在创建对象时遵循预定义的类型规则,从而提高程序的健壮性。原创 2024-06-01 22:51:13 · 1174 阅读 · 0 评论 -
Typescript高级: 深入理解infer关键字
在 TS 中,infer 是一个高级类型操作,特别是条件类型和映射类型中非常有用的关键字它在泛型中使用也会是一个强大工具,增强了类型推断的能力,让开发者更灵活地处理和操作类型它允许在泛型类型推导过程中捕获一个具体的类型,这对于编写复杂的类型转换和映射操作特别有用infer 的定义infer 表示在 extends 条件语句中以占位符出现的用来修饰数据类型的关键字被修饰的数据类型等到使用时才能被推断出来infer 占位符式的关键字出现的位置。原创 2024-06-01 21:45:36 · 2694 阅读 · 0 评论 -
Typescript高级: 深入理解交叉类型与联合类型
在TypeScript这一强大的类型系统中,开发者可以利用交叉类型(Intersection Types)和联合类型(Union Types)来设计复杂且灵活的类型结构,从而增强代码的类型安全性与表达能力本文将深入探讨这两种类型的特点、应用场景,并通过实际示例,展示如何在objtype1 & objtype2 & objtype3与objtype1 | objtype2中运用它们定义了三个泛型参数,代表输入对象的类型。通过泛型,函数可以处理不同类型的对象而无需明确指定具体类型交叉类型:通过。原创 2024-05-20 22:30:00 · 1162 阅读 · 0 评论 -
Typescript高级: 深入理解Extract类型
在TypeScript这一逐渐成为前端开发首选的静态类型检查语言中,类型系统提供了丰富的工具来帮助开发者编写更加健壮和可维护的代码。其中,是一个强大的内置实用类型,用于从一个联合类型T中提取出属于另一个类型U的那些类型。本文将深入探讨Extract类型的工作原理、应用场景以及如何有效利用它来提升代码的类型安全性和表达力。Extract是一个条件类型,其定义为:从类型T中选取那些同时也可以被类型U赋值的类型简而言之,它像一个过滤器,保留了T中与U兼容的部分。原创 2024-05-20 20:45:00 · 1092 阅读 · 0 评论 -
Typescript高级: 泛型 vs 装饰器
泛型和装饰器各有千秋,选择哪一种取决于具体的需求和偏好泛型在处理类型抽象和代码复用上表现出色特别是在不需要修改类或方法行为,仅需调整类型逻辑时而装饰器在需要动态修改类或方法行为,实现元编程时更为强大在某些场景下,通过巧妙设计,泛型可以成为装饰器的有效替代方案为代码带来更高的可读性和可维护性最终,理解它们的特性并灵活运用,将极大提升TS编程技能。原创 2024-05-20 19:00:00 · 753 阅读 · 0 评论 -
Typescript高级: 深入理解工厂函数类型
尽管构造函数类型和工厂函数类型在实际应用中可以紧密相连它们的核心区别在于:构造函数类型专注于初始化单一类型实例的细节工厂函数类型则提供了一个更高层次的抽象,根据条件或参数决定创建哪种类型的实例,增加了灵活性和解耦因此,它们虽有联系,但在设计意图和应用场景上有所区分。原创 2024-05-19 23:09:18 · 841 阅读 · 0 评论 -
Typescript高级: 基于泛型T的函数重载来实现各个类型数据的排序
现在我们来实现一个场景,基于泛型来写排序的工具类这个工具类实现对各种类型的数据进行排序目前排序算法选择的是快排。原创 2024-05-16 21:35:21 · 1003 阅读 · 0 评论 -
Typescript高级: 详解 any、object、Object、Record<any, any> 和泛型 T
any 类型是 TypeScript 中一个特殊的类型,它表示可以是任意类型的值。换句话说,当你将一个变量声明为 any 类型时,你可以为它赋予任何类型的值。虽然 object 类型本身不需要类型守卫,但如果你在处理联合类型。使用 any 类型会失去 TypeScript 的类型检查能力。但通过 is 类型的检查,我们仍然可以安全地使用字符串的方法。但你知道这些属性都有一个共同的键类型,你可以使用索引签名。在上面的例子中,anyVar 可以被赋值为任何类型的值。any 类型它允许你在编译时绕过类型检查。原创 2024-05-12 22:47:34 · 1933 阅读 · 0 评论 -
Typescript高级: 对泛型和多态的应用, 实现Java中的ArrayList和LinkedList
LinkedList 类实现了 List 接口,并包含了维护链表状态的重要属性。在 LinkedList 的实现中,节点被定义为一个名为 N 的内部类。ArrayList 这个类继承List接口,并实现其所有的方法。删除元素:remove 方法遍历链表,查找并删除指定的元素。获取元素:get 方法通过遍历链表找到指定位置的元素。在基础List类型中,我们定义了如下方法和属性。添加元素:add 方法在链表尾部添加一个新节点。这里面实现了方法的多态和泛型。原创 2024-05-12 19:28:07 · 1053 阅读 · 0 评论 -
Typescript高级: 深入理解 keyof, extends 以及 extends keyof
在TypeScript的世界中,extends和keyof是两个强大的工具它们分别用于约束类型和获取对象类型的键当这两者结合使用时,我们可以创建出更为复杂和精细的类型操作从而增强TypeScript的类型安全性通过结合使用extends和keyof,可以在TS中创建更为精细和安全的类型操作这种组合使我们能够确保类型参数的键存在于对象中,并据此推断出相应值的类型这不仅增强了代码的类型安全性,还提高了代码的可读性和可维护性。原创 2024-05-12 15:54:15 · 2034 阅读 · 0 评论 -
Typescript高级: 深入理解断言
关于断言,就是TS 类型断言,即把两种能有重叠关系的数据类型进行相互转换的一种 TS 语法把其中的一种数据类型转换成另外一种数据类型类型断言和类型转换产生的效果一样,但语法格式不同TS 类型断言语法格式:A 数据类型的变量 as B 数据类型注意:A 数据类型和 B 数据类型必须具有重叠关系。原创 2024-05-08 18:52:41 · 1284 阅读 · 1 评论 -
Typescript高级: 深入理解const和readonly
在编程语言中,const 和 readonly 是两种用于声明常量或只读属性的关键字它们帮助开发者确保数据的不可变性,从而提高代码的安全性和可维护性虽然这两个概念在不同的编程语言中可能有所差异但本文将以 TypeScript 为例,深入探讨 const 和 readonly 的使用场景const 和 readonly 作为不变性编程的核心概念在保证代码质量、减少bug、优化性能等方面发挥着重要作用它们鼓励开发者采用更安全、更易于推理的编程模式,尤其是在团队协作和长期维护的项目中。原创 2024-05-08 20:45:00 · 1048 阅读 · 0 评论 -
Typescript高级: 函数重载和constructor重载
在 TypeScript 中,类的重载主要涉及到方法的重载(Overloading),而很少涉及构造函数的重载因为 TypeScript 的类构造函数不支持像一些其他语言(如 C++ 或 Java)那样的传统意义上的重载类的构造函数(constructor)本身并不支持传统意义上的重载,因为构造函数只有一个实际的实现但是,可以通过为构造函数提供不同的参数类型或数量来模拟构造函数的重载效果这通常是通过使用联合类型(union types)和类型守卫(type guards)来实现的。原创 2024-03-27 21:08:40 · 1718 阅读 · 0 评论 -
Typescript高级: is 类型守卫
在 TypeScript 中,is关键字主要用于类型守卫(Type Guards)类型守卫是一种表达式,它执行一些运行时检查,并缩小变量的类型范围is关键字通常与类型断言一起使用,以提供更精确的类型信息。原创 2024-03-27 20:36:34 · 749 阅读 · 0 评论 -
前端小技巧: TS实现一个获取传入参数类型的函数
核心API: Object.prototype.toString.call原创 2023-12-08 22:29:58 · 864 阅读 · 0 评论 -
前端小技巧: 写一个异步程序示例, 使用任务队列替代promise和async/await等语法糖
可以使用懒人每做几件事,就要休息一会儿,并且不会影响做事的顺序这种场景来模拟, 定义单例名称为: lazyMan, 支持 sleep 和 eat 两个方法, 支持链式调用原创 2023-12-07 21:01:31 · 349 阅读 · 0 评论 -
前端小技巧: TS实现数组转树,树转数组
找到parentNode,加入其children。遍历数组,生成 tree node。原创 2023-10-29 10:17:12 · 740 阅读 · 0 评论 -
前端小技巧: TS实现new出一个对象的内部过程
{} 创建空对象,原型指向 Object.prototype。Object.create 创建空对象,原型指向传入的参数。原创 2023-10-29 20:50:39 · 1165 阅读 · 0 评论 -
前端小技巧: TS实现深拷贝函数,考虑 Map, Set, 循环引用
【代码】前端小技巧: TS实现深拷贝函数,考虑 Map, Set, 循环引用。原创 2023-10-29 16:47:14 · 1305 阅读 · 0 评论 -
前端小技巧: TS实现bind函数,call函数,以及apply函数
绑定 this传入执行参数分析:如何在函数执行时,绑定this如:const obj = {x: 100, fn() {this.x}}执行obj.fn(), 此时fn内部的this就指向obj可以借次来实现函数绑定 this用 call 实现 apply, 用 apply 实现 call 不可取原生 call apply 的 this 如果是值类型sing,会被 new Object(…)Symbol 的作用,是防止属性之间的冲突。原创 2023-10-29 13:57:23 · 1468 阅读 · 0 评论 -
前端小技巧: TS实现柯里化函数
【代码】前端小技巧: TS实现柯里化函数。原创 2023-10-29 11:05:48 · 436 阅读 · 0 评论 -
数据结构与算法之链表: 使用链表指针获取JSON节点值的算法实现 (Typescript版)
eval在严格模式下是被禁止的,所以不推荐使用。给定如下json和指定的位置,求最终的值。3 ) 使用Function的算法。2 ) 使用eval的算法。原创 2023-09-25 19:06:48 · 246 阅读 · 0 评论 -
数据结构与算法之链表: 基于链表实现js中的原型链原理与算法实现 (Typescript版)
若A沿着原型链能找到B.prototype, 则A instanceof B为true。如果在A对象上没有找到x属性,那么会沿着原型链找x属性。2 )不同类型查找, 交叉验证。原创 2023-09-25 12:04:35 · 190 阅读 · 0 评论 -
数据结构与算法之链表: LeetCode 237. 删除链表中的节点 (Ts, Py, Go版)
链表的所有值都是 唯一的,并且保证给定的节点 node 不是链表中的最后一个节点。给你一个需要删除的节点 node。你将 无法访问 第一个节点 head。注意,删除节点并不是指从内存中删除它。有一个单链表的 head,我们想删除它其中的一个节点 node。原创 2023-05-05 15:58:05 · 521 阅读 · 0 评论 -
Vue3源码梳理:computed计算属性的核心实现
计算属性 computed 会基于其响应式依赖被缓存,并且在依赖的响应式数据发生变化时,重新计算测试示例: computed.html,测试vue源码的属性name : '张三' }) const computedObj = computed(() => {return '姓名: ' + obj . value . name }) effect(() => {clearTimeout(timer) obj . value . name = '李四' } , 2000)原创 2023-05-04 20:10:56 · 1150 阅读 · 0 评论 -
数据结构与算法之队列: LeetCode 622. 设计循环队列 (Ts, Py, Go版)
循环队列的一个好处是我们可以利用这个队列之前用过的空间。在一个普通队列里,一旦一个队列满了,我们就不能插入下一个元素,即使在队列前面仍有空间。但是使用循环队列,我们能使用这些空间去存储新的值。设计你的循环队列实现。循环队列是一种线性数据结构,其操作表现基于 FIFO(先进先出)原则并且队尾被连接在队首之后以形成一个循环。它也被称为“环形缓冲器”。原创 2023-05-03 17:53:15 · 587 阅读 · 0 评论 -
数据结构与算法之数组: LeetCode 89. 格雷编码 (Ts, Py, Go版)
n 位格雷码序列 是一个由 2n 个整数组成的序列,其中:每个整数都在范围 [0, 2n - 1] 内(含 0 和 2n - 1),第一个整数是 0,一个整数在序列中出现 不超过一次,每对 相邻 整数的二进制表示 恰好一位不同 ,且第一个 和 最后一个 整数的二进制表示 恰好一位不同,给你一个整数 n ,返回任一有效的 n 位格雷码序列原创 2023-05-01 16:28:31 · 729 阅读 · 0 评论 -
数据结构与算法之数组: LeetCode 605. 种花问题 (Ts, Py, Go版)
给你一个整数数组 flowerbed 表示花坛,由若干 0 和 1 组成,其中 0 表示没种植花,1 表示种植了花。另有一个数 n ,能否在不打破种植规则的情况下种入 n 朵花?能则返回 true ,不能则返回 false。假设有一个很长的花坛,一部分地块种植了花,另一部分却没有。可是,花不能种植在相邻的地块上,它们会争夺水源,两者都会死去。原创 2023-05-01 14:25:41 · 707 阅读 · 1 评论 -
数据结构与算法之数组: LeetCode 914. 卡牌分组 (Ts, Py, Go版)
解释:可行的分组是 [1,1],[2,2],[3,3],[4,4]输入:deck = [1,2,3,4,4,3,2,1]输入:deck = [1,1,1,2,2,2,3,3]仅当你可选的 X >= 2 时返回 true。给定一副牌,每张牌上都写着一个整数。解释:没有满足要求的分组。原创 2023-05-01 01:01:00 · 1176 阅读 · 1 评论 -
数据结构与算法之数组: LeetCode 17. 电话号码的字母组合 (Ts, Py, Go版)
给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合。答案可以按 任意顺序 返回。给出数字到字母的映射如下(与电话按键相同)。注意 1 不对应任何字母。原创 2023-04-29 23:31:30 · 1012 阅读 · 1 评论 -
数据结构与算法之字符串: LeetCode 20. 有效的括号 (Ts, Py, Go版)
给定一个只包括 ‘(’,‘)’,‘{’,‘}’,‘[’,‘]’ 的字符串 s ,判断字符串是否有效。原创 2023-04-29 17:45:45 · 1216 阅读 · 1 评论 -
数据结构与算法之字符串: LeetCode 696. 计数二进制子串 (Ts, Py, Go版)
给定一个字符串 s,统计并返回具有相同数量 0 和 1 的非空(连续)子字符串的数量,并且这些子字符串中的所有 0 和所有 1 都是成组连续的。重复出现(不同位置)的子串也要统计它们出现的次数。原创 2023-04-28 12:32:06 · 917 阅读 · 1 评论 -
Typescript 中的函数应用
参数类型和函数类型命名函数function add(x:number, y:number):number { return x + y;}匿名函数var add = function(x:number, y:number):string { return "Hello Ts";}指定参数具体意义的写法var myTs:(name:string, ...原创 2018-07-16 21:57:22 · 386 阅读 · 0 评论 -
Typescript 中的类的应用
类的创建class Person { // 属性 name: string; age: number; // 构造函数 constructor(name:string, age:number) { this.name = name; this.age = age; } // 方法 print() { console.log('name...原创 2018-07-16 23:10:35 · 1184 阅读 · 0 评论