📜  ts 向接口添加属性 - TypeScript (1)

📅  最后修改于: 2023-12-03 15:20:40.986000             🧑  作者: Mango

在 TypeScript 中向接口添加属性

在 TypeScript 中,接口是一种用于定义对象结构的强类型约束。有时候,我们需要向接口添加属性以满足业务需求。本文将介绍如何在 TypeScript 中向接口添加属性。

向接口添加可选属性

在 TypeScript 中,接口的属性默认是必须的。但是,我们可以通过在属性名后加上问号 ? 将属性定义为可选的。例如,下面的接口定义了一个可选的 age 属性:

interface Person {
  name: string;
  age?: number;
}

const person1: Person = { name: 'Alice' }; // OK
const person2: Person = { name: 'Bob', age: 30 }; // OK
const person3: Person = { age: 40 }; // Error: Property 'name' is missing
向接口添加只读属性

有时候,我们需要定义一个只读属性,即该属性只能在对象创建时被赋值,之后就不能再被修改。在 TypeScript 中,我们可以使用 readonly 关键字将属性定义为只读。例如,下面的接口定义了一个只读的 id 属性:

interface User {
  readonly id: number;
  name: string;
}

const user1: User = { id: 1, name: 'Alice' };
user1.id = 2; // Error: Cannot assign to 'id' because it is a read-only property
向接口添加任意属性

有些情况下,我们无法事先确定一个接口中的所有属性名,此时可以使用任意属性。在 TypeScript 中,我们可以使用索引签名来定义任意属性。例如,下面的接口定义了一个任意属性:

interface Dictionary {
  [key: string]: string;
}

const dict1: Dictionary = { hello: 'world' }; // OK
const dict2: Dictionary = { hello: 'world', goodbye: 'moon' }; // OK
const dict3: Dictionary = { hello: 'world', 42: 'number' }; // OK, 42 会被转换为字符串 '42'
总结

在 TypeScript 中,我们可以通过添加问号 ?、使用 readonly 关键字和定义任意属性来向接口添加属性。这些功能都可以帮助我们更好地定义对象结构,增强代码的可读性和可维护性。