当前位置：首页 > news >正文

TypeScript笔记（三）

news 2025/11/8 21:31:42

前言

上一篇文章我们主要介绍了TypeScript的基本类型boolean、number、string、void、null和undefine，还介绍了任意类型any和联合类型，这篇文章我们将会了解对象类型Interface和数组的相关知识。

对象的类型——接口

在TypeScript中，我们使用接口Interface来定义对象的类型。

什么是接口

在面向对象的语言中，接口是一个非常重要的概念，它是对于行为的抽象，具体的行为是需要由类去实现的。在TypeScript中接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象外，也可以用于对对象的形状进行描述，这里的形状就可以理解为对象的属性。

一个简单的例子如下：

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

在上面的例子中，我们定义来一个接口Person，接着定义了一个变量tom，它的类型是Person，这样就约束了tom的属性必须和接口一致，如果少了或者多了属性都会报错。

interface Person {name: string;age: number;
}let tom: Person = {name: "Tom"
}

其会报错如下

demo.ts:6:5 - error TS2741: Property 'age' is missing in type '{ name: string; }' but required in type 'Person'.

按照规范接口的首字母需要大写，在一些编程语言中会建议在接口名称前加上I的前缀。

可选属性

在其他语言中如果我们需要两个属性内容差不多的两个类型可能必须定义两个不同接口，但是两个类型的内容很类似会重复定义，在TypeScript中通过可选属性可以避免一些重复定义。

interface Person {name: string;age?: number;
}let tom: Person = {name: "Tom"
}let jerry: Person = {name: "Jerry",age: 24
}

从上述例子可以看出可以通过?来设置可选属性，如果一个属性设置为可选属性，那么该属性可以存在也可以不存在。通过可选属性可以设置属性存不存在，但是还是不能添加属性，否则回报错：

interface Person {name: string;age: number;
}let jerry: Person = {name: "Jerry",age: 24,gender: "male"
}

报错如下

Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

任意属性

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

interface Person {name: string;age?: number;[propName: string]: any
}let jerry: Person = {name: "Jerry",gender: "male"
}

上述例子中[propName: string]定义了任意属性取string类型的值，其中需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：

interface Person {name: string;age?: number;[propName: string]: string
}let jerry: Person = {name: "Jerry",gender: "male"
}

上述任意属性是string，但是age的属性是number则会报错。

 Property 'age' of type 'number' is not assignable to 'string' index type 'string'.

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

nterface Person {name: string;age?: number;[propName: string]: string | number
}let jerry: Person = {name: "Jerry",age: 25,gender: "male"
}

只读属性

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

interface Person {readonly id: number;name: string;age?: number;[propName: string]: string | number
}let jerry: Person = {id: 9527,name: "Jerry",age: 25,gender: "male"
}jerry.id = 213

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

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

数组

在TypeScript中，数组类型有很多定义方式，非常灵活。

类型+方括号表示法

最简单的就是使用类型加方括号来表示数组

let numberArray: number[] = [1, 1, 2, 3]

在这种声明方式中不允许出现其他的类型

数组泛型

我们也可以使用数组泛型来表示数组：

let numberArray: Array<number> = [1, 2, 3, 4, 5]

用接口表示数组

interface Number {[index: number]: number;
}

NumberArray 表示：只要索引的类型是数字时，那么值的类型必须是数字。虽然接口也可以用来描述数组，但是我们一般不会这么做，因为这种方式比前两种方式复杂多了。

类数组

类数组不是数组类型，比如arguments

function sum() {let args: number[] = arguments
}

以上回报错如下

Type 'IArguments' is missing the following properties from type 'number[]': pop, push, concat, join, and 15 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;
}

any在数组中的使用

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

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

最后

这篇文章主要介绍了接口和数组的相关内容，更多文章可以关注公众号QStack。

前言