面试官:谈一下在 ts 中你对 any 和 unknow 的理解

前言

在开发中,尤其在 react 项目中,一般都是会使用 ts 的,但是如果 ts 使用不当,就会出现很多any,也就是很多人笑称 typescript = anyscript,例如下面这段代码:

ts 复制代码
export interface Person {
  name: any;
  age: any;
  sex: any;
}

很多时候使用一些简单的类型定义,比如 number、boolean、string 可能我们还想写一下,但是遇到一些复杂的比如对象、promise,由于影响写代码的速度就直接使用 any 代替了,当然这样确实比较方便,但是一味的使用 any,ts 就失去了意义,尽管 ts 官方鼓励大家使用 any。

而且有的领导在 cr 时,很讨厌看到 any,如果有 any 是不给通过的。

那和any相似的还有一个unknow,本文就为大家简单介绍一下,这两者的区别。

any

首先,让我们来看看 any 类型。any 可以说是 ts 中最灵活的类型,它允许我们对该类型的值进行任何操作,而不会触发类型检查。这样我们就可以将任何类型的值赋给 any 类型的变量,也可以将 any 类型的值赋给其他任何类型的变量。这种灵活性就使得 any 成为了一把双刃剑。

举个栗子:

js 复制代码
let myAny: any = 42;
myAny = "Hello, world!";
myAny = true;
myAny = [1, 2, 3];

let myNumber: number = myAny; // 不会报错
console.log(myAny.nonExistentMethod()); // 不会在编译时报错,但可能在运行时报错

在这个栗子中,我们可以看到 any 类型的变量可以被赋予任何类型的值,而且可以被赋给其他类型的变量,甚至竟然还可以调用不存在的方法而不会在编译时报错。这种自由度虽然方便,但也容易导致潜在的运行时错误。

那么相比之下,unknown 类型则更加严格和安全。unknown 可以被认为是类型安全版本的 any。它同样可以接受任何类型的值,但是在使用 unknown 类型的值时,我们必须先进行类型检查或类型断言。

unknown

来看一个 unknown 的栗子:

js 复制代码
let myUnknown: unknown = 42;
myUnknown = "Hello, world!";
myUnknown = true;
myUnknown = [1, 2, 3];

// let myNumber: number = myUnknown; // 这行会报错
// console.log(myUnknown.length); // 这行也会报错

if (typeof myUnknown === "string") {
    console.log(myUnknown.toUpperCase());
}

let myString: string = myUnknown as string; // 使用类型断言

在这个栗子中,我们可以看到 unknown 类型的变量同样可以接受任何类型的值。但是,我们不能直接将 unknown 类型的值赋给其他类型的变量,也不能直接访问 unknown 类型值的属性或方法。我们必须先进行类型检查( if 语句中的类型检查)或使用类型断言 as。

什么情况下使用 any 或者 unknow

那么,我们应该在什么情况下使用 any,什么情况下使用 unknown 呢?

当我们真的不知道变量的类型,并且需要在代码中频繁地使用该变量而不进行类型检查时,可以使用 any。比如在处理来自第三方库的数据,或者在迁移 js 项目到 ts 的过程中,any 可能会很有用。

但是,一味的使用 any 会导致我们失去 ts 带来的类型安全性优势。所以,在大多数情况下,我们应该优先考虑使用 unknown。当我们不确定一个值的类型,但又想保持类型安全性时,unknown 是一个很好的选择。

使用 unknown 可以强制我们在使用该值之前进行必要的类型检查,这有助于捕获潜在的类型错误,提高代码的健壮性。

总结

总的来说,any 和 unknown 都为 ts 中的类型系统提供了一定的灵活性,但 unknown 更加注重类型安全。在实际开发中,我们应该尽量减少 any 的使用,多考虑使用 unknown,以充分利用 ts 的类型检查功能,写出更安全、更可靠的代码。

下次再想用 any 时,先问问自己:这里真的没法确定类型吗?用 unknown 会不会更安全?毕竟写 ts 的乐趣,不就是在类型系统的钢丝上优雅地跳舞吗?

相关推荐
濮水大叔5 小时前
Cabloy 双引擎架构详解:Vona 与 Zova 是如何协作的
typescript·node.js·全栈
溪语流沙5 小时前
【每天一个CSS | Day19】流光文字与一笔写成的手写签名
前端·javascript·css
逐光者9335 小时前
STM32——SPI 屏 · Flash · 高速
java·前端·stm32
To_OC6 小时前
同样是让 AI 写全栈,为什么别人一句话就够了
前端·前端框架·next.js
CDwenhuohuo6 小时前
electron pc项目打包成桌面端
前端·javascript·electron
前端大斗师6 小时前
「大于 1000」把 1000 元那单也算进去了:我在 Vue3 订单页对了 10 句话
前端·人工智能·typescript·大模型·原力计划
Jmyd01236 小时前
用 Web VR 引擎搭建 3D 虚拟展厅:从素材上云到多端实时渲染的完整数据链路
前端·3d·vr·三维数字化
刘天远7 小时前
Agent成本核算实现:事件表、状态分布与Python归集
前端·数据库·人工智能·python
欣欣之王来了7 小时前
开发环境准备:Node.js、npm、VS Code安装配置
前端·学习·架构·项目·vue3教程
xiaolinudao1237 小时前
将多个 Excel 表格中的数据合并到单个表中|6 种实现方案全解析
java·前端·excel