迹忆客 专注技术分享

在这里，我们将了解 TypeScript 如何使用一些称为类型断言的内部逻辑机制来推断和检查变量的类型。

类型断言允许我们设置值的类型并告诉编译器不要推断它。 在这种情况下，作为程序员，我们可能比 TypeScript 可以自行推断的更了解变量的类型。 当我们从 JavaScript 移植代码并且您可能知道比当前分配的更准确的变量类型时，就会发生这种情况。 它类似于 C# 和 Java 等其他语言中的类型转换。 但是，与 C# 和 Java 不同，TypeScript 中没有类型断言的运行时效果。 它只是让 TypeScript 编译器知道变量类型的一种方式。

示例：类型断言

let code: any = 123; 
let employeeCode = <number> code; 
console.log(typeof(employeeCode)); //Output: number

在上面的例子中，我们有一个任意类型的变量代码。 我们将此变量的值分配给另一个名为 employeeCode 的变量。 然而，我们知道 code 是数字类型，即使它已被声明为 any。 因此，在将 code 分配给 employeeCode 时，我们断言在这种情况下 code 是 number 类型，并且我们对此很确定。 现在，employeeCode 的类型是 number。

同样，我们可能会遇到这样一种情况，即我们有一个已声明但还没有任何属性的对象。

示例：带对象的类型断言

let employee = { };
employee.name = "John"; //Compiler Error: Property 'name' does not exist on type '{}'
employee.code = 123; //Compiler Error: Property 'code' does not exist on type '{}'

上面的例子会给出一个编译器错误，因为编译器假定 employee 的类型是没有属性的 {}。 但是，我们可以通过使用类型断言来避免这种情况，如下所示。

示例：带对象的类型断言

interface Employee { 
    name: string; 
    code: number; 
} 

let employee = <Employee> { }; 
employee.name = "John"; // OK
employee.code = 123; // OK

在上面的示例中，我们创建了一个具有属性名称和代码的 Employee 接口。 然后我们在 employee 上使用了这种类型断言。 接口用于定义变量的结构。 在界面章节中了解更多相关信息。

使用类型断言时要小心。 TypeScript 编译器将自动完成 Employee 属性，但如果您忘记添加属性，它不会显示任何编译时错误。 例如：

interface Employee { 
    name: string; 
    code: number; 
} 

let employee = <Employee> { 
    // 编译器将提供自动完成属性，
    but will not give an error if you forgot to add the properties
}; 
console.log(employee.name); // undefined; 

我们还可以将 TypeScript 中的 JavaScript 库用于某些现有功能。

let employeeCode = <number> myJSLib.GetEmployeeCode('Steve');
console.log(typeof(employeeCode)); // number

在上面的示例中，我们假设 myJSLib 是一个单独的 JavaScript 库，我们调用它的 GetEmployeeCode() 函数。 所以，我们将返回值的类型设置为数字，因为我们知道它返回的是一个数字。

在 TypeScript 中有两种方法可以进行类型断言：

第一、 使用尖括号 <> 语法。 到目前为止，在本节中，我们使用尖括号来显示类型断言。

let code: any = 123; 
let employeeCode = <number> code;

但是，还有另一种方法可以使用 as 语法进行类型断言。

第二、 使用 as关键字

示例：as 语法

let code: any = 123; 
let employeeCode = code as number;

这两种语法是等价的，我们可以使用这些类型断言语法中的任何一种。 但是，在 TypeScript 中处理 JSX 时，只允许使用 as 语法，因为 JSX 可以像语法一样嵌入到 XML 中。 由于 XML 使用尖括号，因此在 JSX 中使用带有尖括号的类型断言时会产生冲突。