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

相关推荐
qq_390161775 分钟前
防抖函数--应用场景及示例
前端·javascript
3345543233 分钟前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test35 分钟前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome