【TypeScript】004-类型推论与联合类型

左手的ㄟ右手 2023-10-03 06:49 23阅读 0赞

### 文章目录 ###

*   *  3、类型推论
     *   *  什么是类型推论
     *  4、联合类型
     *   *  简单的例子
         *  访问联合类型的属性或方法

## 3、类型推论 ##

> 如果没有明确的指定类型，那么 TypeScript 会依照类型推论（Type Inference）的规则推断出一个类型。

### 什么是类型推论 ###

以下代码虽然没有指定类型，但是会在编译的时候报错：

let myFavoriteNumber = 'seven'; // 声明的时候赋值为字符串，推断为字符串类型
    myFavoriteNumber = 7; // 将一个数值赋值给一个字符串类型，导致报错！
    
    // index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.
    
    事实上，它等价于：
    
    ```typescript
    let myFavoriteNumber: string = 'seven';
    myFavoriteNumber = 7;
    
    // index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。

**如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 `any` 类型而完全不被类型检查**：

let myFavoriteNumber; // 推断为任意值！
    myFavoriteNumber = 'seven';
    myFavoriteNumber = 7;

## 4、联合类型 ##

> 联合类型（Union Types）表示取值可以为多种类型中的一种。

### 简单的例子 ###

let myFavoriteNumber: string | number; // 这就意味着可以是字符串，也可以是数值！
    // 所以可以赋值为字符串，也可以赋值为数值！
    myFavoriteNumber = 'seven';
    myFavoriteNumber = 7;
    
    // 下面就会报错了
    myFavoriteNumber = true;
    
    // index.ts(2,1): error TS2322: Type 'boolean' is not assignable to type 'string | number'.
    // Type 'boolean' is not assignable to type 'number'.

联合类型使用 `|` 分隔每个类型。

这里的 `let myFavoriteNumber: string | number` 的含义是，允许 `myFavoriteNumber` 的类型是 `string` 或者 `number`，但是不能是其他类型。

### 访问联合类型的属性或方法 ###

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们**只能访问此联合类型的所有类型里共有的属性或方法**：

function getLength(something: string | number): number {
        
        return something.length;
    }
    
    // index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
    //   Property 'length' does not exist on type 'number'.

上例中，`length` 不是 `string` 和 `number` 的共有属性，所以会报错。

访问 `string` 和 `number` 的共有属性是没问题的：

function getString(something: string | number): string {
        
        return something.toString();
    }

联合类型的变量在被赋值的时候，会根据**类型推论**的规则推断出一个类型：

let myFavoriteNumber: string | number;
    myFavoriteNumber = 'seven';
    console.log(myFavoriteNumber.length); // 5，这里推论为字符串，因此有length！
    myFavoriteNumber = 7;
    console.log(myFavoriteNumber.length); // 编译时报错，这里推论为数值，因此报错！
    
    // index.ts(5,30): error TS2339: Property 'length' does not exist on type 'number'.

上例中，第二行的 `myFavoriteNumber` 被推断成了 `string`，访问它的 `length` 属性不会报错。

而第四行的 `myFavoriteNumber` 被推断成了 `number`，访问它的 `length` 属性时就报错了。