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

攀爬TS之路(二) 联合类型、对象类型

攀爬TS之路(二) 联合类型、对象类型 联合类型 联合类型表示变量的取值可以是指定的多个类型中的一种。(JS中没有的概念) 使用起来很简单,只需要在类型之间使用|分隔开就行了。...`number`类型 有一个有点意思的地方,联合类型和任意值类型编译成的JS是一样的。...图片 不过细想以下的话也会发现理所当然,毕竟JS是动态类型,也并没有联合类型的概念 联合类型的变量只能访问联合类型中所有类型共有的属性或方法。因为TS没法确定这个变量究竟是哪个类型。...对象类型(接口) 通过接口interface来定义对象的类型 这里的接口和开发时和后端对接的接口不是同一个东西。...[key: string]: any; // 对象可以有任意属性,键是字符串类型的,值是任意类型的 实操: interface IPerson { name?

65620

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

TypeScript 强大的类型系统使得开发者能够更轻松地编写可维护、可扩展的代码。本文将详细介绍 TypeScript 中的基础类型,包括原始类型、对象类型、数组类型、元组类型、枚举类型和联合类型。...例如:enum Color { Red, Green, Blue,}let color: Color = Color.Green;在枚举类型中,每个枚举成员都有一个与它关联的数字值,默认从 0 开始...也可以手动指定枚举成员的数值。联合类型联合类型用于表示一个变量可以是多种类型之一。可以使用 类型1 | 类型2 | ... 的语法来声明联合类型。...例如:let value: string | number = "Hello"; // 联合类型value = 123; // 合法联合类型可以提供更大的灵活性,使得我们能够处理多种不同类型的值。...总结本文详细介绍了 TypeScript 的基础类型,包括原始类型、对象类型、数组类型、元组类型、枚举类型和联合类型等方面。

77530
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    类型即正义:TypeScript 从入门到实践(二):函数、交叉联合类型与类型守卫

    欢迎阅读 类型即正义:TypeScript 从入门到精通系列: 《类型即正义:TypeScript 从入门到精通系列(序言)》 《类型即正义:TypeScript 从入门到精通系列(一)》 了解了基础的...,数组的项是一个对象,对象包含两个属性 suit 和 card ,它们的类型分别为 string 和 number ;接着返回值类型为 number 类型,这个对应 x 的类型为 object 时,返回类型为...第二个重载,我们给参数 x 赋值了一个 number 类型,然后返回值类型是一个对象,它有两个属性 suit 和 card ,对应的类型为 string 和 number ;这个对应 x 的类型为 number...接着我们类似单独创建 src/TodoInput.tsx 组件给 src/App.tsx 减负一样,尝试创建 src/TodoList.tsx 组件,然后把对应 src/App.tsx 的对应逻辑移动到这个组件里...小结 这一小节中我们学习了交叉类型和联合类型,它们是 TS 类型系统中的类型运算的产物,交叉类型是多个类型组成一个类型,最终结果类型是多个类型的总和,而联合类型是多个类型组成一个综合体,最终的结果类型是多个类型之中的某一个类型

    2.7K20

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

    索引类型是 TypeScript 中的常见类型,它是聚合多个元素的类型,对象、类、元组等都是索引类型。...再来讲为什么: keyof Obj 我们知道是 key 构成的联合类型 'name' | 'age' | 'height'。...: 而传入联合类型的时候,会分别传入每个类型做处理,也就是这样的: 所以直接在这里取 keyof Obj 的所有索引值: 总结一下:当我们需要把索引分开的时候,可以加一层映射类型,在值的位置对每个索引做处理...,然后再传入 keyof Xxx 来取处理过后的值的联合类型。...但如果你想对每个索引分别做处理,并且把结果合并为一个联合类型的时候,可以加一层映射类型来分别处理每个索引,再取 keyof Xxx,也就是每个索引类型的处理结果构成的联合类型。

    1.8K40

    读懂 TS 中联合类型和交叉类型的含义

    创建了一个 “重学TypeScript” 的微信群,想加群的小伙伴,加我微信 “semlinker”,备注重学TS。 本文是 ”重学TS“ 系列,第 28 篇文章,感谢您的阅读!...有人可能会说,因为 obj 同时具有 Foo 和 Bar 的属性,所以它听起来更像是属性的并集,而不是交集。类似地,两个对象类型联合将得到一个类型,该类型只含有组成类型的属性的交集。...这样的地方之一就是类型系统。 从数学角度看,一种类型是该类型所有可能值的集合。例如,string 类型是所有可能的字符串的集合:{'a', 'b', 'ab', ...}。当然,这是一个无限的集合。...类型 Foo 是包含 foo 和 name 属性的所有对象的集合。 六、了解联合类型和交叉类型 有了这些知识,你现在就可以了解联合和交叉类型的含义了。...只有具有这三个属性(foo、bar 和 name)的对象才属于交集。 七、交叉类型的真实示例 联合类型非常普遍,所以让我们关注一个交叉类型的例子。

    6K20

    Vue前端篇——创建对象类型的响应式数据

    在上一篇中,讲解了如何使用ref创建基本类型的响应式数据,那么对应的对应对象类型也是有响应的创建方式的,本文要介绍的是reactive 创建,对象类型的响应式数据,以及 reactive 和 ref 的使用方法以及它们之间的区别...1. reactive 创建:对象类型的响应式数据作用reactive 用于定义一个响应式对象。注意,基本类型不要使用 reactive,而应使用 ref,否则会报错。...:对象类型的响应式数据ref 也可以接收基本类型和对象类型的数据。...案例代码ref创建的变量必须使用.value(可以使用volar插件自动添加.value),这个也是使用ref创建响应对象与reactive的一个区别之一。...从宏观角度看:ref 用来定义基本类型数据、对象类型数据;reactive 用来定义对象类型数据。

    23410

    【JavaScript】内置对象 - 数组对象 ① ( 数组简介 | 数组创建 | 数组类型检测 )

    一、数组对象 1、数组简介 在 JavaScript 中 , 提供了一种 内置对象 " 数组 " , 用于存储一系列的值 , 这些值可以是 任意类型的数据 , 包括 数字 / 字符串 / 对象 / 其他数组..., 数组对象 还 提供了 一系列的方法和属性 操作和处理这些值 ; push 方法 : 在数组末尾添加元素 ; pop 方法 : 删除并返回数组的最后一个元素 ; shift 方法 : 删除并返回数组的第一个元素...; unshift 方法 : 在数组开头添加一个或多个元素 ; slice 方法 : 返回数组的一部分 ; 2、数组创建 数组创建 : 使用字面量创建数组 : 创建空数组 : var arr = [...2 3 三个元素赋值给对象变量 ; 使用 new Array() 创建数组 : 创建空数组 : var arr = new Array(); 创建一个空的数组 , 元素数量为 0 ; 创建非空数组...某个 构造函数 的实例 , 也就是可以检测 某个对象是否由 Array 构造函数 创建的 ; // 创建数组对象 let arr = [1, 2, 3];

    8810

    TypeScript 对象的类型-接口

    一、什么是接口 在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型 接口是一系列抽象方法的声明,是一些方法特征的集合,第三方可以通过这组抽象方法调用,让具体的类执行具体的方法...,则可以在任意属性中使用联合类型: interface Person { name: string; age?...number; } let faker: Person = { name: 'Faker', age: 25, gender: 'male' }; 四、只读属性 有时候我们希望对象中的一些字段只能在创建的时候被赋值...上例中,使用 readonly 定义的属性 id 初始化后又被赋值,所以报错 注意,只读的约束存在于第一次给对象赋值的时候,而非第一次给只读属性赋值的时候: interface Person {...上例中,报错信息有两处: 1、在对 faker 进行赋值的时候,没有给 id 赋值 2、在给 faker.id 赋值的时候,由于它是只读属性,所以报错了 五、联合类型和接口 以下实例演示了如何在接口中使用联合类型

    3.4K10

    自定义类型:联合体和枚举类型(联合体与结构体的区别)

    联合体: 一、联合体类型的声明 像结构体一样,联合体也是由一个或者多个成员构成,这些成员可以不同的类型。 但是编译器只为最大的成员分配足够的内存空间。联合体的特点是所有成员共用同一块内存空间。...联合体(union):通常用于节省内存,在多个不同类型的数据中只使用其中的一个。例如,一个程序可能需要处理来自不同数据源的数据,这些数据可能有不同的类型和大小,但在任何时候只处理其中的一种。...通过使用联合体,可以避免浪费内存来存储不会同时使用的多个数据成员。 三、联合体的用例 3.1问:如何打印int类型每一个字节存储的数据?...答:我们可以利用联合体的特性把一个int类型的数据,和一个装着四个char类型的结构体放在一个联合体中,这样int的每个字节都对应着一个结构体中的char类型。...{}中的内容是枚举类型的可能取值,也叫 枚举常量 。​ 这些可能取值都是有值的,默认从0开始,依次递增1,当然在声明枚举类型的时候也可以赋初值。

    14210

    PHP- 复合数据类型-对象的创建和销毁

    在 PHP 中,我们使用new关键字来创建对象。创建对象时,会自动调用类的构造函数__construct()。...例如,下面的代码创建了一个Person对象:class Person { public function __construct() { echo "Creating a new Person...然后,我们创建了一个Person对象,会自动调用构造函数__construct(),从而输出消息。在 PHP 中,当一个对象不再被使用时,会自动被垃圾回收机制销毁。...销毁对象时,会自动调用类的析构函数__destruct()。...然后,我们创建了一个Person对象,并将其赋值为null,从而使对象不再被使用。当程序执行到对象不再被使用的代码行时,会自动调用析构函数__destruct(),从而输出消息。

    46441

    自定义类型的创建

    创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式。...22 this.job = job; 23 this.friends = ["Shelby", "Court"]; 24 25 // 动态原型模式,该代码只有在初次调用构造函数的时候才会执行...Person.prototype.sayName = function() { 28 alert(this.name); 29 } 30 } 31 }  以上方法,对于有其他OO语言经验的开发人员去看...因为每次创建新的实例都需要进行一次判断,哪怕这次的性能损耗是极小的,但毕竟也是有损耗。 我还是将定义方法和共享属性放在外面,通过原型模型去创建自定义方法,如果有更加优质的代码,欢迎分享!...22 this.job = job; 23 this.friends = ["Shelby", "Court"]; 24 25 // 动态原型模式,该代码只有在初次调用构造函数的时候才会执行

    1.1K20

    面向对象编程:对象之间的关系类型

    第一步是从给定的描述中挑选出独立的类。使用单一责任原则可以派生以下类。...面向对象编程中的基本关系类型是, 协作 聚合 继承 让我们更详细地研究它们。 协作 协作关系有时被称为“使用”关系。当一个对象使用另一个不相关的对象来完成一个操作时,两个对象被称为协作。...以下是一些可以从给定的应用程序描述中得出的事实: 每个客户都有一个地址,订购的产品将在该地址装运 每个订单都有一个客户、一个送货地址和一个以OrderItem表示的产品 从上面的事实可以很容易地得出,我们的...鉴于此,产品所有者现在希望在应用程序中添加一个新特性,以监视具有高需求的产品类型。从新的需求中,很明显,我们必须创建产品类的子类型。这些子类型将表示现实世界中的特定产品类别, 如下图所示。 ?...如上图所示,类MusicAlbum和Book有它们自己的一些属性。因为它们从Product类继承,所以它们也继承了它的属性。可以说,音乐是一种产品,书也是。

    1.5K20

    实现Nest中参数的联合类型校验

    场景概述 我们在进行接口开发时,客户端需要传入一个名为text的字段,它可能是string类型或Array类型(在TS中我们把这种关系称之为 联合类型 ),class-validator...: boolean; } 启动项目,用postman测试后发现并不好使,传了array类型的数据又要求是string类型,传了string类型的数据又要求是array类型。...image-20220420115628178 ❝注意:嵌套类型的对象验证需要使用@ValidateNested和@Type注解, @Type接受一个回调函数,函数内部需要返回一个用class声明的dto...array", "Bad Request" ); } for (let i = 0; i < value.length; i++) { // 校验数组中的对象字段...在我这个场景中,对象里所有key的类型校验都手动处理了,如果在此处定义了它的类型,在校验函数中就会报黄色警告,因此针对于需要手动校验类型的场景而言,使用any是最合适的。

    1.3K20
    领券