TypeScript 联合、交叉、字面量类型，类型别名、推导、断言

最新推荐文章于 2024-02-18 16:50:00 发布
最新推荐文章于 2024-02-18 16:50:00 发布
阅读量393 收藏
点赞数
分类专栏： 前端 文章标签： javascript typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TL18382950497/article/details/114828759
版权

环境搭建

typescript 安装
npm install  typescript -g	// 全局安装ts
目录结构

在这里插入图片描述

tsconfig.json配置内容
{
    "compilerOptions": {
        "target": "ES2015",	// 编译的目标标准
        "outDir": "./dist",	// 编译后的文件输出目录
        "watch": true		// 进入监听模式，文件发生变动立即重新编译
    },
    "include": ["./src/**/*"]	// 编译src目录下的所有目录及文件
}

联合类型

  • 联合类型也可称为多选类型，用于标注一个变量的类型为多个类型之一
  • 标注语法：变量: 类型一 | 类型二
  • 例如，下面value的类型被限制为number 或 string，其他类型将会报错

在这里插入图片描述

交叉类型

  • 交叉类型也称为合并类型，把多种类型合并到一起成为一种新的类型
  • 标注语法：变量: 类型一 | 类型二
  • 如下， obj3的类型为 o1 跟 o2 的合并
    在这里插入图片描述

字面量类型

  • 标注变量的取值只能是给定的确切值
  • 标注语法：变量: 固定值1 | 固定值2 | ...
  • 如下，direction的取值只能是固定的几个值
    在这里插入图片描述

类型别名

  • 用于给类型起另一个名字，与原类型具有相同的功能
  • 标注语法：type 新的类型名 = 类型
  • 如下，给上述的字面量类型起了个更简洁的别名，使得代码更加清晰
    在这里插入图片描述

类型推导

  • typescript可以根据上下文自动推断出变量类型，因此有的时候我们不必指定变量的类型
  • 如下图所示，typescript根据参数类型及加法操作推断出返回值是number，因此r也是number类型
    在这里插入图片描述
    在这里插入图片描述

类型断言

  • 有的时候，我们比typescript更清楚某个变量是什么类型，因此可以主动断言
  • 断言语法：变量 as 类型 或 <类型>变量
  • 如下，我们主动告诉typescript，img变量是HTMLImageElement类型，因此可以访问src属性。另外类型断言是一次性的，只在当前语句生效
    在这里插入图片描述
tanleiDD
关注
专栏目录
TypeScript 高级用法全解
wjianwei666的专栏
06-18 1086
单独使用条件类型可能用处不是很大，但是结合泛型使用时就非常有用。一个常见的用例就是使用带有 never 类型的条件类型来修剪类型中的值。复制1.2.3.4.5.6.7.其中 NullableString 可以是 string 或 null 类型，它用于 itemName 变量。定义一个名为 NoNull 的类型别名：复制1.我们想从类型中剔除 null，需要通过条件来检查类型是否包含 null：复制1.
TypeScript入门笔记（二）
丑小鸭变黑天鹅的博客
06-14 1712
typescript学习笔记记录
TypeScript学习【3】TypeScript 中的类型推断、字面量类型、类型拓宽和类型缩小
不知名人士的博客
03-24 1329
在很多情况下，TypeScript 会根据上下文环境自动推断出变量的类型，无须我们再写明类型注解。例如： 但是这两个示例不完全等价，你可以在 VsCode 中将鼠标 hover 在六个数上看看区别，前三个分别是 、、，后三个分别是、、。具体原因我们后面再看。TypeScript 这种基于赋值表达式推断类型的能力称之为 “类型推断”。在 TypeScript 中，类型标注声明是在变量之后（即类型后置）使用类型标注后置的好处是编译器可以通过代码所在的上下文推导其对应的类型，无须再声明变量类型，示例如下： 在上
TS--字面量和联合类型
Anorry的博客
07-15 263
字面量和联合类型是TS中的两个重要概念。
TS-ts5 类型 union联合类型和字面量类型
jieweiwujie的博客
10-07 304
字面量类型确定唯一值的类型只能是0,1,2其他的值就会报错
【TS基础】个人学习记录6-零碎概念之类型推论、联合类型、类型断言、类型别名、字符串字面量、交叉类型
庞囧的博客
05-29 294
文章目录概念联合类型断言继承断言可访问不存在属性断言为具体接口类型 概念 我觉得可以理解为强行指定一个类型。 有两种写法： 值 as 类型 // 推荐写这种，因为更符合JSX的写法 <类型>值 主要是为了解决一些逻辑判断的问题，例如以下。 联合类型断言 interface Cat { name: string; run(): void; } interface Fish { name: string; swim(): void; } function isF
typescript--联合类型和类型保护实例
qq_42750608的博客
09-09 127
class Bird { fly() { console.log('bird fly') } layEggs() { console.log('bird lay eggs') } } class Fish { swim() { console.log('fish swim') } layEggs() { console.log('fish lay eggs') } } const getSmallPet = ():Fish | Bird =&.
TypeScript类型系统深入解析
TypeScript添加了可选的静态类型以及对ECMAScript标准的最新特性的支持。 ## 1.2 TypeScript与JavaScript的关系 TypeScript可以被视为JavaScript的扩展，因为它包含了JavaScript的所有元素，并且可以编译成...
4 万字TypeScript 保姆级入门教程 （2021版）（建议收藏）
李南江
10-27 2366
极客江南： 一个对开发技术特别执着的程序员，对移动开发有着独到的见解和深入的研究，有着多年的iOS、Android、HTML5开发经验，对NativeApp、HybridApp、WebApp开发有着独到的见解和深入的研究, 除此之外还精通 JavaScript、AngularJS、 NodeJS 、Ajax、jQuery、Cordova、React Native等多种Web前端技术及Java、PHP等服务端技术。 对于初学者来说，学习编程最害怕的就是，难。 那么，Typescript 是不是很难？ 首先.
TypeScript学习笔记【CoderWhy】
wanghuan1020的博客
08-25 1436
TypeScript学习笔记【CoderWhy】引言JavaScript一门优秀的语言JavaScript的痛点类型带来的问题类型错误类型思维的缺失JavaScript添加类型约束介绍认识 TypeScriptTypeScript 特点众多项目采用TypeScript大前端的发展趋势入门TypeScript 编译环境TypeScript的运行环境变量的声明声明变量的关键字变量的类型推导（推断）数据类型JavaScript类型number类型boolean类型string 类型Array类型Object类型S
TypeScript——TypeScript中的联合类型Union、字面量类型literal
qq_43201350的博客
08-26 111
TypeScript——TypeScript中的联合类型Union、字面量类型literal
typescript字面量类型
最新发布
JiuMeilove的博客
02-18 787
在TypeScript中，字面量是指在代码中直接使用的具体值，如字符串、数字、布尔值等。字面量类型是TypeScript中的一种特殊类型，它用于定义一组有限的值，并且可以在定义变量或函数时使用字面量作为具体值，也可以作为类型的一部分限定变量或函数的取值范围。示例如下上面的代码通过ts类型推论机制,我们可以看到,两个变量类型是不同的str1的变量类型是:stringstr2的变量类型是:‘hello world’
TypeScript --- 变量类型(2)
D-的博客
11-12 6287
TypeScript 字面量类型 类型自动推断 联合类型类型别名交叉类型
Ts类型声明
jayccx的专栏
08-03 8699
typescript类型声明
Typescript详解二：复杂数据类型
to_the_Future的博客
07-20 922
本文介绍了TypeScript中的复杂数据类型相关的基础知识，对于深入理解TypeScript编程语言和应用场景有很大的帮助。希望您可以根据本文的内容，更好地掌握TypeScript的基础知识。下次再见。
手拉手带你掌握TS中的语法细节：联合类型 |、type、interface、 交叉类型 &、类型断言as、 非空类型断言 ! 、字面量类型、类型缩写和函数类型：调用签名、构造签名、可选参数、this
weixin_44995391的博客
07-04 4005
手拉手带你掌握TS中的语法细节：联合类型 |、type、interface、 交叉类型 &、类型断言as、 非空类型断言 ! 、字面量类型、类型缩写和函数类型：调用签名、构造签名、可选参数、this
三分钟快速了解Ts字面量和联合类型的使用
GY2077的博客
07-11 213
通过使用字面量类型，可以在类型系统中明确指定变量的取值范围，从而提高代码的可读性和类型安全性。字面量类型通常与联合类型结合使用，以创建更具体的类型约束。在TypeScript中，字面量类型允许我们指定一个变量只能是特定的字面量值。这在某些场景下非常有用，可以增强代码的可读性和类型安全性。，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种。概念：将多个类型合并为一个类型对变量进行注解。（竖线）在 TS 中叫做。
TypeScript 中的字面量类型和联合类型特性
wbskb的博客
07-11 1426
TypeScript 中的字面量类型和联合类型特性
TS高级类型之字面量类型、联合类型、交叉类型
04-13 1212
这里没有写注解的变量的类型就变成了赋值字面量类型的父类型，比如str的类型是字符串字面量类型"hello world"的父类型string，num的类型是数字字面量类型996的父类型number，bool的类型是布尔字面量类型false的父类型boolean。这不仅提升了代码的可读性，还保证了函数的参数类型。通过 let 或 var 定义的变量、函数形参、对象的非只读属性，如果指定了初始值且未显式添加类型注解，那么它们推断出来的类型就是指定的初始值字面量类型拓宽后的类型，这就是字面量类型拓宽。
typescript 类型保护与区分类型 联合类型 交叉类型 类型别名 接口 vs. 类型别名 字符串字面量类型
06-09
好的，让我来回答你的问题。 1. TypeScript 的类型保护与区分类型 类型保护是 TypeScript 中用来区分不同类型的机制，可以通过 typeof、instanceof、in 等运算符来实现。例如： ```typescript function printLength(strOrArr: string | any[]) { if (typeof strOrArr === 'string') { console.log(strOrArr.length); // string类型 } else { console.log(strOrArr.length); // 数组类型 } } ``` 2. TypeScript 的联合类型 联合类型是指变量可以是多种不同类型之一，可以使用“|”符号将多个类型组合起来。例如： ```typescript let numOrStr: number | string = 5; numOrStr = "hello"; ``` 3. TypeScript 的交叉类型 交叉类型是指将多个类型合并成一个类型，可以使用“&”符号将多个类型组合起来。例如： ```typescript interface A { a: number; } interface B { b: string; } type C = A & B; const c: C = { a: 1, b: "hello" }; ``` 4. TypeScript 的类型别名 类型别名是为一个类型定义一个别名，可以使用“type”关键字来定义。例如： ```typescript type MyString = string; const str: MyString = "hello"; ``` 5. TypeScript 的接口 vs. 类型别名 接口和类型别名都可以用来定义类型，但有一些不同之处。接口可以被类实现，也可以被扩展，而类型别名只能定义别名。例如： ```typescript interface Person { name: string; age: number; } type PersonAlias = { name: string; age: number; }; class Student implements Person { name: string; age: number; grade: number; constructor(name: string, age: number, grade: number) { this.name = name; this.age = age; this.grade = grade; } } type StudentAlias = PersonAlias & { grade: number; }; const student: StudentAlias = { name: "Tom", age: 18, grade: 3 }; ``` 6. TypeScript 的字符串字面量类型 字符串字面量类型是指将字符串字面量作为类型，可以使用“|”符号将多个字符串字面量组合起来。例如： ```typescript type Gender = "male" | "female"; interface Person { name: string; age: number; gender: Gender; } const person: Person = { name: "Tom", age: 18, gender: "male" }; ``` 希望这些解释能够对你有所帮助。如果你还有其他问题，可以继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

tanleiDD

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值