深入解析 TypeScript 的 unknown 和 any：安全性与灵活性的平衡

深入解析 TypeScript 的 unknown 和 any：安全性与灵活性的平衡

在 TypeScript 中，unknown 和 any 都表示"未知"类型的变量，但它们的应用场景和行为存在重要区别。unknown 是 TypeScript 3.0 引入的新类型，旨在为动态数据提供更高的类型安全，而 any 则是最早出现的通配类型，允许任意类型的值赋予变量。理解 unknown 与 any 的区别不仅能够帮助开发者写出更健壮的代码，还能优化类型系统的安全性与灵活性。在本文中，我们将深入探讨 unknown 和 any 的特点、使用场景以及最佳实践。

any 与 unknown 的基本概念

any 类型

any 是 TypeScript 中的一个顶级类型，表示可以赋值任何类型的值。将变量声明为 any 后，它将不受类型检查的限制，赋值、调用、访问属性时都不会触发类型错误。因此，any 被认为是"不安全"的类型，尽管它提供了极大的灵活性，但滥用 any 会削弱 TypeScript 的类型检查优势。

let someValue: any;

someValue = 42;

someValue = "Hello";

someValue = true;

// 不会报错

console.log(someValue.toUpperCase()); // 编译时不会有类型检查

unknown 类型

unknown 类型是 TypeScript 3.0 引入的，它也是顶级类型之一，可以接受任何类型的值。但不同于 any，unknown 提供了严格的类型检查------在对 unknown 类型的值进行操作前，必须先进行类型判断或类型断言，否则会触发编译错误。unknown 为动态类型的数据引入了一层安全机制，是一个"更安全的 any"。

let value: unknown;

value = 42;

value = "Hello";

// 编译错误：Object is of type 'unknown'

console.log(value.toUpperCase());

// 正确使用方式：类型检查

if (typeof value === "string") {

console.log(value.toUpperCase()); // 编译通过

}

unknown 与 any 的区别

类型安全性

• any：禁用类型检查，允许任何操作。会导致意外错误，如未定义的方法或属性调用等问题。

• unknown：强制类型检查，防止未检查的操作。需要明确变量的类型后才能进行操作，有助于避免潜在的运行时错误。

可赋值性

• any ：可以赋值给任意类型的变量，包括严格的类型（如 string、number 等）。

• unknown ：不能直接赋值给其他类型的变量，只能赋值给 unknown 或 any 类型。要将 unknown 赋值给具体类型的变量，需要通过类型断言或类型缩小来确保安全。

let unknownValue: unknown = "hello";

let anyValue: any = "hello";

let str1: string = anyValue; // ✅ 正确

let str2: string = unknownValue; // ❌ 编译错误，需要类型断言

与其他类型的兼容性

• any ：兼容所有类型，无论是赋值操作还是接口实现时，any 都不会引发冲突。

• unknown ：比 any 更严格，需要类型缩小、类型断言或具体类型匹配，才能与其他类型兼容。

let someUnknown: unknown = "hello";

let someString: string = someUnknown as string; // 必须使用类型断言

使用场景与最佳实践

使用 any 的场景

尽管 any 有可能导致类型安全性降低，但在某些场景中，any 的灵活性仍然具有不可替代的优势：

• 快速开发 ：在原型设计或快速开发中，为了省去类型定义的成本，可以使用 any。

• 第三方库数据 ：在未定义具体类型的第三方库中，临时用 any 标记数据类型。

• 未知输入 ：在接收极度动态化的数据（如 JSON）时可以使用 any，然后再进行类型检查和转换。

使用 unknown 的场景

unknown 是一种更安全的动态类型，在以下场景中更为适合：

• 动态数据 ：在处理 API 或用户输入数据时，可以使用 unknown 来标记数据，确保在使用前进行类型验证。

• 类型约束 ：如果一个变量的类型不明确，但需要保证操作的安全性，可以使用 unknown。

• 避免滥用 any ：对于需要灵活性但又希望保持类型安全性的场景，unknown 是比 any 更合适的选择。

具体示例：使用 unknown 处理 API 数据

在实际开发中，我们可能会从外部 API 获取数据，但数据的结构在运行时才会确定。此时可以使用 unknown，并在操作数据前进行类型验证。

async function fetchData(apiUrl: string): Promise<unknown> {

const response = await fetch(apiUrl);

return response.json();

}

async function handleData() {

const data: unknown = await fetchData("<https://api.example.com/data");>

if (typeof data === "object" && data !== null && "name" in data) {

const name = (data as { name: string }).name;

console.log(`User's name is ${name}`);

} else {

console.error("Invalid data format");

}

}

在上面的代码中，通过 unknown 来标记 API 返回的数据类型，并在使用前进行类型验证，确保了数据使用的安全性。

4. unknown 和 any 的总结与对比

特性	any	unknown
类型检查	无类型检查	严格类型检查
可赋值性	可赋值给任何类型	仅可赋值给 unknown 或 any
兼容性	兼容所有类型	需要类型缩小或类型断言
适用场景	快速开发、动态数据处理	动态数据、API 响应处理
类型安全性	低	高

vue react中的实际使用

在 React 和 Vue 3 的项目中，unknown 和 any 的应用场景很多，特别是在需要处理动态数据、API 响应或外部输入时，合理使用 unknown 可以提高代码的安全性和可读性，而 any 则可以提供灵活性。

---

在 React 中使用 unknown 和 any

场景 1：从 API 获取动态数据

在 React 中，通常会从 API 获取数据。由于 API 数据的类型在编译时不确定，我们可以使用 unknown 来标记数据类型，然后在使用前进行类型检查。

import React, { useEffect, useState } from 'react';

async function fetchUserData(apiUrl: string): Promise<unknown> {
  const response = await fetch(apiUrl);
  return response.json();
}

const UserProfile: React.FC = () => {
  const [userData, setUserData] = useState<{ name: string; age: number } | null>(null);

  useEffect(() => {
    async function loadData() {
      const data: unknown = await fetchUserData('/api/user');

      // 使用类型检查确保数据符合预期结构
      if (typeof data === 'object' && data !== null && 'name' in data && 'age' in data) {
        setUserData(data as { name: string; age: number });
      } else {
        console.error("Invalid user data format");
      }
    }

    loadData();
  }, []);

  return (
    <div>
      {userData ? (
        <div>
          <h1>{userData.name}</h1>
          <p>Age: {userData.age}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default UserProfile;

在上述代码中，我们将 fetchUserData 的返回类型设为 unknown，避免不安全的类型操作。通过类型检查，我们确保 userData 的结构符合预期。

场景 2：动态表单字段的处理

在一些情况下，表单字段是动态生成的，我们可以使用 any 来处理动态表单数据，同时使用 unknown 标记不确定的数据来源。

import React, { useState } from 'react';

type FormFields = Record<string, any>;

const DynamicForm: React.FC = () => {
  const [fields, setFields] = useState<FormFields>({});

  const handleInputChange = (field: string, value: unknown) => {
    if (typeof value === 'string' || typeof value === 'number') {
      setFields((prevFields) => ({ ...prevFields, [field]: value }));
    } else {
      console.warn("Invalid field value");
    }
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Username"
        onChange={(e) => handleInputChange("username", e.target.value)}
      />
      <input
        type="number"
        placeholder="Age"
        onChange={(e) => handleInputChange("age", Number(e.target.value))}
      />
      <button onClick={() => console.log(fields)}>Submit</button>
    </div>
  );
};

export default DynamicForm;

在这个例子中，FormFields 使用了 any 来容纳任意类型的数据，适合于动态的表单字段。而 handleInputChange 函数在使用 value 前进行了类型检查，避免直接使用不安全的类型。

---

在 Vue 3 中使用 unknown 和 any

场景 1：处理 API 响应数据

在 Vue 3 中，可以使用 ref 创建状态，并通过 API 获取数据时使用 unknown 类型以确保类型安全。

<template>
  <div v-if="user">
    <h1>{{ user.name }}</h1>
    <p>Age: {{ user.age }}</p>
  </div>
  <div v-else>Loading...</div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';

interface User {
  name: string;
  age: number;
}

async function fetchUserData(apiUrl: string): Promise<unknown> {
  const response = await fetch(apiUrl);
  return response.json();
}

export default defineComponent({
  setup() {
    const user = ref<User | null>(null);

    onMounted(async () => {
      const data: unknown = await fetchUserData('/api/user');

      if (typeof data === 'object' && data !== null && 'name' in data && 'age' in data) {
        user.value = data as User;
      } else {
        console.error("Invalid user data format");
      }
    });

    return { user };
  },
});
</script>

在这个示例中，我们使用 unknown 作为 fetchUserData 的返回类型，通过严格的类型检查确保 user 数据的结构符合预期。

场景 2：处理动态插槽内容

在 Vue 3 中，处理插槽内容时，可能会涉及不确定类型的属性。我们可以使用 any 来处理这种动态内容，同时尽量在插槽内进行类型检查。

<template>
  <slot name="custom" :data="customData"></slot>
</template>

<script lang="ts">
import { defineComponent, ref, PropType } from 'vue';

export default defineComponent({
  props: {
    data: {
      type: Object as PropType<Record<string, any>>,
      required: true,
    },
  },
  setup(props) {
    const customData = ref(props.data);

    return { customData };
  },
});
</script>

在这个示例中，data 的类型使用了 any，以支持不确定的动态内容。这样可以避免插槽内容类型固定的问题，适用于高度动态的 UI 需求。

---

unknown 和 any 的实践建议

1. 优先使用 unknown ：在 API 调用和不确定的动态数据处理中，优先使用 unknown 并添加类型检查，以保证类型安全。

2. 慎用 any ：在类型不确定的场景下，可以使用 any 提高灵活性，但应尽量避免 any 泛滥，并在使用前确保数据符合预期。

3. 使用 TypeScript 配合调试工具 ：对于 unknown 类型的变量，TypeScript 能帮助我们识别潜在的类型问题，配合 Vue DevTools 和 React DevTools 可以更好地检查应用状态，提升调试效率。

4. 为动态内容添加类型注释 ：在 unknown 和 any 中使用类型断言或类型缩小，避免动态数据造成的类型不安全。

---

总结

• any 适合快速开发和处理复杂动态数据，允许灵活操作，但缺乏类型安全。

• unknown 是更安全的动态类型，确保在使用前进行类型验证，更适合处理未知数据并保证代码的健壮性。

unknown 的引入使得 TypeScript 的类型系统更加完善，帮助开发者在灵活性与安全性之间取得平衡。通过选择合适的类型，开发者可以在提高代码可靠性的同时保持代码的简洁与可维护性。

• 技术沟通交流，月哥v：843655240

传送门

• 2023年总结: 游泳教练->前端程序员->两家公司小老板的2023年终总结

• -2022年终总结：2022底层程序员4年的逆袭之旅：穷屌丝-->小老板

• 2021年随笔：前端三年：小白变成老油条

• 2021年终总结：卷王的2021年终总结

• 2022年中总结：前端做题家的｜2022 年中总结

• 我为什么坚持六点起床

• 我为什么喜欢手抄代码

• 勤奋努力 === "卷" ？

• 我读技术书很焦虑，读不下去书怎么办？

• 简历包装 || 简历造假 vs 背景调查

• 今年面试了100+的前端同学我的总结