首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

TypeScript:同一类型/接口内的条件类型

TypeScript是一种静态类型的编程语言,它是JavaScript的超集,可以为JavaScript代码提供静态类型检查和更强大的编程功能。TypeScript中的一个重要概念是条件类型(Conditional Types),它允许我们在同一类型或接口内根据条件来选择不同的类型。

条件类型在TypeScript中的语法形式为T extends U ? X : Y,其中T和U是类型参数,X和Y是根据条件选择的类型。条件类型可以根据T是否可以赋值给U来确定最终选择的类型。

条件类型的一个常见应用是在泛型类型中进行类型推断。例如,我们可以定义一个泛型函数,该函数根据输入参数的类型来确定返回值的类型:

代码语言:txt
复制
function example<T>(arg: T): T extends string ? number : boolean {
  return typeof arg === 'string' ? arg.length : typeof arg === 'number' ? arg * 2 : typeof arg === 'boolean' ? !arg : false;
}

在这个例子中,条件类型T extends string ? number : boolean表示如果T是string类型,则返回number类型,否则返回boolean类型。函数内部使用了三元运算符根据参数的类型来确定返回的结果。

对于条件类型的推荐腾讯云产品和产品介绍链接,这里不提及具体品牌商。但是,腾讯云也提供了丰富的云计算服务,如云服务器、云数据库、云存储等,可以通过腾讯云官方网站查询相关产品和详细介绍。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

TypeScript条件类型

条件类型(Conditional Types)是TypeScript中一种强大类型系统特性,它允许我们根据类型关系来推断和选择类型。...条件类型通常与泛型一起使用,使我们可以在类型级别上编写更加灵活和复杂代码。讲解基础用法基本语法条件类型基本语法如下:T extends U ?...根据条件结果,返回不同字符串类型。分布式条件类型条件类型还可以在联合类型上使用,这称为分布式条件类型。当我们传入一个联合类型参数时,条件类型会遍历每个成员,并根据条件进行推断。...条件类型TypeScript类型系统一个重要部分,它允许我们在类型级别上进行条件分支和类型选择。通过巧妙地组合泛型、联合类型条件类型,我们可以定义出非常复杂且强大类型。...在实际应用中,条件类型通常与内置预定义条件类型(如Exclude、Extract、NonNullable等)结合使用,以实现更加复杂和有用类型转换和操作。

23340

TypeScript条件类型(十)

TypeScript 2.8版本引入了条件类型(Conditional Types),TS条件类型可以进行类型选择,具体用法可以使用三元运算符实现,JS中三元运算符用法一样,通过判断得到最终结果,TS...条件类型最终得到是数据类型。...条件类型条件类型允许根据一个或多个条件类型进行推断,并且还能在在类型级别上进行复杂逻辑运算和类型操作。一、基本用法当T类型可以赋值给U类型时,则返回X类型,否则返回Y类型。...X : Y列举例子如下:其中TypeName为条件类型,根据T具体类型返回不同类型字符串,也就是字面量类型。type TypeName = T extends string ?...| {}> // "function" | "object"二、分布式条件类型条件类型中,如果被检查类型是一个 “裸” 类型参数,即没有被数组、元组或 Promise 等包装过,则该条件类型被称为分布式条件类型

21820
  • TypeScript】TS条件类型(十二)

    TypeScript 2.8版本引入了条件类型(Conditional Types),TS条件类型可以进行类型选择,具体用法可以使用三元运算符实现,JS中三元运算符用法一样,通过判断得到最终结果,TS...条件类型最终得到是数据类型。...条件类型====条件类型允许根据一个或多个条件类型进行推断,并且还能在在类型级别上进行复杂逻辑运算和类型操作。一、基本用法当T类型可以赋值给U类型时,则返回X类型,否则返回Y类型。...X : Y列举例子如下:其中TypeName为条件类型,根据T具体类型返回不同类型字符串,也就是字面量类型。type TypeName = T extends string ?...| {}> // "function" | "object"二、分布式条件类型条件类型中,如果被检查类型是一个 “裸” 类型参数,即没有被数组、元组或 Promise 等包装过,则该条件类型被称为分布式条件类型

    20910

    TypeScript系列教程九《类型转换》-- 条件类型

    类型转换是TS最好玩也是语言灵魂,想玩好需要熟练各种手段和工具,下面一一介绍类型转换一些常用手段。 条件类型 ---- 根据输入来决定输出是大多数有用程序核心,js也不例外。...就像使用类型保护缩小范围可以为我们提供更具体类型一样,条件类型真正分支将通过我们检查类型进一步约束泛型。...条件类型使用infer 我们只是发现自己使用条件类型来应用约束,然后提取类型。这是一个非常常见操作,条件类型使它变得更容易。...条件类型为我们提供了一种使用infer关键字从我们在true分支中比较类型中进行推断方法。...当条件类型作用于泛型类型时,当给定一个联合类型时,它们将成为分布式

    70820

    索引类型、映射类型条件类型_TypeScript笔记12

    条件类型无非两种可能类型,所以let b: string | number = a;一定是合法(无论x是什么类型) 可分配条件类型 可分配条件类型(distributive conditional...y = x; } 条件类型类型推断 在条件类型extends子句中,可以通过infer声明引入一个将被推断类型变量,例如: type ReturnType = T extends (......TypeScript 还内置了一些常用条件类型: // 从 T 中去掉属于 U 类型部分,即之前示例中 Diff type Exclude = T extends U ?...R : any; (摘自TypeScript/lib/lib.es5.d.ts) 具体示例见Predefined conditional types 四.总结 除类型组合外,另2种产生新类型方式是类型查询与类型映射...类型查询: 索引类型:取现有类型一部分产生新类型 类型映射: 映射类型:对现有类型做映射得到新类型 条件类型:允许以类型兼容关系为条件进行简单三目运算,用来表达非均匀类型映射 参考资料 Advanced

    1.7K10

    TypeScript 条件类型精读与实践

    TypeScript 也不例外,使用条件类型可以描述输入类型与输出类型之间关系。 本文同步首发在个人博客中,欢迎订阅、交流。...用于条件判断时 extends 当 extends 用于表示条件判断时,可以总结出以下规律 若位于 extends 两侧类型相同,则 extends 在语义上可理解为 ===,可以参考如下例子: type...工具类型 心细读者可能已经发现了 Demo 类型声明过程其实就是 TypeScript 官方提供工具类型中 Exclude 实现原理,其用于将联合类型...true : false) 在 TypeScript 类型定义中,若在箭头函数中使用 extends 也是同理,由于从左向右阅读习惯,也会导致阅读者对类型代码执行顺序感到困惑。...Curry, R> : R) 结合类型推导使用条件类型TypeScript 中,一般会结合 extends 来使用类型推导 infer 语法。使用它可以实现自动推导类型目的。

    71720

    TypeScript 官方手册翻译计划【九】:类型操控-条件类型

    因为我也是 TypeScript 初学者,所以无法保证翻译百分之百准确,若有错误,欢迎评论区指出; 翻译内容:暂定翻译内容为 TypeScript Handbook,后续有空会补充翻译文档其它部分;...项目地址:TypeScript-Doc-Zh,如果对你有帮助,可以点一个 star ~ 本章节官方文档地址:Conditional Types 条件类型 在大多数应用核心中,我们需要基于输入决定执行哪一个逻辑...条件类型就可以用于描述输入类型和输出类型之间联系。...在条件类型中进行推断 在上面的例子中,我们使用条件类型去应用约束并提取出类型。由于这种操作很常见,所以条件类型提供了一种更简单方式来完成。...条件类型作用于泛型上时,如果给定一个联合类型,那么这时候条件类型是可分配

    79820

    TypeScript函数类型

    { return x+y; }; 这是可以通过编译,不过事实上,上面的代码只对等号右侧匿名函数进行了类型定义,而等号左边 mySum,是通过赋值操作进行类型推论而推断出来。...{ return x+y; }; 注意不要混淆了 TypeScript => 和 ES6 中 =>。...在 TypeScript 类型定义中,=> 用来表示函数定义,左边是输入类型,需要用括号括起来,右边是输出类型。...==-1; } 采用函数表达式|接口定义函数方式时,对等号左侧进行类型限制,可以保证以后对函数名赋值时保证参数个数、参数类型、返回值类型不变。...在编辑器代码提示中,可以正确看到前两个提示。 注意,TypeScript 会优先从最前面的函数定义开始匹配,所以多个函数定义如果有包含关系,需要优先把精确定义写在前面。

    2K30

    TypeScript基础类型:原始类型、对象类型、数组类型、元组类型、枚举类型和联合类型

    TypeScript 是一种由微软开发静态类型编程语言,它是 JavaScript 超集,并且可以在编译时进行类型检查。...TypeScript 强大类型系统使得开发者能够更轻松地编写可维护、可扩展代码。本文将详细介绍 TypeScript基础类型,包括原始类型、对象类型、数组类型、元组类型、枚举类型和联合类型。...类型推断和类型断言TypeScript 具有强大类型推断能力,它可以根据上下文自动推断变量类型。例如,如果我们在定义变量时直接赋值,TypeScript 可以推断出变量类型。...总结本文详细介绍了 TypeScript 基础类型,包括原始类型、对象类型、数组类型、元组类型、枚举类型和联合类型等方面。...TypeScript 强大类型系统使得开发者能够在编译时进行类型检查,减少了在运行时出现类型错误概率。

    41730

    TypeScript类型断言-类型声明和转换

    TS中并不能判断在使用联合类型时具体是那种类型?当我们不知道是什么类型情况下要使用某个类型特有的属性或者方法,那么就可以用断言来实现,它实际上是对编辑器做了提前告知行为,但是并不能保证运行中报错。...主要有两种方式来实现,具体如下:断言形式(1)尖括号形式语法:+value,尖括号中填写具体类型。...;let length:number = (anyValue).length;//0使用断言虽然能避免编译中报错,但是却避免不了运行中报错type ClaaM = number |...ClaaM):string{ return (val).substr(0,1)}func(1)我们可以看到编辑器中没有报错,如下:但是编译成JS后,运行过程中就报错了,如下:所以除非确切知道变量数据类型...,否则不要使用类型断言,这是因为类型断言会让 TypeScript 编译器将变量当做指定类型,而不管它实际类型,在程序运行时可能有类型错误,断言需要慎用。

    35210

    TypeScript: 常用高级类型

    ,枚举类型是真实运行代码,因此枚举类型是真实存在对象,而并非仅仅只是简单类型约束。...可问题在于touch事件对象与mouse事件对象是不一样。那么我们在兼容了这两种事件回调中,如何去描述该回调事件对象呢? 通常使用 & 符号来解决这样常见,将两种类型合并为一种类型。...per: string | string[] 我们在代码编写时,希望能够自动提示对应api,typescript则不知道应该如何处理这种情况。...这种处理,就叫做类型保护。 5 索引类型 我们可以使用 keyof 来获取一个对象中key对应具体值。...我们在实践场景中,还有更多更复杂组合,这些经验很难通过技术文章获取到,需要在实践中慢慢体会。除此之外,typescript官方文档中,还有一些重要东西需要去深入学习。

    1.9K10

    TypeScript 对象类型-接口

    一、什么是接口 在 TypeScript 中,我们使用接口(Interfaces)来定义对象类型 接口是一系列抽象方法声明,是一些方法特征集合,第三方可以通过这组抽象方法调用,让具体类执行具体方法...TypeScript 中接口除了可用于对类一部分行为进行抽象以外,还可用于对「对象形状(Shape)」进行描述 举个例子: interface Person { name: string;...需要注意是,一旦定义了任意属性,那么确定属性和可选属性类型都必须是它类型子集: interface Person { name: string; age?...上例中,任意属性值允许是 string,但可选属性 age 值却是 number,number 不是 string 子属性,所以报错了 注意:一个接口中只能定义一个任意属性 如果接口中有多个类型属性...上例中,报错信息有两处: 1、在对 faker 进行赋值时候,没有给 id 赋值 2、在给 faker.id 赋值时候,由于它是只读属性,所以报错了 五、联合类型和接口 以下实例演示了如何在接口中使用联合类型

    3.3K10

    TypeScript类型断言

    本文是关于 TypeScript type assertions ,它与其他语言中类型强制转换有相似之处,并通过 as 运算符执行。...---- 类型断言 类型断言使我们可以覆盖 TypeScript 为存储位置计算静态类型,这对于解决类型系统限制很有用。...类型断言是不得已方法,应尽可能避免。他们(暂时)删除了静态类型系统为我们提供安全网。 注意,在 A 行中,我们还覆盖了 TypeScript 静态类型,不过是通过类型注释完成。...这种覆盖方式比类型声明要安全得多,因为你可以做事情少得多。TypeScript 类型必须能够分配给注释类型。...类型断言替代语法 TypeScript 对于类型断言有另一种“尖括号”语法: 1>data 该语法已经过时,并且与 React JSX 代码(在 .tsx 文件中)不兼容。

    3.7K40

    TypeScript 类型体操:合并映射类型处理结果为联合类型

    索引类型TypeScript常见类型,它是聚合多个元素类型,对象、类、元组等都是索引类型。...它可以对索引类型索引和值做一些变换,然后产生新索引类型。...: TypeScript 也内置了很多基于映射类型实现工具类型,比如 Partial、Required 等。...总之,会了映射类型就能够对索引类型做各种变换了。 但是,这些都是对索引类型整体做变换,变换结果依然是一个索引类型。 有的时候是想把它们分开。比如这种需求: 希望能把每个索引给分开。...总结 索引类型TypeScript常见类型,可以通过映射类型语法来对它做一些修改,生成新索引类型

    1.7K40

    TypeScript】TS类型断言-类型声明和转换(七)

    TS中并不能判断在使用联合类型时具体是那种类型?当我们不知道是什么类型情况下要使用某个类型特有的属性或者方法,那么就可以用断言来实现,它实际上是对编辑器做了提前告知行为,但是并不能保证运行中报错。...主要有两种方式来实现,具体如下:断言形式(1)尖括号形式语法:+value,尖括号中填写具体类型。...;let length:number = (anyValue).length;//0使用断言虽然能避免编译中报错,但是却避免不了运行中报错type ClaaM = number |...ClaaM):string{ return (val).substr(0,1)}func(1)我们可以看到编辑器中没有报错,如下: 但是编译成JS后,运行过程中就报错了,所以除非确切知道变量数据类型...,否则不要使用类型断言,这是因为类型断言会让 TypeScript 编译器将变量当做指定类型,而不管它实际类型,在程序运行时可能有类型错误,断言需要慎用。

    37110
    领券