TypeScript 中如何使用 unknown 类型？-JavaScript中文网-JavaScript教程资源分享门户

在 TypeScript 中，unknown 类型是一种特殊的类型，它可以表示任何类型的值。与 any 类型不同的是，unknown 类型在使用时需要进行类型检查或类型断言，以确保代码的类型安全性。在本文中，我们将深入了解 TypeScript 中如何使用 unknown 类型，并提供示例代码和实用技巧。

什么是 unknown 类型？

在 TypeScript 3.0 中引入了 unknown 类型，它是一种顶级类型，可以表示任何类型的值。与 any 类型不同的是，unknown 类型只能使用类型检查或类型断言来访问其属性或调用其方法。这意味着，当我们使用 unknown 类型时，需要更加谨慎地处理其值，以确保代码的类型安全性。

以下是一个使用 unknown 类型的示例：

// www.javascriptcn.com code example
function getValue(obj: unknown) {
  if (typeof obj === 'string') {
    return obj.toUpperCase();
  }
  return obj;
}

const value = getValue('hello world');
console.log(value); // "HELLO WORLD"

在上面的示例中，我们定义了一个函数 getValue，它接收一个类型为 unknown 的参数 obj。在函数内部，我们首先使用 typeof 操作符检查 obj 的类型是否为字符串，如果是，则调用 toUpperCase 方法将其转换为大写字母。否则，我们直接返回 obj。在函数调用时，我们传递了一个字符串 'hello world'，并将其赋值给变量 value。最后，我们使用 console.log 打印出了 value 的值，该值为字符串 'HELLO WORLD'。

如何使用 unknown 类型？

在 TypeScript 中，我们可以使用 unknown 类型来处理以下情况：

1. 可能存在多种类型的值

当我们无法确定一个值的具体类型时，可以使用 unknown 类型来代替 any 类型。在使用时，我们需要进行类型检查或类型断言，以确保代码的类型安全性。

例如，以下代码演示了如何使用 unknown 类型来处理可能存在多种类型的值：

// www.javascriptcn.com code example
function getValue(obj: unknown) {
  if (typeof obj === 'string') {
    return obj.toUpperCase();
  }
  if (typeof obj === 'number') {
    return obj.toFixed(2);
  }
  return obj;
}

const value1 = getValue('hello world');
console.log(value1); // "HELLO WORLD"

const value2 = getValue(3.1415926);
console.log(value2); // "3.14"

const value3 = getValue(true);
console.log(value3); // true

在上面的示例中，我们定义了一个函数 getValue，它接收一个类型为 unknown 的参数 obj。在函数内部，我们使用 typeof 操作符检查 obj 的类型，如果是字符串，则调用 toUpperCase 方法将其转换为大写字母；如果是数字，则调用 toFixed 方法将其保留两位小数；否则，直接返回 obj。在函数调用时，我们分别传递了一个字符串、一个数字和一个布尔值，并将结果分别赋值给变量 value1、value2 和 value3。最后，我们使用 console.log 打印出了这三个变量的值。

2. 可能存在未知类型的值

当我们从外部库或接口中获取一个值时，可能无法确定其类型，此时可以使用 unknown 类型来代替 any 类型。在使用时，我们需要进行类型检查或类型断言，以确保代码的类型安全性。

例如，以下代码演示了如何使用 unknown 类型来处理可能存在未知类型的值：

// www.javascriptcn.com code example
interface User {
  name: string;
  age: number;
}

function getUser(data: unknown) {
  if (typeof data === 'object' && data !== null) {
    const { name, age } = data as User;
    return `My name is ${name}, and I'm ${age} years old.`;
  }
  return 'Invalid data type.';
}

const user = { name: 'John Doe', age: 30 };
const result = getUser(user);
console.log(result); // "My name is John Doe, and I'm 30 years old."

在上面的示例中，我们定义了一个接口 User，它包含两个属性 name 和 age。然后，我们定义了一个函数 getUser，它接收一个类型为 unknown 的参数 data。在函数内部，我们首先使用 typeof 操作符检查 data 的类型是否为对象，并且不为 null。如果是，则使用类型断言将 data 转换为 User 类型，并将其属性解构为变量 name 和 age。最后，我们返回一个字符串，其中包含 name 和 age 的值。在函数调用时，我们传递了一个对象 user，并将结果赋值给变量 result。最后，我们使用 console.log 打印出了 result 的值。

如何避免使用 unknown 类型时的错误？

在使用 unknown 类型时，我们需要注意以下几点，以避免出现类型错误：

1. 进行类型检查或类型断言

由于 unknown 类型可以表示任何类型的值，因此在使用时需要进行类型检查或类型断言，以确保代码的类型安全性。例如，以下代码演示了如何使用类型检查和类型断言来访问 unknown 类型的属性：

// www.javascriptcn.com code example
function getValue(obj: unknown) {
  if (typeof obj === 'object' && obj !== null) {
    if ('toUpperCase' in obj) {
      return (obj as string).toUpperCase();
    }
    if ('toFixed' in obj) {
      return (obj as number).toFixed(2);
    }
  }
  return obj;
}

const value1 = getValue('hello world');
console.log(value1); // "HELLO WORLD"

const value2 = getValue(3.1415926);
console.log(value2); // "3.14"

const value3 = getValue(true);
console.log(value3); // true

在上面的示例中，我们首先使用 typeof 操作符检查 obj 的类型是否为对象，并且不为 null。然后，我们使用 in 操作符检查 obj 是否包含 toUpperCase 或 toFixed 方法。如果是，则使用类型断言将 obj 分别转换为字符串或数字类型，并调用相应的方法。最后，我们返回 obj 的值。在函数调用时，我们分别传递了一个字符串、一个数字和一个布尔值，并将结果分别赋值给变量 value1、value2 和 value3。最后，我们使用 console.log 打印出了这三个变量的值。

2. 使用类型守卫

在 TypeScript 中，我们可以使用类型守卫来判断一个值的具体类型，并对其进行相应的处理。类型守卫可以是类型检查、类型断言或自定义类型谓词。例如，以下代码演示了如何使用自定义类型谓词来判断一个值的具体类型：

// www.javascriptcn.com code example
function isUser(data: unknown): data is User {
  return typeof data === 'object' && data !== null && 'name' in data && 'age' in data;
}

function getUser(data: unknown) {
  if (isUser(data)) {
    const { name, age } = data;
    return `My name is ${name}, and I'm ${age} years old.`;
  }
  return 'Invalid data type.';
}

const user = { name: 'John Doe', age: 30 };
const result = getUser(user);
console.log(result); // "My name is John Doe, and I'm 30 years old."

在上面的示例中，我们首先定义了一个自定义类型谓词 isUser，它判断一个值是否为 User 类型。在函数内部，我们使用 typeof 操作符检查 data 的类型是否为对象，并且不为 null。然后，我们使用 in 操作符检查 data 是否包含 name 和 age 属性。最后，我们返回一个布尔值，表示 data 是否为 User 类型。在函数 getUser 中，我们使用 isUser 函数作为类型守卫，并将 data 转换为 User 类型。最后，我们返回一个字符串，其中包含 name 和 age 的值。在函数调用时，我们传递了一个对象 user，并将结果赋值给变量 result。最后，我们使用 console.log 打印出了 result 的值。

结论

在 TypeScript 中，unknown 类型是一种特殊的类型，它可以表示任何类型的值。与 any 类型不同的是，unknown 类型在使用时需要进行类型检查或类型断言，以确保代码的类型安全性。在使用 unknown 类型时，我们需要更加谨慎地处理其值，以避免出现类型错误。在本文中，我们深入了解了 TypeScript 中如何使用 unknown 类型，并提供了示例代码和实用技巧，希望能够对你的学习和开发工作有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/676b6fe678388e33bb22a36b

TypeScript 中如何使用 unknown 类型？