本文将详细介绍 TypeScript 联合类型的定义、使用场景和注意事项，并提供一些示例来帮助理解。定义联合类型在 TypeScript 中，可以使用 | 符号将多个类型组合成一个联合类型。...使用联合类型类型断言当我们使用联合类型的变量时，有时候需要告诉 TypeScript 具体的类型，以便进行相应的操作。可以使用类型断言（Type Assertion）来实现。...交叉类型与联合类型的结合在 TypeScript 中，还可以使用交叉类型（Intersection Types）和联合类型结合使用，从而实现更复杂的类型定义。...联合类型的限制和注意事项在使用联合类型时，需要注意以下几点：联合类型只能使用联合类型的公共属性或方法，即类型中共有的属性和方法；联合类型不会进行类型缩小，即不能在运行时判断具体的类型；无法对联合类型的变量进行修改...通过灵活使用联合类型，我们可以处理多种类型的变量，提高代码的可读性和可维护性。在实际开发中，根据具体的需求选择合适的联合类型，有助于编写出更健壮和可靠的 TypeScript 代码。
导入属性 TypeScript 5.3支持导入属性提案的最新更新。 导入属性的一个用例是向运行库提供有关模块预期格式的信息。...缩小与布尔值比较的范围 有时候，你可能会发现自己在一个条件下与true或false进行直接比较。...通过比较非规范化相交进行优化 在TypeScript中，联合和交集始终遵循特定的形式，其中交集不能包含联合类型。...|(SomeType & Type99999NINE)的联合。 当检查一个联合体是否可以赋值给某个目标类型时，我们必须检查联合体的每个成员是否都可以赋值给目标类型，这可能会非常慢。...有关更多信息，您可以在此处查看所涉及的工作。 突破性变化和正确性改进 lib.d.ts 变化 为DOM生成的类型可能会对您的代码库产生影响。
下面我们通过几个例子来了解 TypeScript 的高级类型推断是如何工作的。 1....四、利用 TypeScript 类型谓词实现精准类型检查 TypeScript 的类型谓词（Type Predicates）提供了一种在条件块中缩小类型范围的方法，帮助你进行更准确的类型检查，从而减少类型断言的需求...Shape 类型是 Square 和 Rectangle 的联合类型。 2、区分联合类型的应用 通过区分联合类型，我们可以在处理联合类型时利用 kind 属性进行类型检查。...这种方式避免了类型断言，保证了类型检查的准确性。 3、区分联合类型的优势 使用区分联合类型有以下几个优势： 类型安全：通过共同的区分属性，可以确保在处理不同类型时的类型安全性，避免类型错误。...区分联合类型是 TypeScript 提供的强大特性，可以帮助你在处理复杂类型集合时进行更精确的类型检查。掌握这一特性，可以让你的代码更加健壮和易于维护。
它对于确保在使用配置对象或在组件或函数之间传递数据等场景中的不变性特别有用。 11、TypeScript 中的可区分联合有什么用处？...答案：可区分联合（也称为标记联合）是一种结合了联合类型、文字类型和类型保护的模式。 当一个对象可以有多个形状但共享一个公共属性（通常是文字类型）时，可以使用它们，该属性可用于缩小其确切形状。...但是，TypeScript 不支持传统的方法重载（您可以定义多个具有相同名称但参数不同的方法）。 相反，您可以使用可选参数或联合类型来实现类似的功能。...接下来，这几道面试题是针对高级 TypeScript 开发人员的问题，有兴趣的小伙伴可以继续阅读。 26、描述 TypeScript 的类型推断机制如何工作。...28、讨论 TypeScript 中声明合并的工作原理。 答：声明合并是指编译器将多个同名的声明合并到一个定义中。
除 typeof 检查之外，TypeScript 还提供多种不同的类型守卫条件。例如，对 charm 等可区分联合进行检查。...如此一来，我们就能将这些对象作为类似于字典的类型，并在其中通过中括号使用字符串键对它们进行索引。...当我们将对象字面量传递给具有预期类型的内容时，TypeScript 即可检查未在预期类型中得到声明的多余属性。 interface Options { width?...路径归一化速度更快 TypeScript 往往需要对各种文件路径类型进行“归一化”，确保将其转换为编译器能够随处使用的统一格式。...要解决这个问题，您可以添加专门的运行时检查以保证抛出的类型与您的预期类型相符。
它还允许我们只引用枚举类型的一个子集，并缩小这些类型。...TypeScript 5.0 通过为每个计算成员创建唯一的类型，设法将所有枚举转换为联合枚举。这意味着现在可以缩小所有枚举的范围，并将其成员作为类型引用。.../car"; 类型修饰符本身并不是很有用——默认情况下，模块省略仍然会删除导入，并且没有强制区分类型和普通导入和导出。...用户很有帮助，但是很多人使用 TypeScript 来使用 JSDoc 注释对 JavaScript 代码进行类型检查。...其他重大更改和弃用 运行时要求 TypeScript 现在的 target 是 ECMAScript 2018。TypeScript 软件包还将预期的最低引擎版本设置为 12.20。
装饰器现在可以更无缝地与类型系统一起工作，使您能够编写更清晰、更健壮的代码。...所有枚举都是联合枚举 在 TypeScript 5.0 中，所有枚举现在都被视为联合枚举。 联合枚举为使用枚举值提供了更好的类型安全性和改进的人体工程学。...在使用结构类型或使用 TypeScript 对 JavaScript 代码进行类型检查时，此功能特别有用。...编辑器中不区分大小写的导入排序 TypeScript 5.0 通过不区分大小写改进了编辑器中的导入排序。在组织导入时，此更改会导致更自然和直观的排序顺序，从而使代码更清晰、更易读。 13....速度、内存和包大小优化 TypeScript 5.0 带来了各种性能优化，包括更快的类型检查、更少的内存使用和更小的包大小。
其语法和 JavaScript 中的模板字符串一样，但在 TypeScript 中用于表示类型。和具体的字面量类型一起使用的时候，模板字面量会通过拼接内容产生一个新的字符串字面量类型。...而 callBack 回调函数，在被调用的时候会： 接受一个参数，参数的类型和 attributeInThePassedObject 的类型相关联。...同理，和 age 相关联的事件回调函数在被调用的时候应该接受一个 number 类型的参数。...同理，age 改变的时候，对应的回调函数也会接受一个 number 类型的参数。但目前，我们仅仅只是用 any 作为回调函数参数的类型而已。...这里我们需要再次使用模板字面量类型，它可以确保属性的数据类型和属性对应的回调函数的参数类型保持一致。
标记联合类型是其成员类型都定义了字面量类型的区分属性的联合类型。 上面的讲的是理论性的，来几个例子看看更贴切。...在 switch 语句的每个 case 中，TypeScript 编译器将联合类型缩小到它的一个成员类型。...本质上，编译器跟踪程序控制流以缩小标记联合类型。除了 switch 语句之外，它还要考虑条件以及赋值和返回的影响。...使用标记联合类型构建 Redux 操作 标记联合类型真正发挥作用的用例是在 TypeScript 应用程序中使用 Redux 时。...下面的示例展示了 TypeScript 的控制流分析缩小了类型守卫下变量的联合类型。
; console.log(x.length); // disallowed because x is now number } else { ... } } 使用带有区分的联合类型而不是可选字段...(isCircle) as Circle[]; 一个更优雅的解决方案是将isCircle和isRect改为返回类型谓词，这样它们可以帮助Typescript在调用 filter 后进一步缩小类型。...控制推断的类型的通用性或特殊性 在进行类型推理时，Typescript使用了合理的默认行为，其目的是使普通情况下的代码编写变得简单（所以类型不需要明确注释）。有几种方法可以调整它的行为。...const关键字进行初始化，则以下内容将无法正常工作 let shape: { kind: 'circle' | 'rect' } = circle; 使用satisfies来检查类型，而不影响推断的类型...在实践中，您可能会发现直接使用它们并不常见；然而，这些技术被专门为Typescript设计的库大量使用：比如Prisma和tRPC。了解这些技巧可以帮助您更好地了解这些工具如何在引擎盖下工作。
这些静态方法极大地简化了在数组（以及对象或地图等可迭代对象）中对项目进行分组的操作。它通过接受一个可迭代对象和一个分类每个元素应该被放置在哪个组中的函数来工作。...由于两者都共享相同的通用类型，"bomb" 被视为一个有效的推断候选项，类似于值列表 T。简单来说，TypeScript 将 defaultValue 的值推断为 fruits T 的联合。...解决此问题的一种常见方法是添加一个扩展我们预期类型参数的不同类型参数。..."bomb" 的参数不能赋值给类型 ("apple" | "lemon") 的参数这也可以工作，但它更加冗长，并且在签名中 D 可能不会在其他地方使用。...这是引发此更改的 GitHub 问题的参考。总结一下，TypeScript 5.4 Beta 引入了重大改进，其中一个我忘记提到的是：在闭包中保留缩小范围。
如果一个变量有多种类型，读取该变量时，往往需要进行“类型缩小”（type narrowing），区分该值到底属于哪一种类型，然后再进一步处理。...解决方法就是对参数id做一下类型缩小，确定它的类型以后再进行处理。...“类型缩小”是 TypeScript 处理联合类型的标准方法，凡是遇到可能为多种类型的场合，都需要先缩小类型，再进行处理。...实际上，联合类型本身可以看成是一种“类型放大”（type widening），处理时就需要“类型缩小”（type narrowing）。 下面是“类型缩小”的另一个例子。...{ case "http": return 80; case "https": return 443; } } 上面示例中，函数体内部对参数变量scheme进行类型缩小
这其实就是 JavaScript 中的闭包，但是闭包是如何工作的，以及使用闭包的好处和坏处并不在本文的讨论范围之内，不过闭包仍然是非常重要的，不论在 JavaScript 还是 TypeScript 中都非常有用...这可以帮助减少在维护代码类型完备时的代码量和工作量。 可选参数和参数默认值 在 TypeScript 中，所有参数都被假定是必须的。...: string) => string 函数参数的默认值从类型中消失了，取而代之的是该默认值的类型和 undefined 的联合类型。 和可选参数不一样，有默认值的参数不必出现在必选参数后面。...回调函数中的 this 参数 当你传递给第三方库回调函数的时候仍然会有 this 的问题。...用 this 参数可以防止回调函数中的此类错误。
让我们通过这篇文章，深入了解如何从判别联合类型中提取类型，进一步提升我们的编码效率和代码可靠性。 什么是判别联合类型？...TypeScript中的魔法衣橱整理术 在TypeScript中，判别联合类型（Discriminated Unions）使用一个共同的属性，称为判别属性（discriminant），来区分联合类型中的不同类型...当你使用Clothing类型时，TypeScript的类型系统可以使用这个判别属性来缩小类型范围，并根据是Top还是Bottom提供更具体的信息或检查。...判别联合类型允许我们以结构化和类型安全的方式管理这些错误。...handleServerError(error as ServerError); } else { console.error('发生未知错误', error); } } 这个高级示例展示了在服务器应用程序中使用判别联合类型进行错误处理的有效方法
它现在是任何新的 Web/Node 项目的首选配套工具。使用 TypeScript 的好处怎么强调都不为过。然而，了解和理解这个 JavaScript 超集拥有的所有工具是很重要的。...你是否正在投入时间来提高你的TypeScript技能？你想充分利用它吗？有时，由于没有使用正确的 TypeScript 功能并且没有遵循其最佳实践，可能会出现大量代码重复和样板。...1、Unions 联合是最基本且易于使用的 TypeScript 功能之一。它们让我们可以轻松地将多种类型合二为一。交集和联合类型是我们组合类型的方法之一。...，我们如何区分自行车和飞机？...通过使用可区分联合功能。我们将创建一个名为 Vehicles 的枚举并将其用作属性值。
所以也是有回调函数的，只是被封装了，用户看不到，不像我们使用窗口或者框架窗口的时候还需要专门的设置回调函数。...这个问题解释清楚了，剩下就是WM_PAINT消息里面实现的功能了，这个消息里面实现了按钮按下和未按下两种状态的显示效果，通过函数BUTTON_IsPressed来区分这两种状态，返回1就是按下了，返回0.../* 按下状态，按下后，我们通过函数GUI_SetAlpha设置图片显示出来的透明效果， 这样就将按下和未按下两种状态区分开了。...1 : 0返回当前按钮是按下还是未按下，按下的话，返回数值1，未按下返回数值0。根据这个返回值，在WM_PIANT消息里面绘制按钮按下和未按下两种状态的显示效果。...按钮回调函数中，除了WM_PIANT消息，其它消息的处理继续使用系统默认的函数BUTTON_Callback(pMsg)来实现。
本教程使用 Node.js 版本 14.3.0 和 npm 版本 6.14.5 进行了测试。...在本节中，我们将学习如何创建函数类型，它们是表示特定函数签名的类型。在将函数传递给其他函数时，创建与特定函数匹配的类型特别有用，例如，具有本身就是函数的参数。这是创建接受回调的函数时的常见模式。...举一个更具体的例子，假设我们正在创建一个名为 onEvent 的事件侦听器函数，它接收事件名称作为第一个参数，第二个参数接收事件回调。...我们正在使用联合类型 User | null 作为 Promise 泛型的类型参数。...: string): User | undefined { // ... code } 该函数使用 | 运算符为 idOrEmailOrAge 和返回值组成类型的联合。
中是一个常见的类型推断过程，基于我们可能进行的某些检查或条件，TypeScript 能够自动推断出变量的具体类型，这就使得该变量的类型范围被“缩小”或者说“窄化”。...可是，在数组的 map 方法中，TypeScript 不能保证 url 的类型已经窄化为 URL，因为他无法确定在回调函数被执行的当下，url是否仍然是 URL 对象，这是因为在函数的闭包中，变量可能会被之后的代码改变...因此，TypeScript 5.4 做了改进，当参数和 let 变量在非提升函数中使用时，类型检查器将查找最后一个赋值点。...如果找到一个，TypeScript 可以从包含该函数的外部安全地窄化，那上面的代码示例就可以正常工作了。 但是还需要注意一点，如果我们是在嵌套函数中的任何地方对变量进行了赋值，类型收窄还是不起作用的。...在 TypeScript 5.4 之前的版本中，对于 first 和 second 的赋值，TypeScript 会仅仅基于 U 的约束来进行类型推断而不会充分考虑可能的情况。
type PropTypeUnion = Foo[keyof Foo]; // number | boolean | string 使用字面量联合类型进行索引类型访问，其结果就是将联合类型每个分支对应的类型进行访问后的结果...注意，在未声明索引签名类型的情况下，不能使用 NumberRecord[string] 这种原始类型的访问方式，而只能通过键名的字面量类型来进行访问。...，在它的返回值中，不在使用 boolean 作为类型标注，而是使用 input is string： input 是函数的某个参数 is string 即 is 预期类型，如果这个函数成功返回 ture...，存在具有区分能力的辨识属性称为可辨识联合类型。...可辨识属性可以使结构层面的，如 结构 A 的属性 prop 是数组，而 结构 B 的属性 prop 是对象，这样就可以通过 prop 的类型来区分 结构 A 和 结构 B。
类型守卫是一种TypeScript技术，用于获取变量类型信息，通常使用在条件块语句中。类型守卫是返回布尔值的常规函数，接受一个类型并告诉TypeScript是否可以缩小到更具体的类型。...TypeScript使用了一些内置的JavaScript操作符，比如typeof、instanceof和in操作符，这些操作符用于确定一个对象是否包含属性。...in类型守卫检查对象是否具有特定的属性，并使用该属性区分不同的类型。...如果一个变量的类型未知，但它等于另一个具有精确类型的变量，那么Typescript会使用该已知变量提供的信息来缩小第一个变量的类型: function getValues(a: number | string...在这种情况下，Typescript把它缩小到字符串。如果没有收缩，a的类型仍然不明确，因为它可以是数字或字符串。 带有谓词的自定义类型守卫 创建一个自定义类型守卫通常是使用类型守卫的强大选项。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
