深入理解 TS 类型中的 any 和 unknow

any 和 unknown 是 TypeScript 中的两种类型,用于处理不同类型的数据。尽管它们都能接收任何类型的值,但它们的使用方式和目的有所不同。

any 类型

any 类型可以表示任何类型的值。在使用 any 类型时,TypeScript 会放弃对该值的类型检查,这意味着可以对 any 类型的值执行任何操作而不会产生类型错误。

允许在编写代码时暂时关闭类型检查。这对于一些不太确定的 ts 类型可能会有一些好处,使用 any 可以忽略类型问题,加快开发速度。

但是这也失去了类型检查的好处,可能导致运行时错误。使得代码维护性变差难以维护和调试,因为 TypeScript 不会提供任何类型提示和检查。

ts 复制代码
let moment: any;
value = 123;
value = "Moment";
value = true;

// 可以对 `any` 类型的值执行任何操作,没有类型检查
value.foo(); // 没有类型错误,但可能导致运行时错误

value.bar = 123; // 没有类型错误,但可能导致运行时错误

any 的实现原理

any 类型的实现原理实际上非常简单,但在编译时和运行时都会有一些具体的行为和特点。

当我们在使用 any 类型时,TypeScript 编译器会放弃对该值的类型检查。这意味着我们可以对 any 类型的值执行任何操作,而不会收到编译错误。

any 类型的实现原理实际上并不是在编译器内部实现某种复杂的逻辑,而是通过跳过类型检查实现的。这意味着:

  1. 类型推断和检查:当变量的类型被声明为 any 时,编译器不会对该变量进行类型推断和检查。

  2. 跳过类型检查:编译器在处理 any 类型的变量时,会跳过类型检查阶段,允许所有的属性访问和方法调用。

  3. 生成普通 JavaScript 代码:在编译阶段,any 类型的变量会被编译为普通的 JavaScript 变量,没有附加任何类型信息。

如上图所示,使用 any 在 ts 文件中编译出来的代码是一摸一样的。

unknown

unknown 类型也可以表示任何类型的值,但它更严格。在对 unknown 类型的值执行任何操作之前,必须先进行类型检查或类型断言。unknown 类型提供了更好的类型安全性。

在对值进行操作之前必须进行类型检查或断言,确保类型安全。可以减少运行时错误,提供更好的类型安全性。但是在使用 unknown 类型时,需要额外的类型检查和断言,可能增加一些代码量。

如下代码所示:

ts 复制代码
let value: unknown;
value = 123;
value = "hello";
value = true;

// 在对 `unknown` 类型的值执行操作之前必须进行类型检查
if (typeof value === "string") {
  console.log(value.toUpperCase()); // 类型检查后,可以安全地调用 `toUpperCase`
}

// 或者使用类型断言
console.log((value as string).toUpperCase()); // 使用类型断言

当我们没有做类型检查或者断言的时候会有报错,如下图所示:

unknown 类型的实现原理是通过在编译时强制类型检查来实现的。这意味着在对 unknown 类型的值进行任何操作之前,必须先进行类型检查或类型断言。TypeScript 编译器会在编译阶段确保这一点。

总结

unknown 类型在 TypeScript 中提供了一种更安全的方式来处理任意类型的值。它的实现原理是通过在编译时强制进行类型检查或类型断言来确保类型安全。相比 any 类型,unknown 类型提供了更高的类型安全性,但在使用时需要更多的类型检查和断言。通过使用 unknown 类型,可以在处理未知类型的数据时,避免许多潜在的运行时错误。

相关推荐
计算机魔术师9 分钟前
Google DeepMind 将 AI 科学家 Co-Scientist 扩展为实验室集成研究伙伴
前端
2601_9657984719 分钟前
BrandBoost WordPress Theme Review: Fast Agency Web Architecture
前端
律宏阔21 分钟前
Electron 集成 Drizzle + SQLite 踩坑笔记
前端
律宏阔24 分钟前
Electron preload.ts 类型无法自动推导的解决方案
前端
烂蜻蜓28 分钟前
Flask入门教程(十):静态文件——CSS、JS与图片的正确管理方式
javascript·css·flask
名字还没想好☜35 分钟前
kubectl 排障实战:jsonpath 精准取值、custom-columns、events 排序与 top 速查
运维·前端·chrome·docker·kubernetes
李昊哲小课42 分钟前
Spring Boot 4 旅游主题实战教程 阶段二:Web 开发基础
前端·spring boot·旅游
Mr数据杨1 小时前
【Codex】用学生支持周报模块跟踪个性化支持进展
android·java·javascript·django·codex·项目开发
独立开发之道1 小时前
【three.js教程】Three.js 材质详解:从“不反光“到“物理级真实“怎么选
开发语言·javascript·材质
ITmaster07311 小时前
从零到一!前端搭建本地轻量化 RAG 问答系统
前端