当前位置：首页 > news >正文

TypeScript 类型断言的适用场景及代码示例

news 来源：原创 2025/9/16 10:00:08

类型断言的适用场景及代码示例

适用场景

类型断言就像是你很确定某个东西是什么，然后直接告诉 TypeScript 编译器“相信我，它就是这个类型”。以下是几种常见的适用场景：

从 any 类型恢复具体类型：当你使用 any 类型时，TypeScript 就不会对这个变量做类型检查了。但有时候你心里清楚它实际上是什么类型，这时候就可以用类型断言恢复具体类型。
访问特定类型的属性或方法：有些情况下，TypeScript 无法推断出变量的准确类型，但你知道它具备某些属性或方法，就可以用类型断言来访问。

代码示例

// 场景一：从 any 类型恢复具体类型
let someValue: any = "Hello, TypeScript!";
// 这里我们知道 someValue 实际上是字符串，用类型断言恢复为字符串类型
let strLength: number = (someValue as string).length;
console.log(strLength);// 场景二：访问特定类型的属性或方法
interface Cat {meow(): void;
}
interface Dog {bark(): void;
}function animalSound(animal: Cat | Dog) {// 假设我们确定传入的是 Cat 类型，用类型断言来调用 meow 方法(animal as Cat).meow(); 
}let myCat: Cat = {meow() {console.log('Meow!');}
};animalSound(myCat);

2. 类型断言和类型转换的区别

类型断言和类型转换在概念上很容易混淆，但其实有本质区别。

类型断言：它不是真正意义上的类型转换，只是告诉编译器“我知道这个变量是什么类型，你别管了”。它不会改变变量在运行时的类型，只是在编译阶段让编译器按照你指定的类型来处理。
类型转换：是在运行时把一个类型的值转换成另一个类型的值。比如在 JavaScript 里，Number('123') 就是把字符串 '123' 转换成数字类型。

用大白话来说，类型断言就像是你给编译器“打个招呼”，让它相信你对变量类型的判断；而类型转换是实实在在地把一个东西变成了另一种东西。

3. 交叉类型的实际应用场景

交叉类型就像是把不同的类型“拼”在一起，创造出一个包含所有类型特征的新类型。以下是一些实际应用场景：

组合不同模块的功能：在开发大型项目时，不同的模块可能有不同的接口定义。当你需要一个对象同时具备多个模块的功能时，就可以用交叉类型。
扩展已有类型：如果你想在一个已有的类型基础上添加一些额外的属性或方法，可以用交叉类型来实现。

代码示例

// 组合不同模块的功能
interface User {name: string;age: number;
}interface Permission {canEdit: boolean;canDelete: boolean;
}// 用交叉类型创建一个新类型，包含 User 和 Permission 的所有属性
type UserWithPermission = User & Permission;let user: UserWithPermission = {name: "John",age: 30,canEdit: true,canDelete: false
};console.log(user);// 扩展已有类型
interface Shape {area(): number;
}interface Colorful {color: string;
}// 用交叉类型扩展 Shape 类型，让它具备颜色属性
type ColorfulShape = Shape & Colorful;class Circle implements ColorfulShape {constructor(public radius: number, public color: string) {}area() {return Math.PI * this.radius * this.radius;}
}let redCircle = new Circle(5, "red");
console.log(redCircle.area());
console.log(redCircle.color);

4. 交叉类型和联合类型的区别

交叉类型：就像是把多个类型合并成一个更大的类型，新类型要包含所有参与合并类型的属性和方法。可以理解为“既要……又要……”。
联合类型：表示一个变量可以是多种类型中的任意一种。可以理解为“要么……要么……”。

代码示例

// 交叉类型
interface A {a: number;
}interface B {b: string;
}// 交叉类型，同时具备 A 和 B 的属性
type AB = A & B;let ab: AB = {a: 1,b: "hello"
};// 联合类型
// 变量可以是 A 类型或者 B 类型
let eitherAOrB: A | B = { a: 1 }; 
eitherAOrB = { b: "world" };

5. 其他巩固 TypeScript 基础的实践项目

图书管理系统：可以实现图书的添加、删除、查询和借阅等功能。通过这个项目，你可以练习类的定义、对象的操作、数组的处理等知识。
简单的游戏，如猜数字游戏：程序随机生成一个数字，让用户猜测，根据用户的输入给出提示，直到猜对为止。这个项目能让你熟悉条件判断、循环等控制结构的使用。
表单验证工具：可以对用户输入的表单数据进行验证，比如验证邮箱格式、密码长度等。这有助于你掌握正则表达式和类型检查的应用。

6. TypeScript 第四阶段内容（高级类型与装饰器）

高级类型

索引类型：允许你通过索引来访问对象的属性。就好比你有一个大箱子，里面有很多小格子，你可以通过格子的编号（索引）来拿到里面的东西。

interface Person {name: string;age: number;
}function getProperty<T, K extends keyof T>(obj: T, key: K) {return obj[key];
}let person: Person = { name: "Alice", age: 25 };
let personName = getProperty(person, "name");
console.log(personName);

映射类型：可以根据已有的类型创建新的类型。就像是你有一个模板，然后按照这个模板复制出一些新的东西，还可以对复制的东西做一些修改。

interface User {name: string;age: number;
}// 创建一个新类型，把 User 类型的所有属性变成可选的
type PartialUser = {[P in keyof User]?: User[P];
};let partialUser: PartialUser = { name: "Bob" };
console.log(partialUser);

装饰器

装饰器就像是给类、方法、属性等添加一些额外的功能，就像给房子装修一样，让它们变得更强大。

// 定义一个装饰器函数
function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {const originalMethod = descriptor.value;descriptor.value = function (...args: any[]) {console.log(`Calling method ${propertyKey} with arguments: ${JSON.stringify(args)}`);const result = originalMethod.apply(this, args);console.log(`Method ${propertyKey} returned: ${result}`);return result;};return descriptor;
}class Calculator {@logadd(a: number, b: number) {return a + b;}
}let calculator = new Calculator();
let result = calculator.add(2, 3);
console.log(result);

在这个例子中，log 就是一个装饰器，它可以在调用 add 方法前后输出一些日志信息，方便我们调试和监控。

TypeScript 类型断言的适用场景及代码示例

类型断言的适用场景及代码示例适用场景类型断言就像是你很确定某个东西是什么，然后直接告诉 TypeScript 编译器“相信我，它就是这个类型”。以下是几种常见的适用场景： 从 any 类型恢复具体类型：当你使用 any 类型时&#xf…...

编程日记 2025/9/16 10:00:08

Docker 容器

Docker 是一种开源的容器化平台，可以让开发人员将应用程序及其依赖项打包到一个可移植的容器中，然后部署到任何支持 Docker 的环境中。Docker 的基本概念包括以下几点： 1. **容器(Container)**：容器是一个独立、轻量级的运行环境…...

编程日记 2025/9/16 9:55:47

Spark（3）vi的基本使用

一.打开与创建文件二.三种模式三. 光标操作四.复制粘贴一.打开与创建文件它是linux的内置命令，所以还是以命令的方式来运行。命令的格式是：Vi /路径/文件名。要注意如下两种情况： 1.如果这个文件不存在，此时就是新建文…...

编程日记 2025/9/14 17:20:44

element-ui的组件使用

1. 安装 Element UI（在文件夹最上面输入cmd进入dos窗口，然后输入安装指令 npm install element-ui --save） 2.在main.js文件全局引入(main.js文件负责全局注册 )，在该文件注册的所有组件在其他文件都能直接调用，一般…...

编程日记 2025/9/12 3:12:41

Starlink卫星动力学系统仿真建模第九讲-滑模（SMC）控制算法原理简介及卫星控制应用

滑模控制（Sliding Mode Control）算法详解一、基本原理滑模控制（Sliding Mode Control, SMC）是一种变结构控制方法，通过设计一个滑模面（Sliding Surface），迫使系统状态在有限时间内…...

编程日记 2025/9/9 17:09:49

《深度剖析Linux 系统 Shell 核心用法与原理_666》

1. 管道符的用法查找当前目录下所有txt文件并统计行数 # 使用管道符将ls命令的结果传递给wc命令进行行数统计 ls *.txt | wc -l 在/etc目录下查找包含"network"的文件并统计数量 # 使用find命令查找文件，并通过grep查找包含特定字符串的文件&#xf…...

编程日记 2025/9/10 19:57:12

51单片机学习之旅——定时器

打开软件 1与其它等于其它，0与其它等于0 1或其它等于1，0或其它等于其它 TMODTMOD&0xF0;//0xF01111 0000进行与操作，高四位保持，低四位清零，高四位定时器1，低四位定时器0 TMODTMOD|0x01;//0x010000 0…...

编程日记 2025/9/8 18:52:00

超详细介绍map（multimap）的使用

map类的介绍 map的声明如下，Key是map底层关键字的类型，T是map底层value的类型。set默认要求Key支持小于比较，如果不支持或者需要的情况下我们可以自行传入仿函数，map底层存储数据的内存是从空间申请来的。一般情况下，我…...

编程日记 2025/9/11 13:08:42

原生稀疏注意力NSA 替换transformer 注意力进行文本生成训练

DeepSeek-R1这篇文章，聚焦范围更加小，R1的重点在于提出了一个文本生成的训练策略和蒸馏策略，这篇文章则是提出了一个注意力机制NSA，主要解决的是长序列做注意力时带来的效率问题。通篇文章看下来，它的实际意义可能比较…...

编程日记 2025/9/16 9:03:50

读书笔记：《百年孤独》

《百年孤独》加西亚.马尔克斯著范晔译读出了阅读障碍。记不得书中的人，记不得书中的事，更不知何为孤独，只记得马孔多，这个陌生的地方，还有那个猪尾巴婴儿。百年：故事跨越了百年孤独&#…...

编程日记 2025/9/16 5:09:55

TVS管学习记录

文章目录前言一、TVS是什么？二、TVS关键参数1.反向截至电压**实际意义** 2.钳位电压**定义与作用****选择依据** **4. 实际应用示例****场景：通信端口的ESD保护** 3.反向截至电压和钳位电压的关联和区别**. 小结** 三、实际应用电路举例总结前言 TVS管…...

编程日记 2025/9/11 22:01:53

网络安全系统概述网络安全系统分为几级

🍅 点击文末小卡片 ，免费获取网络安全全套资料，资料在手，涨薪更快 5级网络信息系统安全等级保护分为五级，一级防护水平最低，最高等保为五级。分别是用户自主保护级、系统审计保护级、安全标记保护级、结构…...

编程日记 2025/9/14 20:24:21

基于 DeepSeek LLM 本地知识库搭建开源方案(AnythingLLM、Cherry、Ragflow、Dify)认知

写在前面博文内容涉及基于 Deepseek LLM 的本地知识库搭建使用 ollama 部署 Deepseek-R1 LLM知识库能力通过 Ragflow、Dify 、AnythingLLM、Cherry 提供理解不足小伙伴帮忙指正 😃,生活加油我站在人潮中央，思考这日日重复的生活。我突然想&#xff0c…...

编程日记 2025/9/14 21:51:53

Apache Flink架构深度解析：任务调度、算子数据同步与TaskSlot资源管理机制

Apache Flink是一个分布式流处理框架，其核心架构设计围绕有界与无界数据流的统一处理能力展开。以下从任务分配、算子数据同步、TaskManager与JobManager的TaskSlot机制三个维度展开详细分析： 一、任务分配机制 Flink的任务分配基于并行度（P…...

编程日记 2025/9/14 9:51:21

Linux 常见命令全解析

一、文件操作命令 1. ls ls是列出目录内容的命令。简单输入ls，会展示当前目录下的文件和目录列表。想要获取更详细的信息，比如文件权限、所有者、大小、修改时间等，使用ls -l。若要显示所有文件，包括以点（.&#xff…...

编程日记 2025/9/14 11:51:49

集群结构角色IPmaster192.168.35.135node1192.168.35.136node2192.168.35.137 部署 #需在三台主机上操作 //关闭防火墙 [rootmaster ~]# systemctl disable --now firewalld//关闭selinux [rootmaster ~]# sed -i s/enforcing/disabled/ /etc/selinux/config//关闭swap分区…...

编程日记 2025/9/14 18:01:48

springboot005学生心理咨询评估系统(源码+数据库+文档)

源码地址：学生心理咨询评估系统文章目录 1.项目简介2.部分数据库结构与测试用例3.系统功能结构4.包含的文件列表（含论文）后台运行截图 1.项目简介使用旧方法对学生心理咨询评估信息进行系统化管理已经不再让人们信赖了，把现…...

编程日记 2025/9/11 22:54:11

LeetCode37

LeetCode37 目录题目描述示例思路分析代码段代码逐行讲解复杂度分析总结的知识点整合总结...

编程日记 2025/8/16 11:11:18

2025年02月24日Github流行趋势

项目名称：mastra 项目地址url：https://github.com/mastra-ai/mastra 项目语言：TypeScript 历史star数：5735 今日star数：1140 项目维护者：adeleke5140, abhiaiyer91, TheIsrael1, adeniyii, Joshuafolorunsh…...

编程日记 2025/9/13 4:01:36

Spring Boot 中的日志管理

一、日志框架选择 1. 主流框架对比框架特点Spring Boot 默认支持Logback- 性能优异，Spring Boot 默认集成- 支持自动热更新配置文件✅ (默认)Log4j2- 异步日志性能更强- 支持插件扩展- 防范漏洞能力更好❌ (需手动配置)JUL (JDK自带)- 无需额外依赖- 功能简单&am…...

编程日记 2025/9/14 22:27:28

后端之JPA（EntityGraph+JsonView）

不同表之间的级联操作或者说关联查询是很多业务场景都会用到的。对于这种需求最朴素的方法自然是手动写关联表，然后对被关联的表也是手动插入数据。但是手写容易最后写成一堆shit代码，而且修改起来也是非常麻烦的。学会使用现成的工具还是非常有利的…...

编程日记 2025/9/15 22:21:15

点击修改按钮图片显示有问题

问题可能出在表单数据的初始化上。在 ave-form.vue 中，我们需要处理一下从后端返回的图片数据，因为它们可能是 JSON 字符串格式。 vue:src/views/tools/fake-strategy/components/ave-form.vue// ... existing code ...Watch(value)watchValue(v: any) …...

编程日记 2025/9/15 5:03:47

Linux第一个小程序－进度条 (linux第七课)

目录知识补充: 随机数的使用,先用srand(time(NULL))种时间种子函数指针模拟进度条代码知识补充: \r只是回车 \r\n是回车加换行,其中\n带有强制换行的功能如果只使用\r ,还需要刷新缓冲区(fflush(stdout)) %2d是左对齐 %-2d是右对齐 %.1lf是小数点后保留一位随机数的使…...

编程日记 2025/9/15 10:33:29

iOS指纹归因详解

iOS 指纹归因（Fingerprint Attribution）详解 1. 指纹归因的概念指纹归因（Fingerprint Attribution）是一种无 ID 归因（ID-less Attribution）技术，主要用于广告跟踪、用户识别或流量分析。它基…...

编程日记 2025/9/15 20:09:12

【Erdas实验教程】009：非监督分类及分类后评价

文章目录一、分类过程二、分类评价ERDAS 的 ISODATA 算法是基于最小光谱距离来进行的非监督分类，聚类过程始于任意聚类平均值或一个已有分类模板的平均值；聚类每重复一次，聚类的平均值就更新一次，新聚类的均值再用于下次聚类循环。这个过程不断重复，直到最大的循环次数已…...

编程日记 2025/9/10 22:29:46

DeepSeek＋Kimi生成高质量PPT

DeepSeek与Kimi生成PPT全流程解析一、工具分工原理 DeepSeek核心作用：生成结构化PPT大纲（擅长逻辑构建与内容优化）Kimi核心作用：将文本转换为视觉化PPT（提供模板库与排版引擎） 二、操作步骤详解 1. 通…...

编程日记 2025/9/10 0:26:04

conda 基本命令

1、查询当前所有的环境 conda env list 2、创建虚拟环境 conda create -n 环境名 [pythonpython版本号] 其中[pythonpython版本号]可以不写 conda create -n test python3.12 我们输入conda env list看到我们的环境创建成功了，但是发现他是创建在我们默认的C盘的…...

编程日记 2025/9/14 6:00:04

网站搭建wp

前置准备工作需要下载Git，note.js，在官网上可以搜索并安装搭建过程这里借助hexo工具 1. 本地博客搭建首先创建本地文件夹，并在该文件夹里面创建一个叫做hexo的文件夹在该文件夹中选择Git Bash 进入hexo官网将五条指令用bash运行运行…...

编程日记 2025/9/11 20:17:49

什么是图传技术？

1.什么是图传技术？ 图传技术（图像传输技术）是指将摄像头或其他图像采集设备捕获的实时画面，通过无线通信方式传输到接收端（如遥控器、显示屏、云端服务器等）的技术。它广泛应用于无人机、安防监控、直播设…...

编程日记 2025/9/15 21:47:05

Python数据结构高级：图的表示与遍历

Python数据结构高级：图的表示与遍历一、图的基本概念 1.1 图的定义与分类图（Graph）是由顶点（Vertex）集合和边（Edge）集合组成的数据结构，形式化表示为 G (V, E) 主要分类&…...

编程日记 2025/9/12 1:52:51

登录-10.Filter-登录校验过滤器

一.登录校验过滤器的实现思路我们要实现登录校验过滤器，就要首先明白登录校验过滤器的实现思路。登录校验过滤器是用来实现登录校验的。那么首先思考第一个问题，所有的请求都需要校验吗？ 答案是否定的，因为login请求就不需要过滤…...

编程日记 2025/9/15 3:45:23

《Keras 3 ：使用迁移学习进行关键点检测》：此文为AI自动翻译

《Keras 3 ：使用迁移学习进行关键点检测》作者：Sayak Paul，由 Muhammad Anas Raza 转换为 Keras 3 创建日期：2021/05/02 最后修改时间：2023/07/19 描述：使用数据增强和迁移学习训练关键点检测器。（i）此示例使用 Keras 3 在 Colab 中查看 GitHub 源关键点检测包…...

编程日记 2025/9/14 10:31:44

【Deepseek】AnythingLLM + Ollama

1. 下载安装 anythingllm 下载地址：https://anythingllm.com/desktop 2. 启动anything 点击 Get started 3.创建工作空间 4.选择Ollama大语言模型聊天设置当前只有一个1.5b的模型下载完成7b模型后选择后记得点击更新到工作空间！&…...

编程日记 2025/9/14 3:47:03

VMware17下Ubuntu22.04设置本地共享文件夹

VMware17下使用Ubuntu22.04设置共享文件夹在日常的开发与学习中，我们常常需要在主机（通常是Windows系统）和虚拟机（如Ubuntu 22.04）之间进行文件交换。为了简化这一过程，VMware提供了共享文件夹的功能&…...

编程日记 2025/9/15 7:19:47

【GreenHills】GHS合并库文件

1、文档目标解决Green Hills对于多个库文件合并问题 2、问题场景客户具有多个工程库文件。但是，客户想要在项目最终交付的时候，通过将多个库文件打包成一个库文件，进行交付。 3、软硬件环境 1）、软件版本：MULTI…...

编程日记 2025/9/14 1:47:34

mysql-统计表占内存大小

在 MySQL 中，统计表占用的内存大小（或者更准确地说，是表占用的磁盘空间大小）并非一个简单的任务，因为MySQL的数据存储涉及多种文件，包括数据文件、索引文件等。不过，有几种方法可以帮助你估算一…...

编程日记 2025/9/15 17:27:32

基于SpringBoot和Leaflet的邻省GDP可视化实战

目录前言一、技术实现路径 1、空间数据检索 2、数据展示检索流程二、SpringBoot后台实现 1、模型层实现 2、控制层实现三、WebGIS前端实现 1、控制面展示 2、成果展示四、总结前言在数字化浪潮席卷全球的今天，数据已成为驱动社会经济发展、指导政策…...

编程日记 2025/9/12 6:18:04

DeepSeek-R1本地部署保姆级教程

一、DeepSeek-R1本地部署配置要求 （一）轻量级模型 ▌DeepSeek-R1-1.5B 内存容量：≥8GB 显卡需求：支持CPU推理（无需独立GPU） 适用场景：本地环境验证测试/Ollama集成调试 （二&a…...

编程日记 2025/9/9 1:50:34

DeepSeek + Mermaid编辑器——常规绘图

下面这张图出自：由清华大学出品的《DeepSeek：从入门到精通》。作为纯文本生成模型，DeepSeek虽不具备多媒体内容生成接口，但其开放式架构允许通过API接口与图像合成引擎、数据可视化工具等第三方系统进行协同工作，最终…...

编程日记 2025/9/12 3:47:41

推送项目之解决冲突

文章目录为什么会发生冲突？如何解决这些冲突？1. **查看冲突文件**2. **解决二进制文件冲突**3. **解决文本文件冲突**4. **标记冲突已解决**5. **完成合并**6. **推送更改** 注意事项总结问题：我们在git pusll拉取远程仓库的代码到本地对比…...

编程日记 2025/9/16 2:17:17

蓝桥杯——lcd显示

一：复制文件从官方参考文件中复制相关文件，Src中的lcd.c，Inc中的lcd.h，fonts.h复制到自己创建的文件中二：lcd初始化在lcd.h中找到四个初始化函数，将其写到main文件中三：写lcd显示函数在…...

编程日记 2025/9/14 2:48:59

1_安装JDK和Hadoop

一、解压jdk和hadoop安装包下载通过百度网盘分享的文件：jdk-8u172-linux-x64.tar.gz 链接：https://pan.baidu.com/s/1VjhdpfyqdC7ivEBIjTn8tA 提取码：iz25 二、配置环境变量 vi /root/.bashrc添加 #set java environment export JAVA_H…...

编程日记 2025/8/16 13:05:11

angular简易计算器

说明： 用angular实现计算器效果，ui风格为暗黑效果图： step1: C:\Users\Administrator\WebstormProjects\untitled4\src\app\calnum\calnum.component.ts import { Component } from angular/core;Component({selector: app-calnum,import…...

编程日记 2025/9/14 7:11:56

python 程序

gif调整尺寸.py import sys from PIL import Image,ImageSequence import os ##print(sys.argv[0]) ##print(sys.argv[1]) def gifresize(file_name): gf Image.open(file_name) ## lifetime gf.info[duration] imglist [] imgnew [] for i in ImageSequence.…...

编程日记 2025/9/10 0:53:27

vue3响应式数据原理

Vue 3 的响应式系统与 Vue 2 有显著不同，Vue 3 使用了 Proxy 替代了 Vue 2 中的 Object.defineProperty，这使得 Vue 3 的响应式系统更加灵活和强大 Vue 3 响应式原理的核心 Proxy： Vue 3 使用 Proxy 来拦截对象的操作（如读取、赋值…...

编程日记 2025/9/15 22:33:22