TypeScript 中 `any` 与 `unknown` 的区别

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

在 TypeScript 开发中，any和unknown是两种非常重要的类型，它们都用于处理不确定的类型，但它们的使用场景和语义有着显著的区别。正确理解和使用any和unknown是编写安全、可维护代码的关键。本文将详细介绍any和unknown的区别，并探讨它们的最佳实践。

一、any和unknown的基本概念

1.any类型

any类型是 TypeScript 中的一种顶级类型（Top Type），表示可以是任意类型。它是最宽松的类型，允许对变量进行任意操作，而不会引发类型错误。

letvalue:any;value=42;// OKvalue="Hello";// OKvalue=true;// OKvalue={};// OKvalue.toUpperCase();// OK，即使 value 的类型可能是数字或对象value.toFixed(2);// OK，即使 value 的类型可能是字符串或对象

特点

• 灵活性高：any类型的变量可以被赋值为任何类型，并且可以调用任何方法或访问任何属性，而不会引发编译时错误。
• 安全性低：由于any类型的灵活性，它不会进行任何类型检查。如果value的实际类型与操作不匹配（例如，对数字调用toUpperCase()），运行时可能会出现错误。

2.unknown类型

unknown类型是 TypeScript 3.0 引入的一种类型，用于表示任意未知的值。它也是一种顶级类型，但与any不同，unknown类型的值在使用之前必须进行类型检查。

letvalue:unknown;value=42;// OKvalue="Hello";// OKvalue=true;// OKvalue={};// OKvalue.toUpperCase();// Error: 'unknown' 类型的值不能调用 'toUpperCase'value.toFixed(2);// Error: 'unknown' 类型的值不能调用 'toFixed'

特点

• 灵活性低：unknown类型的变量不能直接进行任何操作，必须先通过类型检查（如typeof、instanceof或自定义类型守卫）来确定其具体类型。
• 安全性高：由于unknown类型强制进行类型检查，它能够有效避免潜在的运行时错误，提高代码的安全性。

二、any和unknown的主要区别

1. 类型检查

• any类型：不会进行任何类型检查。你可以对any类型的变量进行任意操作，即使这些操作在逻辑上是不合理的。
• unknown类型：会进行严格的类型检查。你不能对unknown类型的变量进行任何操作，除非先通过类型检查将其转换为更具体的类型。

2. 安全性

• any类型：由于缺乏类型检查，any类型的代码容易引入运行时错误。例如，对一个数字调用字符串方法可能会导致程序崩溃。
• unknown类型：通过强制类型检查，unknown类型的代码更加安全，能够有效避免潜在的类型错误。

3. 使用场景

• any类型：

  • 遗留代码：在迁移到 TypeScript 的过程中，可能需要使用any类型来处理未完全类型化的代码。
  • 动态类型：在某些情况下，变量的类型确实无法确定，或者需要动态处理多种类型。
  • 第三方库：某些第三方库可能使用any类型来表示某些值，尤其是在没有类型定义文件的情况下。

• unknown类型：

  • 外部数据：处理来自外部的数据（如 API 响应、用户输入等）时，unknown类型是理想的选择，因为它能够确保在使用数据之前进行类型检查。
  • 类型安全：在需要确保代码安全性的场景中，unknown类型可以强制开发者进行严格的类型检查，避免潜在的错误。

三、最佳实践

1. 尽量避免使用any类型

虽然any类型提供了极大的灵活性，但它也带来了类型安全问题。在现代 TypeScript 开发中，应尽量避免使用any类型，尤其是在新项目中。如果确实需要使用any类型，应尽量将其限制在最小范围内，并逐步将其替换为更具体的类型。

2. 使用unknown类型处理外部数据

在处理外部数据时，unknown类型是更好的选择。通过使用unknown类型，你可以确保在使用数据之前进行严格的类型检查，从而避免潜在的运行时错误。

functionprocessApiResponse(data:unknown){if(typeofdata==="object"&&data!==null&&"name"indata){console.log(`Name:${(dataas{name:string}).name}`);}else{console.log("Invalid data");}}

3. 使用类型守卫和自定义类型守卫

在需要将unknown类型转换为更具体的类型时，应优先使用类型守卫（如typeof、instanceof和Array.isArray()）或自定义类型守卫函数。这些方法能够提供更安全的类型检查，并且可以提高代码的可读性和可维护性。

functionisString(value:unknown):valueisstring{returntypeofvalue==="string";}functionisNumber(value:unknown):valueisnumber{returntypeofvalue==="number";}functionprocessValue(value:unknown){if(isString(value)){console.log(value.toUpperCase());}elseif(isNumber(value)){console.log(value.toFixed(2));}else{console.log("Unsupported type");}}

4. 使用联合类型和类型断言

在某些情况下，可以使用联合类型（Union Type）来表示变量可能的多种类型，并通过类型守卫进行区分。如果确实需要使用类型断言，应确保你完全了解变量的实际类型，并且能够承担潜在的风险。

functionprocessValue(value:string|number){if(typeofvalue==="string"){console.log(value.toUpperCase());}else{console.log(value.toFixed(2));}}

5. 配置 TypeScript 编译器选项

为了进一步限制any类型的使用，可以通过配置 TypeScript 编译器选项来提高代码的安全性。例如，启用以下选项：

• noImplicitAny：禁止在未明确指定类型的情况下使用any类型。
• strict：启用严格模式，包括noImplicitAny和其他严格类型检查选项。

{"compilerOptions":{"noImplicitAny":true,"strict":true}}

四、总结

any和unknown是 TypeScript 中两种用于处理不确定类型的顶级类型，但它们的使用场景和语义有着显著的区别。any类型提供了极大的灵活性，但缺乏类型检查，容易引入运行时错误；而unknown类型通过强制类型检查，提供了更高的安全性，适用于处理外部数据和需要严格类型检查的场景。

在实际开发中，应尽量避免使用any类型，优先使用unknown类型来处理不确定的值。通过合理使用类型守卫、自定义类型守卫函数和联合类型，可以实现更安全、更灵活的代码设计。同时，通过配置 TypeScript 编译器选项，可以进一步限制any类型的使用，提高代码的整体质量。

希望本文对您有所帮助！如果您有任何问题或建议，欢迎随时交流。