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

相关推荐
江畔柳前堤14 分钟前
PyQt学习系列10-性能优化与调试技巧
开发语言·javascript·数据库·学习·性能优化·ecmascript·pyqt
黑匣子~27 分钟前
Electron 自动更新完整实现(全量更新 vs 增量更新 )
javascript·electron·js
侯六六33 分钟前
前端无感刷新Token实现(基于Axios)
前端
yasuniko36 分钟前
C++中IOstream解析
java·javascript·c++
shadowcz0071 小时前
Live Search API :给大模型装了一个“实时搜索引擎”的插件
linux·服务器·前端·数据库·搜索引擎
一个小白5551 小时前
nginx 的反向代理 负载均衡 动静分离 重写
linux·运维·前端·nginx·centos·firefox
panrunjun1 小时前
vue element-plus 集成多语言
前端·javascript·vue.js
蓝莓味的口香糖1 小时前
Vue常用自定义指令-积累的魅力【VUE】
前端·javascript·vue.js
沃野_juededa2 小时前
element ui 表格实现单选
javascript·vue.js·ui
未来之窗软件服务2 小时前
在 Excel 使用macro 常用函数 使用行数 招标专家系统————仙盟创梦IDE
前端·excel·vbs·excel插件·仙盟创梦ide