TypeScript 基础指南：索引访问操作符 [ ]

在 TypeScript 中,索引访问操作符 [] 可以用于访问对象或数组的属性或元素。它的基本语法如下:

ObjectType[KeyType]

在这个语法中:

•

ObjectType 是一个对象类型。

•

KeyType 是一个字符串、数字或符号类型,表示对象的属性名或数组的索引。

让我们看一些具体的例子:

// 对象示例
interface Person {
  name: string;
  age: number;
}

let person: Person = { name: 'John', age: 30 };
console.log(person['name']); // 输出: 'John'
console.log(person['age']); // 输出: 30

// 数组示例
let numbers: number[] = [1, 2, 3, 4, 5];
console.log(numbers[2]); // 输出: 3

在这个例子中:

我们定义了一个 Person 接口,它有 name 和 age 两个属性。

我们创建了一个 Person 类型的对象 person，并使用索引访问操作符访问了它的 name 和 age 属性。

我们定义了一个 number 类型的数组 numbers，并使用索引访问操作符访问了它的第三个元素。

索引访问操作符的主要用途包括:

•

动态属性访问

可以使用变量或表达式作为属性名,动态地访问对象的属性。

•

类型安全的访问

当 KeyType 是一个字面量类型时,TypeScript 可以提供类型检查和自动完成功能。

•

数组元素访问

可以使用索引访问数组中的元素。

•

工具类型结合

可以与其他 TypeScript 工具类型（如 keyof、Record 等）结合使用,创建出更复杂的类型。

下面是一个更复杂的示例,演示了索引访问操作符与其他 TypeScript 特性的结合使用:

interface Person {
  name: string;
  age: number;
  address: {
    street: string;
    city: string;
    country: string;
  };
}

type PersonKey = keyof Person;
type AddressKey = keyof Person['address'];

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

let person: Person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    country: 'USA'
  }
};

console.log(getProperty(person, 'name')); // 输出: 'John'
console.log(getProperty(person, 'address')['city']); // 输出: 'Anytown'

在这个例子中:

我们定义了一个 Person 接口,它包含 name、age 和嵌套的 address 对象。

我们使用 keyof 操作符获取了 Person 和 Person['address'] 的键类型。

我们定义了一个 getProperty 泛型函数,它接受一个对象和一个键,并返回对应属性的值。

我们创建了一个 Person 类型的对象 person，并使用 getProperty 函数访问了它的 name 属性和 address 对象的 city 属性。

在这个示例中,我们展示了如何使用索引访问操作符结合 keyof 和泛型,编写出更加类型安全和灵活的代码。总之,索引访问操作符是 TypeScript 中一个非常强大的特性,它可以帮助开发者更好地利用 TypeScript 的类型系统,提高代码的可维护性和可靠性。

TypeScript 基础指南