【TypeScript】005-对象的类型——接口与数组的类型

- 日理万妓 2023-10-03 11:31 21阅读 0赞

### 文章目录 ###

*   *  5、对象的类型——接口
     *   *  什么是接口
         *  简单的例子
         *  可选属性
         *  任意属性
         *  只读属性
     *  6、数组的类型
     *   *  「类型 + 方括号」表示法
         *  数组泛型
         *  用接口表示数组
         *  类数组
         *  any 在数组中的应用

## 5、对象的类型——接口 ##

> 在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。

### 什么是接口 ###

在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。

TypeScript 中的接口是一个非常灵活的概念，除了可用于[对类的一部分行为进行抽象][Link 1]以外，也常用于对\*\*「对象的形状（Shape）」\*\*进行描述。

### 简单的例子 ###

interface Person {
        
        name: string;
        age: number;
    }
    
    let tom: Person = {
        
        name: 'Tom',
        age: 25
    };

上面的例子中，我们定义了一个接口 `Person`，接着定义了一个变量 `tom`，它的类型是 `Person`。这样，我们就约束了 `tom` 的形状必须和接口 `Person` 一致。

> 形状？结构或者模型、模板是不是更合适呢？！

接口一般首字母大写。有的编程语言中会建议接口的名称加上 `I` 前缀。

> 这就相当于限定了对象的内容！要求必须有哪些内容，那么在调用的时候知道其实现的接口，就知道它有什么内容了！

定义的变量比接口少了一些属性是不允许的：

interface Person {
        
        name: string;
        age: number;
    }
    
    let tom: Person = {
        
        name: 'Tom'
    };
    
    // index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'.
    //   Property 'age' is missing in type '{ name: string; }'.

多一些属性也是不允许的：

interface Person {
        
        name: string;
        age: number;
    }
    
    let tom: Person = {
        
        name: 'Tom',
        age: 25,
        gender: 'male'
    };
    
    // index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
    //   Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

可见，**赋值的时候，变量的形状必须和接口的形状保持一致**。

### 可选属性 ###

有时我们希望不要完全匹配一个形状（模板），那么可以用可选属性：

> 这么就看起来没那么死板了！

// 可无
    interface Person {
        
        name: string;
        age?: number;
    }
    
    let tom: Person = {
        
        name: 'Tom'
    };
    
    // 也可有
    interface Person {
        
        name: string;
        age?: number;
    }
    
    let tom: Person = {
        
        name: 'Tom',
        age: 25
    };

可选属性的含义是该属性可以不存在。

这时**仍然不允许添加未定义的属性**：

interface Person {
        
        name: string;
        age?: number;
    }
    
    let tom: Person = {
        
        name: 'Tom',
        age: 25,
        gender: 'male'
    };
    
    // examples/playground/index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
    //   Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

### 任意属性 ###

有时候我们希望一个接口允许有任意的属性，可以使用如下方式：

> 这么写是正确的，因为类型为any，string和number是其子集！

interface Person {
        
        name: string;
        age?: number;
        [propName: string]: any;
    }
    
    let tom: Person = {
        
        name: 'Tom',
        gender: 'male'
    };

使用 `[propName: string]` 定义了任意属性取 `string` 类型的值。

需要注意的是，**一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集**：

> 这么写就不对了，number不是string的子集！

interface Person {
        
        name: string;
        age?: number;
        [propName: string]: string;
    }
    
    let tom: Person = {
        
        name: 'Tom',
        age: 25,
        gender: 'male'
    };
    
    // index.ts(3,5): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'.
    // index.ts(7,5): error TS2322: Type '{ [x: string]: string | number; name: string; age: number; gender: string; }' is not assignable to type 'Person'.
    // Index signatures are incompatible.
    // Type 'string | number' is not assignable to type 'string'.
    // Type 'number' is not assignable to type 'string'.

上例中，任意属性的值允许是 `string`，但是可选属性 `age` 的值却是 `number`，`number` 不是 `string` 的子属性，所以报错了。

另外，在报错信息中可以看出，此时 `{ name: 'Tom', age: 25, gender: 'male' }` 的类型被推断成了 `{ [x: string]: string | number; name: string; age: number; gender: string; }`，这是联合类型和接口的结合。

一个接口中只能定义一个任意属性。如果接口中有多个类型的属性，则可以在任意属性中使用联合类型：

interface Person {
        
        name: string;
        age?: number;
        [propName: string]: string | number;
    }
    
    let tom: Person = {
        
        name: 'Tom',
        age: 25,
        gender: 'male'
    };

### 只读属性 ###

有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用 `readonly` 定义只读属性：

interface Person {
        
        readonly id: number;
        name: string;
        age?: number;
        [propName: string]: any;
    }
    
    let tom: Person = {
        
        id: 89757,
        name: 'Tom',
        gender: 'male'
    };
    
    tom.id = 9527;
    
    // index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

上例中，使用 `readonly` 定义的属性 `id` 初始化后，又被赋值了，所以报错了。

**注意，只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候**：

interface Person {
        
        readonly id: number;
        name: string;
        age?: number;
        [propName: string]: any;
    }
    
    let tom: Person = {
        
        name: 'Tom',
        gender: 'male'
    };
    
    tom.id = 89757;
    
    // index.ts(8,5): error TS2322: Type '{ name: string; gender: string; }' is not assignable to type 'Person'.
    //   Property 'id' is missing in type '{ name: string; gender: string; }'.
    // index.ts(13,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

上例中，报错信息有两处：第一处是在对 `tom` 进行赋值的时候，没有给 `id` 赋值；第二处是在给 `tom.id` 赋值的时候，由于它是只读属性，所以报错了。

## 6、数组的类型 ##

> 在 TypeScript 中，数组类型有多种定义方式，比较灵活。

### 「类型 + 方括号」表示法 ###

最简单的方法是使用「类型 + 方括号」来表示数组：

let fibonacci: number[] = [1, 1, 2, 3, 5];

数组的项中**不允许**出现其他的类型：

let fibonacci: number[] = [1, '1', 2, 3, 5];
    
    // Type 'string' is not assignable to type 'number'.

数组的一些方法的参数也会根据数组在定义时约定的类型进行限制：

let fibonacci: number[] = [1, 1, 2, 3, 5];
    fibonacci.push('8');
    
    // Argument of type '"8"' is not assignable to parameter of type 'number'.

上例中，`push` 方法只允许传入 `number` 类型的参数，但是却传了一个 `"8"` 类型的参数，所以报错了。这里 `"8"` 是一个字符串字面量类型，会在后续章节中详细介绍。

### 数组泛型 ###

我们也可以使用数组泛型（Array Generic） `Array<elemType>` 来表示数组：

let fibonacci: Array<number> = [1, 1, 2, 3, 5];

关于泛型，可以参考[泛型][Link 2]一章。

### 用接口表示数组 ###

> 一般不这么做！

接口也可以用来描述数组：

interface NumberArray {
        
        [index: number]: number;
    }
    let fibonacci: NumberArray = [1, 1, 2, 3, 5];

`NumberArray` 表示：**只要索引的类型是数字时，那么值的类型必须是数字。**

虽然接口也可以用来描述数组，但是我们一般不会这么做，因为这种方式比前两种方式复杂多了。

不过有一种情况例外，那就是它常用来表示**类数组**。

### 类数组 ###

类数组（Array-like Object）不是数组类型，比如 `arguments`：

function sum() {
        
        let args: number[] = arguments;
    }
    
    // Type 'IArguments' is missing the following properties from type 'number[]': pop, push, concat, join, and 24 more.

上例中，`arguments` 实际上是一个类数组，不能用普通的数组的方式来描述，而应该用接口：

function sum() {
        
        let args: {
        
            [index: number]: number;
            length: number;
            callee: Function;
        } = arguments;
    }

在这个例子中，我们除了约束当索引的类型是数字时，值的类型必须是数字之外，也约束了它还有 `length` 和 `callee` 两个属性。

事实上常用的类数组都有自己的接口定义，如 `IArguments`, `NodeList`, `HTMLCollection` 等：

function sum() {
        
        let args: IArguments = arguments;
    }

其中 `IArguments` 是 TypeScript 中定义好了的类型，它实际上就是：

interface IArguments {
        
        [index: number]: any;
        length: number;
        callee: Function;
    }

关于内置对象，可以参考[内置对象][Link 3]一章。

### any 在数组中的应用 ###

一个比较常见的做法是，用 `any` 表示数组中允许出现任意类型：

let list: any[] = ['xcatliu', 25, {
         website: 'http://xcatliu.com' }];

[Link 1]: http://ts.xcatliu.com/advanced/class-and-interfaces.html#%E7%B1%BB%E5%AE%9E%E7%8E%B0%E6%8E%A5%E5%8F%A3
[Link 2]: http://ts.xcatliu.com/advanced/generics.html
[Link 3]: http://ts.xcatliu.com/basics/built-in-objects.html