Typescript
文章平均质量分 73
Wang's Blog
Keep learning for the innovation era.
展开
-
Typescript高级: 深入实践Record类型
Record 类型是TS中其众多强大特性之一它为我们提供了创建键值对映射的强大能力极大地增强了代码的灵活性与类型安全性。原创 2024-06-03 19:30:00 · 2867 阅读 · 1 评论 -
Typescript高级: 深入理解in与in keyof
in和keyof是两个非常重要的操作符,它们允许开发者对对象的键(key)进行更精细化的操作和约束in 关键词in关键词则在TypeScript的类型上下文中有特定的用途,它用于映射类型和类型查询当与keyof一起使用时,in可以遍历一个类型的所有键,并在类型层次上进行操作比如创建新的类型映射类型、条件判断或是泛型约束keyof 关键词keyof T是一个类型查询操作符,其中T是一个类型它返回一个联合类型,该联合类型包含了T所有公开属性的键(即属性名)原创 2024-06-02 22:39:24 · 947 阅读 · 1 评论 -
Typescript高级: 深入理解extends keyof语法
在TypeScript中,extends关键字是类型系统中一个极其重要的组成部分它不仅用于类的继承,也是类型兼容性检查和泛型约束的关键机制特别是当它与keyof关键字结合,形成的结构时它为类型系统带来了强大的灵活性和表达能力,让我们能够在泛型中对对象的属性进行操作和约束。原创 2024-06-02 21:27:33 · 976 阅读 · 0 评论 -
Typescript高级: 深入理解Omit类型和Pick类型
Omit 是一个非常实用的工具类型,它的功能是从一个已知的对象类型中排除某些属性,并返回一个新的对象类型这在处理复杂对象结构、实现更严格的类型限制时非常有用Pick 的工作原理基于 TypeScript 的映射类型当我们使用Pick时,TypeScript 会遍历 K 中的每一个属性并在新的类型中创建一个同名的属性其类型与原始类型 T 中的对应属性相同。原创 2024-06-02 16:51:04 · 1084 阅读 · 0 评论 -
Typescript高级: 深入理解Partial类型和Required类型
在 TypeScript 中,Partial 是一个非常实用的内置类型工具它允许我们轻松地将某个类型的所有属性变为可选的这对于处理可能缺少某些属性的对象时特别有用然而,Partial 背后的概念和它在实际开发中的应用场景远比表面看起来要丰富Partial 是 TypeScript 中一个非常实用的类型工具,它允许我们轻松地将类型的所有属性变为可选的通过深入理解 Partial 的原理和使用场景,我们可以更有效地利用它来提高代码的可读性和可维护性。原创 2024-06-02 12:01:34 · 1855 阅读 · 1 评论 -
Typescript高级: 深入理解Exclude类型
Exclude 是一个强大的类型操作符,用于从一个类型集合中排除另一个类型集合中存在的类型这对于创建更加精确和动态的类型定义非常有用,尤其是在处理复杂的类型系统和进行类型筛选时Exclude 是一个高级类型,用于从类型 T 中排除那些可以赋值给类型 U 的所有成员换句话说,Exclude 类型返回一个新类型,该类型包含类型 T 中所有不属于类型 U 的成员never : T;Exclude 类型操作符是 TypeScript 强大类型系统的一个缩影。原创 2024-06-02 09:10:05 · 379 阅读 · 0 评论 -
Typescript高级: 深入理解ConstructorParameters类型及借助infer构建带参数的工厂实例方法
在TypeScript中,利用泛型和类型推断,我们可以编写出既灵活又安全的代码特别是在处理类和其实例化过程中,这些特性显得尤为重要我们着重关注构造函数参数(constructor parameters)的类型处理以及如何利用泛型工厂函数来创建类的实例构造函数是面向对象编程中初始化对象状态的核心手段在TypeScript中,通过为构造函数及其参数添加类型注解可以确保在创建对象时遵循预定义的类型规则,从而提高程序的健壮性。原创 2024-06-01 22:51:13 · 989 阅读 · 0 评论 -
Typescript高级: 深入理解infer关键字
在 TS 中,infer 是一个高级类型操作,特别是条件类型和映射类型中非常有用的关键字它在泛型中使用也会是一个强大工具,增强了类型推断的能力,让开发者更灵活地处理和操作类型它允许在泛型类型推导过程中捕获一个具体的类型,这对于编写复杂的类型转换和映射操作特别有用infer 的定义infer 表示在 extends 条件语句中以占位符出现的用来修饰数据类型的关键字被修饰的数据类型等到使用时才能被推断出来infer 占位符式的关键字出现的位置。原创 2024-06-01 21:45:36 · 1490 阅读 · 0 评论 -
Typescript高级: 深入理解交叉类型与联合类型
在TypeScript这一强大的类型系统中,开发者可以利用交叉类型(Intersection Types)和联合类型(Union Types)来设计复杂且灵活的类型结构,从而增强代码的类型安全性与表达能力本文将深入探讨这两种类型的特点、应用场景,并通过实际示例,展示如何在objtype1 & objtype2 & objtype3与objtype1 | objtype2中运用它们定义了三个泛型参数,代表输入对象的类型。通过泛型,函数可以处理不同类型的对象而无需明确指定具体类型交叉类型:通过。原创 2024-05-20 22:30:00 · 845 阅读 · 0 评论 -
Typescript高级: 深入理解Extract类型
在TypeScript这一逐渐成为前端开发首选的静态类型检查语言中,类型系统提供了丰富的工具来帮助开发者编写更加健壮和可维护的代码。其中,是一个强大的内置实用类型,用于从一个联合类型T中提取出属于另一个类型U的那些类型。本文将深入探讨Extract类型的工作原理、应用场景以及如何有效利用它来提升代码的类型安全性和表达力。Extract是一个条件类型,其定义为:从类型T中选取那些同时也可以被类型U赋值的类型简而言之,它像一个过滤器,保留了T中与U兼容的部分。原创 2024-05-20 20:45:00 · 835 阅读 · 0 评论 -
Typescript高级: 泛型 vs 装饰器
泛型和装饰器各有千秋,选择哪一种取决于具体的需求和偏好泛型在处理类型抽象和代码复用上表现出色特别是在不需要修改类或方法行为,仅需调整类型逻辑时而装饰器在需要动态修改类或方法行为,实现元编程时更为强大在某些场景下,通过巧妙设计,泛型可以成为装饰器的有效替代方案为代码带来更高的可读性和可维护性最终,理解它们的特性并灵活运用,将极大提升TS编程技能。原创 2024-05-20 19:00:00 · 669 阅读 · 0 评论 -
Typescript高级: 深入理解工厂函数类型
尽管构造函数类型和工厂函数类型在实际应用中可以紧密相连它们的核心区别在于:构造函数类型专注于初始化单一类型实例的细节工厂函数类型则提供了一个更高层次的抽象,根据条件或参数决定创建哪种类型的实例,增加了灵活性和解耦因此,它们虽有联系,但在设计意图和应用场景上有所区分。原创 2024-05-19 23:09:18 · 697 阅读 · 0 评论 -
Typescript高级: 基于泛型T的函数重载来实现各个类型数据的排序
现在我们来实现一个场景,基于泛型来写排序的工具类这个工具类实现对各种类型的数据进行排序目前排序算法选择的是快排。原创 2024-05-16 21:35:21 · 874 阅读 · 0 评论 -
Typescript高级: 详解 any、object、Object、Record<any, any> 和泛型 T
any 类型是 TypeScript 中一个特殊的类型,它表示可以是任意类型的值。换句话说,当你将一个变量声明为 any 类型时,你可以为它赋予任何类型的值。虽然 object 类型本身不需要类型守卫,但如果你在处理联合类型。使用 any 类型会失去 TypeScript 的类型检查能力。但通过 is 类型的检查,我们仍然可以安全地使用字符串的方法。但你知道这些属性都有一个共同的键类型,你可以使用索引签名。在上面的例子中,anyVar 可以被赋值为任何类型的值。any 类型它允许你在编译时绕过类型检查。原创 2024-05-12 22:47:34 · 1250 阅读 · 0 评论 -
Typescript高级: 对泛型和多态的应用, 实现Java中的ArrayList和LinkedList
LinkedList 类实现了 List 接口,并包含了维护链表状态的重要属性。在 LinkedList 的实现中,节点被定义为一个名为 N 的内部类。ArrayList 这个类继承List接口,并实现其所有的方法。删除元素:remove 方法遍历链表,查找并删除指定的元素。获取元素:get 方法通过遍历链表找到指定位置的元素。在基础List类型中,我们定义了如下方法和属性。添加元素:add 方法在链表尾部添加一个新节点。这里面实现了方法的多态和泛型。原创 2024-05-12 19:28:07 · 957 阅读 · 0 评论 -
Typescript高级: 深入理解 keyof, extends 以及 extends keyof
在TypeScript的世界中,extends和keyof是两个强大的工具它们分别用于约束类型和获取对象类型的键当这两者结合使用时,我们可以创建出更为复杂和精细的类型操作从而增强TypeScript的类型安全性通过结合使用extends和keyof,可以在TS中创建更为精细和安全的类型操作这种组合使我们能够确保类型参数的键存在于对象中,并据此推断出相应值的类型这不仅增强了代码的类型安全性,还提高了代码的可读性和可维护性。原创 2024-05-12 15:54:15 · 1490 阅读 · 0 评论 -
Typescript高级: 深入理解断言
关于断言,就是TS 类型断言,即把两种能有重叠关系的数据类型进行相互转换的一种 TS 语法把其中的一种数据类型转换成另外一种数据类型类型断言和类型转换产生的效果一样,但语法格式不同TS 类型断言语法格式:A 数据类型的变量 as B 数据类型注意:A 数据类型和 B 数据类型必须具有重叠关系。原创 2024-05-08 18:52:41 · 1063 阅读 · 1 评论 -
Typescript高级: 深入理解const和readonly
在编程语言中,const 和 readonly 是两种用于声明常量或只读属性的关键字它们帮助开发者确保数据的不可变性,从而提高代码的安全性和可维护性虽然这两个概念在不同的编程语言中可能有所差异但本文将以 TypeScript 为例,深入探讨 const 和 readonly 的使用场景const 和 readonly 作为不变性编程的核心概念在保证代码质量、减少bug、优化性能等方面发挥着重要作用它们鼓励开发者采用更安全、更易于推理的编程模式,尤其是在团队协作和长期维护的项目中。原创 2024-05-08 20:45:00 · 866 阅读 · 0 评论 -
Typescript高级: 函数重载和constructor重载
在 TypeScript 中,类的重载主要涉及到方法的重载(Overloading),而很少涉及构造函数的重载因为 TypeScript 的类构造函数不支持像一些其他语言(如 C++ 或 Java)那样的传统意义上的重载类的构造函数(constructor)本身并不支持传统意义上的重载,因为构造函数只有一个实际的实现但是,可以通过为构造函数提供不同的参数类型或数量来模拟构造函数的重载效果这通常是通过使用联合类型(union types)和类型守卫(type guards)来实现的。原创 2024-03-27 21:08:40 · 1171 阅读 · 0 评论 -
Typescript高级: is 类型守卫
在 TypeScript 中,is关键字主要用于类型守卫(Type Guards)类型守卫是一种表达式,它执行一些运行时检查,并缩小变量的类型范围is关键字通常与类型断言一起使用,以提供更精确的类型信息。原创 2024-03-27 20:36:34 · 519 阅读 · 0 评论 -
前端小技巧: TS实现一个获取传入参数类型的函数
核心API: Object.prototype.toString.call原创 2023-12-08 22:29:58 · 649 阅读 · 0 评论 -
前端小技巧: 写一个异步程序示例, 使用任务队列替代promise和async/await等语法糖
可以使用懒人每做几件事,就要休息一会儿,并且不会影响做事的顺序这种场景来模拟, 定义单例名称为: lazyMan, 支持 sleep 和 eat 两个方法, 支持链式调用原创 2023-12-07 21:01:31 · 263 阅读 · 0 评论 -
前端小技巧: TS实现数组转树,树转数组
找到parentNode,加入其children。遍历数组,生成 tree node。原创 2023-10-29 10:17:12 · 574 阅读 · 0 评论 -
前端小技巧: TS实现new出一个对象的内部过程
{} 创建空对象,原型指向 Object.prototype。Object.create 创建空对象,原型指向传入的参数。原创 2023-10-29 20:50:39 · 862 阅读 · 0 评论 -
前端小技巧: TS实现深拷贝函数,考虑 Map, Set, 循环引用
【代码】前端小技巧: TS实现深拷贝函数,考虑 Map, Set, 循环引用。原创 2023-10-29 16:47:14 · 896 阅读 · 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 · 1095 阅读 · 0 评论 -
前端小技巧: TS实现柯里化函数
【代码】前端小技巧: TS实现柯里化函数。原创 2023-10-29 11:05:48 · 314 阅读 · 0 评论 -
数据结构与算法之字典: LeetCode 1. 两数之和 (Typescript版)
给定一个整数数组nums和一个整数目标值target,请你在该数组中找出和为目标值target的那两个整数,并返回它们的数组下标,你可以假设每种输入只会对应一个答案。但是,数组中同一个元素在答案里不能重复出现,你可以按任意顺序返回答案原创 2023-09-26 19:42:24 · 196 阅读 · 0 评论 -
数据结构与算法之集合: LeetCode 349. 两个数组的交集 (Typescript版)
3 )使用数组filter+数组includes方法或indexOf方法。2 )使用数组filter+集合的has方法 优化版。1 )使用数组filter+集合的has方法。4 )排序 + 双指针。原创 2023-09-25 20:11:24 · 458 阅读 · 1 评论 -
数据结构与算法之链表: 使用链表指针获取JSON节点值的算法实现 (Typescript版)
eval在严格模式下是被禁止的,所以不推荐使用。给定如下json和指定的位置,求最终的值。3 ) 使用Function的算法。2 ) 使用eval的算法。原创 2023-09-25 19:06:48 · 186 阅读 · 0 评论 -
数据结构与算法之链表: 基于链表实现js中的原型链原理与算法实现 (Typescript版)
若A沿着原型链能找到B.prototype, 则A instanceof B为true。如果在A对象上没有找到x属性,那么会沿着原型链找x属性。2 )不同类型查找, 交叉验证。原创 2023-09-25 12:04:35 · 145 阅读 · 0 评论 -
数据结构与算法之二叉树: LeetCode 98. 验证二叉搜索树 (Typescript版)
【代码】数据结构与算法之二叉树: Leetcode 98. 验证二叉搜索树 (Typescript版)原创 2023-07-22 10:46:29 · 439 阅读 · 0 评论 -
数据结构与算法之二叉树: LeetCode 29. 路径总和 (Typescript版)
给你二叉树的根节点 root 和一个表示目标和的整数 targetSum。判断该树中是否存在 根节点到叶子节点 的路径,这条路径上所有节点值相加等于目标和 targetSum。如果存在,返回 true;否则,返回 false。叶子节点 是指没有子节点的节点。原创 2023-05-28 00:01:00 · 484 阅读 · 0 评论 -
数据结构与算法之二叉树: LeetCode 102. 二叉树的层序遍历 (Typescript版)
给你二叉树的根节点 root ,返回其节点值的 层序遍历 。 (即逐层地,从左到右访问所有节点)原创 2023-05-25 23:03:59 · 480 阅读 · 0 评论 -
数据结构与算法之二叉树: LeetCode 111. 二叉树的最小深度 (Typescript版)
最小深度是从根节点到最近叶子节点的最短路径上的节点数量。就 给定一个二叉树,找出其最小深度。说明:叶子节点是指没有子节点的节点。原创 2023-05-23 22:29:27 · 362 阅读 · 0 评论 -
数据结构与算法之二叉树: LeetCode 104. 二叉树的最大深度 (Typescript版)
给定二叉树 [3,9,20,null,null,15,7]二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。说明: 叶子节点是指没有子节点的节点。给定一个二叉树,找出其最大深度。返回它的最大深度 3。原创 2023-05-22 22:31:07 · 426 阅读 · 0 评论 -
数据结构与算法之二叉树: LeetCode 145. 二叉树的后序遍历 (Typescript版)
给你一棵二叉树的根节点 root ,返回其节点值的 后序遍历 。原创 2023-05-18 19:54:29 · 520 阅读 · 1 评论 -
数据结构与算法之二叉树: Leetcode 94. 二叉树的中序遍历 (Typescript版)
给定一个二叉树的根节点 root ,返回 它的 中序 遍历。进阶: 递归算法很简单,你可以通过迭代算法完成吗?原创 2023-05-18 12:15:01 · 375 阅读 · 0 评论 -
数据结构与算法之二叉树: LeetCode 144. 二叉树的前序遍历 (Typescript版)
二叉树的前序遍历,给你二叉树的根节点 root ,返回它节点值的 前序 遍历原创 2023-05-18 11:25:39 · 148 阅读 · 0 评论 -
数据结构与算法之链表: LeetCode 237. 删除链表中的节点 (Ts, Py, Go版)
链表的所有值都是 唯一的,并且保证给定的节点 node 不是链表中的最后一个节点。给你一个需要删除的节点 node。你将 无法访问 第一个节点 head。注意,删除节点并不是指从内存中删除它。有一个单链表的 head,我们想删除它其中的一个节点 node。原创 2023-05-05 15:58:05 · 469 阅读 · 0 评论