跳到主要内容

TypeScript - Any 类型

any 类型是 TypeScript 中一种特殊的类型，它可以代表任何值。当你不确定变量的类型或者变量的类型尚未定义时，可以使用 any 类型。any 类型在将 JavaScript 代码转换为 TypeScript 时特别有用。

任何值的占位符​

声明为 any 类型的变量可以存储任何数据类型的值。

let x: any;
x = "Hello";
x = 23;
x = true;

这里，变量 x 被声明为 any 类型。这允许我们给变量分配任何值，如字符串、数字、布尔值等。

使用 typeof 操作符检查 any 类型变量的类型时，结果将是 undefined。

let x: any;
console.log(typeof x); // undefined

编译后生成的 JavaScript 代码：

let x;
console.log(typeof x);

输出结果：

undefined

让我们通过以下 TypeScript 示例来理解 any 类型：

let x: any;
console.log(typeof x); // undefined
x = "Hello";
console.log(typeof x); // string
x = 23;
console.log(typeof x); // number
x = true;
console.log(typeof x); // boolean

在这个示例中，变量 x 被声明为 any 类型。然后我们给它分配了不同类型的值（字符串、数字和布尔值）。

编译后生成的 JavaScript 代码：

let x;
console.log(typeof x);
x = "Hello";
console.log(typeof x);
x = 23;
console.log(typeof x);
x = true;
console.log(typeof x);

输出结果：

undefined
string
number
boolean

任何类型的函数参数​

你也可以定义一个函数，使其参数为 any 类型。

function func(para: any) {
}

这里，函数 func 可以接受任何类型的参数（数字、字符串、布尔值等）。

让我们来看一个示例：

function greet(name: any): string {
    return `Hello Mr. ${name}`;
}
console.log(greet('Shahid'));
console.log(greet(123));

函数 greet 被定义为接受 any 类型的参数。因此，它可以接受任何类型的参数（数字、字符串等）。

我们调用了 greet 函数，传递了两个不同类型的值（字符串和数字）。你可以注意到，它对这两种类型的参数都有效。

编译后生成的 JavaScript 代码：

function greet(name) {
    return `Hello Mr. ${name}`;
}
console.log(greet('Shahid'));
console.log(greet(123));

输出结果：

Hello Mr. Shahid
Hello Mr. 123

任何类型的对象​

你也可以定义一个 any 类型的对象。这样的对象可以具有任何类型的属性。

const student: any = {
    name: "John Doe",
    age: 32,
    isEnrolled: true,
};

这里，student 对象被声明为 any 类型。它包含三个不同类型的属性。

尝试以下示例：

const student: any = {
    name: "John Doe",
    age: 32,
    isEnrolled: true,
};
console.log(student.name);
console.log(student.age);
console.log(student.isEnrolled);

编译后生成的 JavaScript 代码：

const student = {
    name: "John Doe",
    age: 32,
    isEnrolled: true,
};
console.log(student.name);
console.log(student.age);
console.log(student.isEnrolled);

输出结果：

John Doe
32
true

为什么使用 any 类型？​

使用 any 类型的一个原因是当你处理未进行类型检查的代码时。例如，如果你正在使用现有的 JavaScript 代码，any 类型在将 JavaScript 代码转换为 TypeScript 时非常有用。如果你正在使用一个不是用 TypeScript 编写的第三方库，你可能需要在 TypeScript 代码中为变量使用 any 类型。

另一个使用 any 类型的原因是当你不确定值的类型时。例如，一个接受用户输入的函数可以被定义为 any 类型，以处理用户提供的任何类型的数据。

在新的 TypeScript 代码中不鼓励使用 any 类型。建议在使用 any 类型时要小心。如果你过于频繁地使用 any 类型，你的代码将变得不那么类型安全。

类型断言​

使用类型断言来缩小 any 变量的类型。

let value: any = "hello world";
let lenStr: number = (value as string).length;
console.log(lenStr);

在上面的代码中，变量 value 被定义为 any 类型。然后它被缩小为字符串类型。

编译后生成的 JavaScript 代码：

let value = "hello world";
let lenStr = value.length;
console.log(lenStr);

输出结果：

11

注意事项​

如果不小心使用，any 类型可能会导致错误。

在下面的示例中，我们尝试访问一个不存在的属性 enrYear。这将导致运行时错误，因为我们已经将 student 对象定义为 any 类型。注意它不会显示编译时错误。

const student: any = {
    name: "John Doe",
    age: 32,
    isEnrolled: true,
};
console.log(student.name);
console.log(student.age);
console.log(student.enrYear);

编译后生成的 JavaScript 代码：

const student = {
    name: "John Doe",
    age: 32,
    isEnrolled: true,
};
console.log(student.name);
console.log(student.age);
console.log(student.enrYear);

输出结果：

John Doe
32
undefined

any 和 unknown​

当一个变量被声明为 any 类型时，你可以访问其不存在的属性。

示例：声明为 any 的变量

let user: any;
user.isEnrolled;

上面的 TypeScript 代码在编译时不会显示任何错误。但它将在运行时抛出以下错误：

Cannot read properties of undefined (reading 'isEnrolled')

示例：声明为 unknown 的变量

let user: unknown;
user.isEnrolled;

上面的代码将显示以下编译时错误：

'user' is of type 'unknown'.

小结​

any 类型在 TypeScript 中是一个强大的工具，允许你在类型系统中保持灵活性。然而，过度使用 any 类型会削弱 TypeScript 提供的类型安全优势。在处理现有 JavaScript 代码或第三方库时，any 类型非常有用。但在新的 TypeScript 代码中，应尽量避免使用 any 类型，以保持代码的类型安全。当你需要使用 any 类型时，请谨慎操作，以避免潜在的运行时错误。