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();
// 打印姓名和年龄
console.log(`${p.name}, ${p.age}`);

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

class Person {
    constructor() {
        this.name = "Shahid";
        this.age = 35;
    }
}
const p = new Person();
// 打印姓名和年龄
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中生成相同的代码。

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

5

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

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

函数add的参数类型被推断为number，所以当我们传递string类型的参数给函数时，它会显示以下错误：

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类型的值，它将显示一个错误。

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

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

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

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

上下文类型

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

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

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

上下文类型在编写简洁代码而不失去类型安全方面非常有帮助。