TypeScript条件类型怎么使用

这篇文章主要讲解了“TypeScript条件类型怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“TypeScript条件类型怎么使用”吧！当 extends 用于表示条件判断时，可以总结出以下规律若位于 extends 两侧的类型相同，则 extends 在语义上可理解为 ===，可以参考如下例子:若位于 extends 右侧的类型包含位于 extends 左侧的类型(即狭窄类型 extends 宽泛类型)时，结果为 true，反之为 false。可以参考如下例子:当 extends 作用于对象时，若在对象中指定的 key 越多，则其类型定义的范围越狭窄。可以参考如下例子:考虑如下 Demo 类型定义:结合用于条件判断时的 extends，可知 ‘a’ | ‘b’ | ‘c’ extends ‘a’ 是 false, 因此 Demo 结果是 ‘a’ | ‘b’ | ‘c’ 么?
查阅官网，其中有提到:When conditional types act on a generic type, they become distributive when given a union type.即当条件类型作用于泛型类型时，联合类型会被拆分使用。即 Demo 会被拆分为 ‘a’ extends ‘a’、’b’ extends ‘a’、’c’ extends ‘a’。用伪代码表示类似于:此外根据 never 类型的定义 —— never 类型可分配给每种类型，但是没有类型可以分配给 never(除了 never 本身)。即 never | ‘b’ | ‘c’ 等价于 ‘b’ | ‘c’。因此 Demo 的结果并不是 ‘a’ | ‘b’ | ‘c’ 而是 ‘b’ | ‘c’。心细的读者可能已经发现了 Demo 类型的声明过程其实就是 TypeScript 官方提供的工具类型中 Exclude 的实现原理，其用于将联合类型 ExcludedUnion 排除在 Type 类型之外。基于 Demo 类型定义，进一步地还可以实现官方工具类型中的 Omit，其用于移除对象 Type
中满足 keys 类型的属性值。
}

interfaceTodo{
title:string;
description:string;
completed:boolean;
}

typeT=Omit//T:{title:string;completed:boolean}如果想让 Demo 的结果为 ‘a’ | ‘b’ | ‘c’ 是否可以实现呢? 根据官网描述:Typically, distributivity is the desired behavior. To avoid that behavior, you can surround each免费云主机、域名 side of the extends keyword with square brackets.如果不想遍历泛型中的每一个类型，可以用方括号将泛型给括起来以表示使用该泛型的整体部分。
type Demo = [T] extends [U] ? never : T在箭头函数中使用三元表达式时，从左向右的阅读习惯导致函数内容区若不加括号则会让使用方感到困惑。比如下方代码中 x 是函数类型还是布尔类型呢？在 eslint 规则 no-confusing-arrow 中，推荐如下写法：在 TypeScript 的类型定义中，若在箭头函数中使用 extends 也是同理，由于从左向右的阅读习惯，也会导致阅读者对类型代码的执行顺序感到困惑。=
(arg:Head)=>HasTailextendstrue?Curry,R>:R因此在箭头函数中使用 extends 建议加上括号，对于进行 code review 有很大的帮助。=
(arg:Head)=>(HasTailextendstrue?Curry,R>:R)在 TypeScript 中，一般会结合 extends 来使用类型推导 infer 语法。使用它可以实现自动推导类型的目的。比如用其来实现工具类型 ReturnType ，该工具类型用于返回函数 Type 的返回类型。
type ReturnType = T extends (…args: any) => infer U ? U : never结合 extends 与类型推导还可以实现与数组相关的 Pop、Shift、Reverse 工具类型。Pop:Shift:Reverse我们也可以使用条件类型来判断 A、B 两个类型是否完全相等。当前社区上主要有两种方案:方案一: 参考 issue。目前该方案的唯一缺点是会将 any 类型与其它任何类型判为相等。方案二: 参考 issue。目前该方案的唯一缺点是在对交叉类型的处理上有一点瑕疵。感谢各位的阅读，以上就是“TypeScript条件类型怎么使用”的内容了，经过本文的学习后，相信大家对TypeScript条件类型怎么使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是云技术，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: vue静态路由如何写

这篇“vue静态路由如何写”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue静态路由如何写”文章吧。 Vue是一款流行的JavaScript框…