面试题-在ts中类型转换的方法

在 TypeScript 中,类型转换主要分为 类型断言(Type Assertion)类型守卫(Type Guard) 和 类型兼容转换 三种方式。以下是详细分类和示例:

一、类型断言(Type Assertion)

强制编译器将值视为特定类型,不改变运行时行为。

1. 尖括号语法
let value: any = "hello";
let length: number = (<string>value).length;
2. as 语法(更推荐,JSX 中必须使用)
let value: any = "hello";
let length: number = (value as string).length;
3. 非空断言(Non-null Assertion)

断言值不为 null 或 undefined

function printLength(str: string | null) {console.log((str!).length); // 断言 str 不为 null
}

二、类型守卫(Type Guard)

在运行时检查类型,缩小类型范围。

1. typeof 守卫
function add(a: number | string, b: number | string): number {if (typeof a === "number" && typeof b === "number") {return a + b; // a 和 b 被缩小为 number}return Number(a) + Number(b);
}
2. instanceof 守卫
class Animal { speak() {} }
class Dog extends Animal { bark() {} }function printPet(pet: Animal) {if (pet instanceof Dog) {pet.bark(); // pet 被缩小为 Dog}
}
3. 自定义类型守卫
interface Fish { swim: () => void }
interface Bird { fly: () => void }function isFish(pet: Fish | Bird): pet is Fish {return (pet as Fish).swim !== undefined;
}function move(pet: Fish | Bird) {if (isFish(pet)) {pet.swim(); // 类型为 Fish} else {pet.fly();  // 类型为 Bird}
}

三、类型兼容转换

基于类型结构的隐式转换(无需断言)。

1. 子类型赋值给父类型
interface Animal { name: string }
interface Dog extends Animal { breed: string }let dog: Dog = { name: "Buddy", breed: "Labrador" };
let animal: Animal = dog; // 合法:Dog 是 Animal 的子类型
2. 联合类型转换
let value: string | number = "hello";
let str: string = value as string; // 断言为 string

四、类型转换工具类型

1. typeof

获取值的类型:

const person = { name: "Alice", age: 30 };
type PersonType = typeof person; // { name: string; age: number }
2. keyof

获取类型的所有属性名:

type PersonKeys = keyof typeof person; // "name" | "age"
3. 类型映射
type ReadonlyPerson = Readonly<typeof person>; // 所有属性变为只读

五、运行时类型转换

实际修改值的类型(与 TypeScript 类型系统无关)。

1. 转字符串
String(123);          // "123"
JSON.stringify({});   // "{}"
2. 转数字
Number("42");         // 42
parseInt("10px");     // 10
+"5";                 // 5(一元加号)
3. 转布尔值
Boolean(0);           // false
!!null;               // false(双重否定)

六、常见陷阱与最佳实践

  1. 过度使用断言

    • 避免使用 as any 绕过类型检查,优先使用类型守卫。
  2. 类型守卫与断言的区别

    • 类型守卫:运行时检查,真正缩小类型范围。
    • 类型断言:仅告知编译器类型,不验证值的实际类型。
  3. 使用类型谓词(Type Predicate)

    function isString(value: any): value is string {return typeof value === "string";
    }
    

总结

场景方法示例
强制类型转换(编译时)类型断言(as 或 <>)(value as string).length
运行时类型检查类型守卫(typeof/instanceof)if (typeof x === 'number') { ... }
获取已有类型typeoftype T = typeof obj
转换值的实际类型String()/Number()/Boolean()Number("42")
泛型约束extendsfunction identity<T extends string>(x: T)

合理使用这些工具,可以让你的 TypeScript 代码既安全又灵活。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/diannao/87938.shtml
繁体地址,请注明出处:http://hk.pswp.cn/diannao/87938.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IIS配置SSL证书

公司的一个项目使用IIS部署的网站&#xff0c;现在需要更新SSL证书。为了下次方便&#xff0c;在此做记录整理。 以下第一部分是查网络AI查询到的资料&#xff0c;解决了我心中对双击和从IIS导入有什么不同的疑惑。第二部分是我在这次实际操作过程中的截图。 一.证书安装方式 …

K8s初始化容器与边车容器比对

Kubernetes 中的初始化容器和边车容器 Kubernetes 作为一个开源容器编排平台&#xff0c;引入了强大的概念来管理和增强 Pod 内容器的功能。其中两个概念是初始化容器&#xff08;Init Containers&#xff09;和边车容器&#xff08;Sidecar Containers&#xff09;。尽管这两…

无线Debugger攻防全解:原理剖析与突破之道

引言​​ 在Web安全防护体系中&#xff0c;反调试技术已成为对抗爬虫和分析的关键武器。2023年OWASP报告显示&#xff0c;Top 1000网站中92%部署了反调试机制&#xff0c;其中​​无线Debugger技术​​&#xff08;也称为无限Debug&#xff09;因其难以破解的特性&#xff0c;…

Eslint自定义规则使用

文章目录 前言场景设定&#xff1a;维护代码分层&#xff0c;禁止“跨级调用”实现步骤&#xff1a;从零到一&#xff0c;创建你的第一条自定义规则**第 1 步&#xff1a;创建规则文件****第 2 步&#xff1a;在 eslint.config.mjs 中注册并启用你的规则** 验证成果 前言 设计…

深入剖析Spring Cloud Gateway,自定义过滤器+断言组合成拦截器链实现Token认证

一、Spring Cloud Gateway网关的整体架构 Spring Cloud Gateway 是 Spring Cloud 官方推出的网关解决方案&#xff0c;旨在替代 Netflix Zuul 1.x。其底层基于 Spring WebFlux Reactor 模型 构建&#xff0c;具备响应式、异步非阻塞的高性能特点。 1. 整体架构图 ----------…

VMware Workstation Pro下Centos 7.9 安装

背景系统安装方案1、VMware安装    1.1、下载    1.2、安装 2、Centos 7.9 安装    2.1 、Centos7.9 iso 下载    2.2、使用VMware 安装    2.2.1、VMware配置虚拟机    2.2.2、Linux安装 结语 背景 本文所在专栏的所有文章基于Centos7.9系统来演示&#xff0c;系…

我做个一个APP叫【图影工具箱】:一站式解决视频提取音频和加水印的鸿蒙神器

在数字内容创作和日常使用手机的过程中&#xff0c;提取视频音频、处理图片和视频水印是一大需求。许多人在寻找合适的软件时&#xff0c;往往试遍各种工具却仍无法满足需求。所以&#xff0c;我做了一款应用 —— 图影工具箱&#xff0c;一站式解决这些令人头疼的问题。 图影…

【StarRocks系列】查询语句执行全流程

目录 StarRocks 查询数据流程详解 1. 提交查询语句 2. FE 解析与优化 3. 选择 BE 节点与数据路由 4. BE 数据读取与计算 5. 结果返回 关键优化点总结 示例流程 流程图 StarRocks 查询数据流程详解 StarRocks 采用分布式 MPP 架构&#xff0c;查询流程涉及 FE&#xff…

HarmonyOS 5的分布式通信矩阵是如何工作的?

HarmonyOS 5 的分布式通信矩阵通过多层级技术协同实现跨设备高效协同&#xff0c;其核心工作机制如下&#xff1a; 一、核心架构&#xff1a;分布式软总线 3.0‌ ‌动态拓扑感知‌ 设备自动发现并构建最优传输路径&#xff08;如手机与智慧屏优先采用 Wi-Fi P2P 直连&#xf…

自定义Django rest_framework中response的示例

在实际项目开发中&#xff0c;原有框架的response可能并不能完全满足我们的需求。比如我们需要定义一些更加详细的RESULT_CODE来说明情况。那么我们就可以基于原有的response进行自定义。 下面是一个自定义Django rest_framework中response的示例 # -*- coding:utf-8 -*- imp…

如何开发HarmonyOS 5的分布式通信功能?

以下是基于HarmonyOS 5开发分布式通信功能的完整技术指南&#xff0c;涵盖核心流程与关键代码实现&#xff1a; 一、开发前置配置 权限声明‌ 在module.json5中添加分布式权限&#xff1a; {"module": {"requestPermissions": [{"name": &quo…

Linux --静态库和动态库的制作和原理

本章重点&#xff1a; 动静态库的制作&#xff0c;使用和查找 可执行程序ELF格式 可执行程序的加载过程 虚拟地址空间和动态库加载的过程 动静态库的制作&#xff0c;使用和查找 1.在了解库的制作之前&#xff0c;我们首先需要知道什么是库。库是写好的现有的&#xff0c;成…

50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | IncrementingCounter(递增计数器)

&#x1f4c5; 我们继续 50 个小项目挑战&#xff01;—— IncrementingCounter组件 仓库地址&#xff1a;https://github.com/SunACong/50-vue-projects 项目预览地址&#xff1a;https://50-vue-projects.vercel.app/ 使用 Vue 3 的 Composition API 和 <script setup&g…

简约求职简历竞聘工作求职PPT模版共享

简历竞聘&#xff0c;自我介绍&#xff0c;个人简历&#xff0c;工作求职PPT模版&#xff0c;岗位竞聘求职简历PPT模版&#xff0c;低调绿自我介绍PPT模版&#xff0c;简约求职简历PPT模版&#xff0c;个人介绍PPT模版&#xff0c;我的简历PPT模版&#xff0c;个人求职简介PPT模…

Java大厂面试攻略:Spring Boot与微服务架构深度剖析

问题一&#xff1a;Spring Boot 的自动配置原理是什么&#xff1f; 简洁面试回答&#xff1a; Spring Boot 的自动配置基于条件化配置&#xff0c;通过 Conditional 注解实现&#xff0c;根据项目中依赖和环境自动装配 Bean。 详细解析&#xff1a; Spring Boot 自动配置的核…

Windows核心端口攻防全解析:135、139、445端口的技术内幕与安全实践

Windows核心端口攻防全解析&#xff1a;135、139、445端口的技术内幕与安全实践 引言&#xff1a;Windows网络通信的命脉 在Windows网络生态系统中&#xff0c;135、139和445端口犹如网络通信的"大动脉"&#xff0c;承载着关键的系统服务和网络功能。这些端口不仅是…

从生活场景学透 JavaScript 原型与原型链

一、构造函数&#xff1a;以 “人” 为例的对象工厂 1. 生活场景下的构造函数定义 我们以 “人” 为场景创建构造函数&#xff0c;每个人都有姓名、年龄等个性化属性&#xff0c;也有人类共有的特征&#xff1a; // 人类构造函数 function Person(name, age) {this.name na…

学c++ cpp 可以投递哪些岗位

此次描述知识针对应届生来说哈&#xff0c;如果是社招&#xff0c;更多是对于你目前从事的方向&#xff0c;技术栈进行招聘就好了。 此次编写是按照boss上岗位筛选的方式进行编写的&#xff0c;其实投简历一般也是用boss&#xff0c;后面也会出一篇文章给大家介绍一般找工作都用…

【Docker基础】Docker镜像管理:docker rmi、prune详解

目录 引言 1 Docker镜像管理概述 1.1 为什么需要镜像清理&#xff1f; 1.2 镜像生命周期管理 2 docker rmi命令详解 2.1 基本语法 2.2 常用选项 2.3 删除单个镜像 2.4 删除多个镜像 2.5 强制删除镜像 2.6 删除所有镜像 3 docker rmi工作原理 3.1 镜像删除流程 3.…

57-Oracle SQL Profile(23ai)实操

在上一期中说到了SQL Tuning Advisor其中一个影响对象就是SQL Profile&#xff0c;同样在管理和应用开发中,SQL性能优化是个任重道远的工作&#xff0c;低效的SQL语句让应用响应缓慢,用户整体体验下降,拖垮搞蹦整个系统都有可能。Oracle数据库提供了多种组合工具&#xff0c;有…