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

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

TypeScript 强大的类型系统使得开发者能够更轻松地编写可维护、可扩展的代码。本文将详细介绍 TypeScript 中的基础类型,包括原始类型、对象类型、数组类型、元组类型、枚举类型和联合类型。...原始类型在 TypeScript 中,有以下几种原始类型:数字类型数字类型用于表示整数或浮点数。可以使用 number 关键字来声明数字变量。...也可以手动指定枚举成员的数值。联合类型联合类型用于表示一个变量可以是多种类型之一。可以使用 类型1 | 类型2 | ... 的语法来声明联合类型。...类型推断和类型断言TypeScript 具有强大的类型推断能力,它可以根据上下文自动推断变量的类型。例如,如果我们在定义变量时直接赋值,TypeScript 可以推断出变量的类型。...总结本文详细介绍了 TypeScript 的基础类型,包括原始类型、对象类型、数组类型、元组类型、枚举类型和联合类型等方面。

78630

是否还在疑惑Vue.js中组件的data为什么是函数类型而不是对象类型

分析Vue.js组件中的data为何是函数类型而非对象类型 引言 正文 一、Vue.js中data的使用 二、data为对象类型 三、data为函数 结束语 引言 要理解本篇文章,必须具备JavaScript...中基本数据类型和引用数据类型的概念,大家可以花两分钟看一下,瞬间就能理解——面试题被问到再也不慌,深究JavaScript中的深拷贝与浅拷贝,看完这篇文章以后,再来看这篇文章就会很容易理解了。...组件中data为对象的情况 接下来我们来看一下,如果组件中data使用对象类型会发生怎么样的情况。...因为我们刚开始定义了构造函数Vue时,给他内部的data设置了一个值,该值为对象类型,对象类型在js中称为引用数据类型,在栈中是存储着一个指向内存中该对象的堆中的地址。...'55'},所以当我们改变其中一个实例对象的data.name时,其实是先顺着地址去找到内存中的那个对象,然后改变一些值,但是因为所有创建的实例都是按照地址去寻找值的,所以其中一个改变,另一个也跟着改变啦

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

    TS 进阶 - 类型工具

    正如联合类型的 |,它代表了按位或,即只需要符合联合类型中的一个类型即可认为实现了这个联合类型,如 A | B 只需要实现 A 或 B 即可。...而代表按位与的 & ,则需要符合所有类型,才可以说实现了这个交叉类型,即 A & B 需要同时满足 A 与 B 两个类型。...# 索引类型查询 keyof,可以将对象中的所有键转换为对应字面量类型,然后在组合成联合类型。...(in 关键字)将这个联合类型的每一个成员映射出来,并将其键值类型设置为 string。...类型工具 创建新类型的方式 常见搭配 类型别名 将一组类型/类型结构封装,作为一个新的类型 联合类型、映射类型 工具类型 在类型别名的基础上,基于泛型去动态创建类型 使用类型工具 联合类型 创建一组类型集合

    89220

    深入浅出 TypeScript

    在 TypeScript 的类中,成员都默认为 public, 被此限定符修饰的成员是「可以被外部访问」。 当成员被设置为 private之后, 被此限定符修饰的成员是「只可以被类的内部访问」。...2、infer P 表示待推断的构造函数参数,如果T是构造函数,就返回构造函数的类型参数P,否则返回never。 infer 的应用 将元组转换为联合类型。...E : never; type TTuple = [string, number]; type ToUnion = ElementOf; // string | number; 将联合类型转换为交叉类型...」将 token 流解析为抽象语法树(AST): Token 流 + 解析器 --> AST(抽象语法树) 「绑定器」将 AST 中的声明节点与相同实体的其他声明相连形成符号(Symbols),符号是语义系统的主要构造块...这里列出的路径必须是指定文件,而不是某个文件夹,而且不能使用* ?

    2.9K30

    深入学习下 TypeScript 中的泛型

    keyof T 运算符用于返回具有 T 中所有可用属性名称的联合。然后使用 K in 语法指定新类型的属性是返回的联合类型中当前可用的所有属性 T键。...TypeScript 仅适用于类型,因此请确保始终将类型声明中的标识符读取为类型,而不是值。在此代码中,您使用每个布尔值的确切类型,true 和 false。...U 的类型将绑定到传递函数的返回值的类型。如果传递的类型 T 不是函数,则代码将返回 never 类型。...在内部条件的 false 分支中,返回绑定到 T 的当前类型,就好像 KeyPart1 不是 T 的有效键一样: type NestedOmit类型“a”,而 KeyPart2 将被推断为字符串的剩余部分,在本例中为“b.c”。 现在将评估内部条件。

    39K30

    深入学习下 TypeScript 中的泛型

    keyof T 运算符用于返回具有 T 中所有可用属性名称的联合。然后使用 K in 语法指定新类型的属性是返回的联合类型中当前可用的所有属性 T键。...TypeScript 仅适用于类型,因此请确保始终将类型声明中的标识符读取为类型,而不是值。在此代码中,您使用每个布尔值的确切类型,true 和 false。...U 的类型将绑定到传递函数的返回值的类型。如果传递的类型 T 不是函数,则代码将返回 never 类型。...在内部条件的 false 分支中,返回绑定到 T 的当前类型,就好像 KeyPart1 不是 T 的有效键一样:代码语言:javascript复制type NestedOmit类型“a”,而 KeyPart2 将被推断为字符串的剩余部分,在本例中为“b.c”。现在将评估内部条件。

    17810

    TS 进阶 - 类型基础

    ReadonlyArray 而不是 Array # type 与 interface 虽然 type 也可以代替 interface 描述对象,但更推荐用 interface 来描述对象、类的结构,而类型别名用来将一个函数签名...# void 类型 在 TypeScript 中,一个没有返回值(即没有调用 return 语句)的函数,其返回值类型应该被标记为 void 而不是 undefined,尽管它的实际值就是 undefined...拥有多个重载声明的函数在被调用时,是按照重载的声明顺序往下查找的。 TypeScript 中的重载更像伪重载,只有一个具体的实现,其重载体现在方法调用的签名上而不是具体实现细节上。...,即子类完全继承父类的一切,只是对其功能进行扩展 I 接口隔离原则,类的实现方法应该只需要实现自己需要的那部分接口,而不是实现所有接口 D 依赖倒置原则,高层模块不应该依赖于低层模块,二者都应该依赖于抽象...,any 把所有类型都兼容,而 unknown 在期待一个确定的值。

    1.8K50

    TS 中的类型验算,高级通用 API 实现

    前言由于现在工作使用的技术栈是 React、TypeScript 和 ahooks,工作中需要用到大量的类型定义,特此记录一下一些常用的 类型通用API 封装。...T 类型中的 null 及 undefined 类型Parameters:获取函数的参数类型,将每个参数类型放在一个元组中Omit:从类型 T 中剔除 K 中的所有属性Pick:从类型 T 中挑选 K 中的所有属性Exclude:提取存在于 T,但不存在于 U 的类型组成的联合类型Extract:提取联合类型 T 和联合类型 U 的所有交集Record...typeof:在类型上下文中获取变量或者属性的类型in:常用来遍历枚举类型TS compiler 内部实现的类型Uppercase:构造一个将字符串转大写的类型Lowercase:构造一个将字符串转小写的类型...Capitalize:构造一个将字符串首字符转大写的类型Uncapitalize:构造一个将字符串首字符转大小写的类型实现 Optional API,实现部分类型变为可选type Article = {

    21110

    通过js 将数据发送给rs485 设备,为什么要将数据转化为 Uint8Array 类型? 而不是直接的查询报文。如 01 03 00 00 00 14 45 C5

    在JavaScript中,与RS485设备(或任何硬件设备)通信时使用Uint8Array而不是直接使用查询报文字符串(如"01 03 00 00 00 14 45 C5")的原因涉及到数据类型和通信协议的需求...这意味着每个指令或消息由一系列二进制值组成,而不是文本字符串。Uint8Array提供了一种方便的方法来表示和操作这些二进制值。...总结 使用Uint8Array而不是简单的字符串对于与RS485设备(或任何硬件设备)进行通信是出于对二进制数据精确控制、保持与底层API的兼容性、以及优化性能和效率的需要。...字符串和二进制数据在底层是以不同的方式表示的。例如,字符串"01 03 00 00 00 14 45 C5"如果直接发送给设备,可能会被解析为ASCII码对应的二进制值,而不是你期望的原始字节值。...字符串在JavaScript中通常以UTF-16编码存储,而设备期望的是纯字节数据。在转换过程中(如通过TextEncoder),如果不小心处理,可能会因为编码不匹配而导致错误的字节序列发送到设备。

    16200

    以淘宝店铺为例,谈谈 TypeScript ESLint 规则集考量

    规则会要求你为函数与类方法显式的声明其返回值,switch-exhaustiveness-check 规则会要求你处理联合类型变量的所有类型分支。...基础约束 为了适应读者可能有的不同的约束严格程度,这里将规则拆分为基础约束与严格约束部分,基础约束的规则以语法统一(包括实际代码与类型部分)为主,推荐所有人在所有项目中使用,即使是个人项目——说实在的,...而不是 ||,使用 a?.b 而不是 a && a.b。...,TypeScript 的控制流分析能很好地做到这一点,而对于函数参数与类属性,主要是为了确保一致性,即函数的所有参数(包括重载的各个声明)、类的所有属性都有类型标注,而不是仅为没有初始值的参数/属性进行标注...如联合类型变量中每一条类型分支可能都需要特殊的处理逻辑。

    2.7K30

    杀手级的TypeScript功能:const断言

    它的语法是一个类型断言,用 const 代替类型名称(例如 123 as const)断言构造新的文字表达式时,我们可以向语言发出以下信号: 该表达式中的字面类型不应被扩展(例如:不能从“hello”转换为字符串...没有类型扩展的字面类型 并不是每个人都知道类型扩展,并且由于某些意外行为而首次发现它时都会觉得意外。...这不是很好,如果我们想要利用 type 属性上的可区分联合的话,那么在 TypeScript 3.4 之前,则需要为每个 action 声明一个接口或类型: 1interface SetCount {...在 redux 中,我们创建了一个接受 action 的联合,reducer 函数可以通过这种操作来获得良好的类型安全性。...,而不是去编写多余的样板类型。

    1.2K10

    速查手册 - TypeScript 高级类型 cheat sheet

    版本引入的,附中文 TypeScript 2.8 引入条件类型 lib.es2015.d.ts:大部分的声明在这个文件中可以找到 TypeScript 强大的类型别名:行文结构比较合理,也比较完善,可以当手册来查...解释: 这一对加减符号操作符 + 和 -, 进行的不是变量的之间的进行加减而是对 readonly 属性进行加减 2.5、Record(官方) 作用:将 K 中所有的属性的值转化为 T 类型 源码:...type Record = { [P in K]: T }; 示例: // 对所有 T 类型的属性 K, 将它转换为 U function mapObject...K 中的内容所覆盖,多在高阶组件中使用,内部借助 Diff 操作实现 源码: type Overwrite = { [P in Exclude]: T[...说明这个类型是在 TS 源码层面支持的,而不是通过类型变换。

    1.3K10

    【TS】1294- 搞懂 TypeScript 中的映射类型(Mapped Types)

    在学习 TypeScript 类型系统时,尽量多和数学中的集合类比学习,比如 TypeScript 中的联合类型,类似数学中的并集等。...概念介绍 TypeScript 中的映射类型和数学中的映射类似,能够将一个集合的元素转换为新集合的元素,只是 TypeScript 映射类型是将一个类型映射成另一个类型。...在我们实际开发中,经常会需要一个类型的所有属性转换为可选类型,这时候你可以直接使用 TypeScript 中的 Partial工具类型: type User = { name: string;...符号可以暂时理解为“将可选属性转换为必选属性”,下一节会详细介绍这些符号。 2. Readonly 只读属性 用来将所有属性的类型设置为只读类型,即不能重新分配类型。...在学习 TypeScript 类型系统时,尽量多和数学中的集合类比学习,比如 TypeScript 中的联合类型,类似数学中的并集等。

    2.4K10

    【万字长文】TypeScript入门指南

    Object,所以值类型和引用类型最终都指向 Object,所以在TypeScript中Object他包含所有类型。...type//将type强行转化为布尔值类型,如果没用进行转化的话是会报错的}let result = fn(1)console.log(result);//true交叉类型多种类型的集合,联合对象将具有所联合类型的所有成员...2、类型断言的用途(1)将一个联合类型推断为其中一个类型(2)将一个父类断言为更加具体的子类(3)将任何一个类型断言为 any(4)将 any 断言为一个具体的类型原型:let fn = function...跟protectd他们的区别是一个是只能在内部使用,一个是内部与子类访问,例子如下//在TypeScript中是需要提前声明类型的class Person { protected name:string...注:不是优先于构造函数执行,而是依托于构造函数,如果不创建对象就不会执行构造代码块普通代码块和构造代码块的区别在于,构造代码块是在类中定于的,而普通代码块是在方法体中定义的,执行顺序和书写顺序一致。

    62342

    TypeScript infer 关键字

    一、类型提取 在 TypeScript 中我们能够很方便地从复合类型中提取出单个类型,以数组、元组或对象为例,我们可以通过成员访问的语法来提取数组、元组或对象中元素或属性的类型,具体示例如下: type...R : any; 很明显 ReturnType 内部也是利用条件类型和 infer 关键字,来实现获取方法的返回类型。...U : never; type Fn1Arg = ArgType; // number 如果你想要抽取函数中元组类型的所有参数的类型,这就变得更加有趣,在 TypeScript 3.0 版本之后...,它还可以用于实现元组类型转联合类型、联合类型转交叉类型等,这里就不详细展开,大家如果有兴趣的话,可以阅读 深入理解 TypeScript - infer 章节的相关内容。...但对于 InferredAb 来说, a 属性的类型是 number,这意味着 a: infer U 将返回 number 类型,而 b 属性的类型是

    1.4K40

    TypeScript 5.0 正式发布!

    /lib", // ... } } 所有枚举都是联合枚举 当 TypeScript 最初引入枚举时,它只不过是一组具有相同类型的数值常量: enum E { Foo =...,它赋予每个枚举成员自己的类型,并将枚举本身转换为每个成员类型的联合。...TypeScript 5.0 通过为每个计算成员创建唯一的类型,设法将所有枚举转换为联合枚举。这意味着现在可以缩小所有枚举的范围,并将其成员作为类型引用。...注意,可以通过添加一个名为 app.css.d.ts 而不是 app.d.css.ts 的声明文件通常可以实现类似的效果。...因此,开发人员会在没有意识到的情况下开始编写 CommonJS 模块而不是 ES 模块,从而给出意外的查找规则和 JavaScript 输出。

    3.9K70

    【TS 演化史 -- 17】各文件的JSX工厂 、有条件类型和映射类型修饰符

    有条件类型 TypeScript 2.8 引入了有条件类型,这是类型系统的强大而令人兴奋的补充。 有条件类型使咱们可以表达非均匀类型映射,即,根据条件而不同的类型转换。...never类型是 TypeScript 的底层类型,表示从未出现的值的类型。 分布式有条件类型 那么,为什么e 条件类型和never类型的组合是有用的呢?它有效地允许咱们从联合类型中删除组成类型。...NonNullable类型应用于联合类型,这相当于将有条件类型应用于联合类型中的所有类型: type NonNullableEmailAddress = | NonNullable类型作为类型参数T的参数,而不是值;这就是为什么ReturnType和ReturnType是不正确的。...另一方面,Math.max() 方法期望任意多个数值参数(而不是单个数组参数);因此,类型D被解析为number[](而不是[number []])。

    2.5K20
    领券