TypeScript的unkonw类型

TypeScript 的 ⁠unknown⁠ 类型是什么？它的作用是什么？

TypeScript 的 unknown⁠ 类型用于存储那些在编写程序时类型不确定、但又需要类型检查的值。与 any⁠ 类型类似，unknown⁠ 可以接受任何类型的赋值，但不同的是，unknown⁠ 强制在对其进行操作前必须进行类型检查或类型断言（类型断言后面的文章会有解释），从而提升了类型安全性。

---

unknown⁠ 类型的变量在实际代码中如何使用？

可以这样声明和赋值 unknown⁠ 类型的变量：

let result: unknown;
result = 1;
result = 'hello';
result = false;
result = Symbol();
result = { name: 'John' };
result = [1, 2, 3];

但如果你直接对 unknown⁠ 类型的变量调用方法或操作符，TypeScript 编译器会报错，因为必须先进行类型断言：

let result: unknown;
result = [1,2,3];

// 直接调用 reduce() ，编译器报错：'result' is of type 'unknown'.ts(18046)
const total = result.reduce((a: number, b:number ) => a + b, 0);

---

如何在 unknown⁠ 类型的变量上安全地调用方法？

要在 unknown⁠ 类型的变量上调用方法，必须先进行类型断言。例如：

let result: unknown;
result = [1, 2, 3];

// 这里使用了类型断言，关键字 'as'
const total = (result as number[]).reduce((a: number, b: number) => a + b, 0);
console.log(total); //输出 6

这里通过 (result as number[])⁠ 明确告诉 TypeScript 编译器 ⁠result⁠ 是一个数字数组，这样就可以安全地调用 reduce⁠ 方法。

---

unknown⁠ 和 any⁠ 类型有什么区别？分别适用于哪些场景？

具体区别详见下面的表格：

特性	any	unkonw
类型安全	无类型安全	强制类型安全
操作	可直接进行任何操作	必须类型断言或类型缩小后才能操作
用例	动态值但不安全	动态值且安全，需验证
类型检查	编译器不检查	编译器强制检查
常见场景	JS 迁移到 TS	处理外部数据（API、数据库等）

简而言之，any⁠ 适合快速迁移或临时跳过类型检查，而 unknown⁠ 更适合需要安全处理外部数据的场景。

如何用 unknown⁠ 类型安全地处理外部 API 数据？

当你从外部 API 获取数据时，可以用 ⁠unknown⁠ 类型接收，然后在使用前进行类型断言：

// 获取远程 API 的数据方法
const fetchData = async (url: string): Promise<unknown> => {
    const response = await fetch(url);
    return await response.json();
};

// 通过获取远程 API 的数据，来展示文章列表
const showPosts = async () => {
    const url = 'https://jsonplaceholder.typicode.com/posts';
    try {
        const posts = await fetchData(url); // unknown 类型
        (
            posts as { userId: number; id: number; title: string; body: string }[]
        ).map((post) => console.log(post.title));
    } catch (err) {
        console.log(err);
    }
};

showPosts();

这样可以确保在处理数据前先进行类型验证，提升代码的健壮性和安全性。

---

如何利用 unknown⁠ 类型创建类型安全的接口？

你可以通过类型判断和类型缩（后续文章会解释）小来安全地处理 unknown⁠ 类型的值：

function format(value: unknown): void {
  switch (typeof value) {
    case 'string':
      console.log('String:', value.toUpperCase());
      break;
    case 'number':
      console.log('Number:', value.toFixed(2));
      break;
    default:
      console.log('Other types:', value);
  }
}

在访问值的方法前，先判断其类型，确保操作的安全性。

---

什么时候应该优先使用 unknown⁠ 类型？

• 当你需要处理来自外部的数据源（如 API、数据库等），且无法提前确定数据类型时，优先使用 unknown⁠，并在使用前进行类型验证。
• ⁠unknown⁠ 类型比 ⁠any⁠ 更安全，能有效防止类型相关的运行时错误。

---

备注：

JSONPlaceholder是一个免费的在线REST API，您可以在需要一些假数据时使用。它可以用在GitHub上的README，CodeSandbox上的演示，Stack Overflow上的代码示例，...或者简单地用于本地测试。

---

---

• 如果你觉得我的工作对你有帮助，可以通过分享和推荐这篇文字或者关注同名公众号来支持我，你的支持是我持续创作的最大动力：
  

• 转载以及引用请注明原文链接。

• 本博客所有文章除特别声明外，均采用CC 署名-非商业使用-相同方式共享 许可协议。