TypeScript 新的接口实例

在 TypeScript 中，接口是一种能够描述对象形状的语法结构，从而可以为函数和类定义契约。在最新的 TypeScript 版本中，新增了一些接口相关的语法，让我们来看一下。

可选属性

在旧版本的 TypeScript 中，如果想要定义一个对象中的某些属性是可选的，通常需要使用联合类型来实现。而新版本的 TypeScript 则提供了一种更便捷的方式：可选属性。

下面是一个使用可选属性的示例代码：

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

function printPerson(person: Person) {
  console.log(`name: ${person.name}`);
  if (person.age !== undefined) {
    console.log(`age: ${person.age}`);
  }
}

printPerson({ name: 'Tom' });
printPerson({ name: 'Jerry', age: 10 });

在这个示例代码中，我们定义了一个 Person 接口，其中的 age 属性是可选的。在调用 printPerson 函数时，我们可以只传递 name 属性，也可以同时传递 age 属性。

只读属性

在 TypeScript 中，如果要定义一个只读属性，通常需要使用 readonly 关键字。而在新版本的 TypeScript 中，我们可以在接口中直接使用 readonly 修饰符来创建只读属性。

下面是一个使用只读属性的示例代码：

interface Point {
  readonly x: number;
  readonly y: number;
}

function printPoint(point: Point) {
  console.log(`x: ${point.x}`);
  console.log(`y: ${point.y}`);
}

const point: Point = { x: 1, y: 2 };
printPoint(point);

在这个示例代码中，我们定义了一个 Point 接口，并使用 readonly 修饰符来定义了一个只读的 x 属性和一个只读的 y 属性。在调用 printPoint 函数时，我们传递了一个拥有 x 和 y 属性的对象，并打印出了这两个属性的值。

索引签名

在 TypeScript 中，我们可以使用索引类型来访问对象中的任意属性。在最新的 TypeScript 版本中，我们可以在接口中使用索引签名来定义访问对象中未知属性的类型约束。

下面是一个使用索引签名的示例代码：

interface Dictionary<T> {
  [key: string]: T;
}

const dictionary: Dictionary<number> = {
  'a': 1,
  'b': 2,
  'c': 3,
};

console.log(dictionary['a']);
console.log(dictionary['b']);
console.log(dictionary['c']);

在这个示例代码中，我们定义了一个 Dictionary 接口，并使用索引签名来定义了访问对象中任意属性的类型约束。在定义 dictionary 对象时，我们传递了一个具有 a、b、c 三个属性的对象，并通过索引类型访问了这三个属性的值。

总结

在最新的 TypeScript 版本中，新增的接口语法让我们更加方便地定义对象类型约束，包括可选属性、只读属性和索引签名。这些新的语法可以帮助我们更加轻松地编写类型安全的代码，值得我们去学习和掌握。