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

相关推荐
小码哥_常8 小时前
Room 3.0:移动端持久化的“重生”变革
前端
Beginner x_u9 小时前
链表专题:JS 实现原理与高频算法题总结
javascript·算法·链表
Front思9 小时前
前端的.hbs
前端
我叫汪枫9 小时前
在后台管理系统中,如何递归和选择保留的思路来过滤菜单
开发语言·javascript·node.js·ecmascript
_.Switch9 小时前
东方财富股票数据JS逆向:secids字段和AES加密实战
开发语言·前端·javascript·网络·爬虫·python·ecmascript
软件技术NINI9 小时前
webkit简介及工作流程
开发语言·前端·javascript·udp·ecmascript·webkit·yarn
Brendan_0019 小时前
JavaScript的Stomp.over
开发语言·javascript·ecmascript
普通网友9 小时前
ES6模块化、Promise、async、await、EventLoop、API接口案例_export function 与 await
前端·ecmascript·es6
念2349 小时前
f5 shape分析
开发语言·javascript·ecmascript
難釋懷9 小时前
Vue混入
前端·javascript·vue.js