TypeScript - 类型推断

类型推断是 TypeScript 的一项特性，允许编译器自动确定（推断）变量、函数或表达式的类型。TypeScript 是一种可选静态类型编程语言。您可以声明变量、表达式或函数，而无需显式注释它们的类型。编译器将在编译时自动确定类型。

类型推断可以基于许多因素进行，包括：

分配给变量的值的类型。
传递给函数的函数参数或参数的类型。
函数返回值的类型。
对象和属性的类型。

让我们来看一个简单的例子：

let x = 5;
let y = "Hello World!";

在上面的代码中，TypeScript 编译器可以推断出变量 x 的类型为 number。这是因为变量 x 正在被赋值一个数字。编译器还可以推断出 y 的类型为 string，因为 y 正在被赋值一个字符串。

在上面的例子中，TypeScript 自动根据分配给它们的值推断变量的类型。

变量或成员初始化

可以使用变量和成员初始化来推断类型。TypeScript 编译器根据初始化值推断变量的类型。

示例

让我们来看一个变量初始化的例子：

let x = 20;
let y = "Hello World!";
let z = true;
console.log("type of x: ", typeof x);
console.log("type of y: ", typeof y);
console.log("type of z: ", typeof z);

编译后，它将生成相同的 JavaScript 代码。

上面示例代码的输出如下：

type of x:  number
type of y:  string
type of z:  boolean

让我们来看一个对象成员初始化的例子：

class Person {
  name = "Shahid";
  age = 35;
}
const p = new Person();
// Prints name and age
console.log(`${p.name}, ${p.age}`);

编译后，它将生成以下 JavaScript 代码。

class Person {
    constructor() {
        this.name = "Shahid";
        this.age = 35;
    }
}
const p = new Person();
// Prints name and age
console.log(`${p.name}, ${p.age}`);

上面代码的输出如下：

Shahid, 35

函数默认参数

当参数用默认值初始化时，typescript 编译器也可以推断函数参数的类型。

在下面的例子中，参数 x 和 y 用默认值初始化。编译器将 x 和 y 的类型推断为 number。这是因为初始化值是数字。

function add(x = 10, y = 30){
   return x + y;
}
let res = add(2,3);
console.log(res);

编译后，它将生成相同的 JavaScript 代码。

上面示例代码的输出如下：

现在让我们尝试将参数作为字符串值传递。

let res2 = add('2', '3');

函数 add 的参数类型被推断为 number，因此当我们将字符串类型的参数传递给函数时，它会显示以下错误：

Argument of type 'string' is not assignable to parameter of type 'number'.

函数返回类型

TypeScript 编译器根据返回值的类型推断函数返回类型的类型。

如果函数不返回任何值，则返回类型为 void。

在下面的例子中，函数 add 接受两个数字并返回它们的和。由于两个数字的和是数字，因此返回值的类型是 number。因此，编译器将函数 add 的返回类型推断为 number。

function add(x: number, y: number){
   return x + y;
}
let res1: number = add(2,3);
console.log(res1);

当我们将函数 add 的返回值赋给 string 类型的变量 (res2) 时，它将显示错误。

let res2: string = add(2,3);

错误如下：

Type 'number' is not assignable to type 'string'.

这是因为函数 add 的返回类型是 number，而我们将其赋值给 string 类型的变量。

最佳通用类型：联合类型

使用变量初始化、函数默认参数和返回类型进行类型推断很简单。

当 TypeScript 从多个表达式推断类型时，表达式的类型被确定为“最佳通用类型”。

让我们通过一个例子来理解这一点：

const a = [5, 10, "TypeScript"];

在上面的例子中，数组包含值 – 5、10 和 "TypeScript"。为了推断数组的类型，我们必须考虑每个元素的类型。这里，我们有数组类型的选择，例如 number 和 string。推断出的数组类型应该是数组中每个值的最佳通用类型。

最佳通用类型必须从提供的候选类型中选择。如果所有候选类型都没有超类型，则使用联合类型。因此，上面数组的推断类型为：

(number | string)[]

上面的数组只能包含 number 和 string 类型的数值。如果您尝试添加不同于 number 和 string 的类型的值，它将显示错误。

让我们尝试向数组添加一个布尔值。

const a = [5, 10, "TypeScript"];
a.push(true);

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

类型“boolean”的参数不能分配给类型“string | number”的参数。

上下文类型

上下文类型是 TypeScript 中的一项特性，允许编译器根据变量、参数或表达式使用的上下文推断其类型。例如，

window.onmousedown = function (mouseEvent) {
  console.log(mouseEvent.button);
}

在上面的例子中，TypeScript 使用 Window.onmousedown 函数的类型来推断赋值右侧函数表达式的类型。因此，它能够推断 mouseEvent 参数的类型为 MouseEvent。通过这种方式，TypeScript 推断 mouseEvent 具有 button 属性，并且不会显示编译错误。

上下文类型在编写简洁的代码的同时不损失类型安全方面非常有用。

打印页面