深入理解 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 类型,可以在处理未知类型的数据时,避免许多潜在的运行时错误。

相关推荐
Csvn6 分钟前
bundle优化
前端
slongzhang_35 分钟前
linux 递归删除源码文件|递归删除目录下 *.js,但排除 *.min.js
linux·开发语言·javascript
北冥有鱼35 分钟前
发版后动态路由点击报 `Failed to fetch dynamically imported module`」问题上的完整排查与修复过程
前端·vue.js
静默回滚36 分钟前
视频压到 25 MB 以内,码率要算、音轨要扣、余量要留
前端
用户372037492601841 分钟前
把 10MB 中文语义模型塞进浏览器:STSB 做到教师模型的 93%,但线上 top1 只有 42%
前端
光锥智能1 小时前
海康机器人举行2026移动机器人新品发布会:箱式存拣升级,「明智」系列发布
java·前端·机器人
计算机魔术师1 小时前
Anthropic 上市文件最吓人的一幕,不是亏损 807 亿
前端
alsmile1 小时前
AI友好的可视化图形引擎自我革命:Meta2d.js 2.0 历时一年全新重写,性能与多人协作全面升级
前端·开源·数据可视化
行思理1 小时前
Nginx 跨站请求(CORS)配置完全指南:从原理到生产实践
java·前端·nginx
粥里有勺糖1 小时前
视野修炼-技术周刊第137期 | 编程已经面目全非
前端·github·ai编程