TypeScript中的接口介绍

TypeScript 允许我们为它们定义细粒度的类型检查，从而帮助我们与我们的 vales 保持契约。 接口是 TypeScript 中实现这一目标的主要机制。

例如，假设我们有以下代码，其中定义了两个用户：

const user1 = {
  id: 1,
  firstName: 'John',
  lastName: 'Doe',
  proUser: false,
  email: 'john.doe@foobar.com'
}

const user2 = {
  firstName: 'Jane',
  lastName: 'Doe',
  proUser: true,
  email: 'jane.doe@foobar.com'
}

让我们建立一个契约，以便我们的用户对象遵守指定的类型定义：

interface User {
  id: number;
  firstName: string;
  lastName: string;
  proUser: boolean;
  email: string;
}

const user1: User = {
  id: 1,
  firstName: 'John',
  lastName: 'Doe',
  proUser: false,
  email: 'john.doe@foobar.com'
}

const user2: User = {
  id: 2,
  firstName: 'Jane',
  lastName: 'Doe',
  proUser: true,
  email: 'jane.doe@foobar.com'
}

现在，如果我们尝试定义缺少属性、附加属性或类型错误的属性的 User 对象，TypeScript 编译器会抱怨并准确告诉我们用户定义有什么问题。

您可以使用 Elvis 运算符 (?) 在接口中定义可选属性：

interface User {
  id: number;
  firstName: string;
  lastName: string;
  proUser: boolean;
  email: string;
  avatar?: string;
}

const user1: User = {
  id: 1,
  firstName: 'John',
  lastName: 'Doe',
  proUser: false,
  email: 'john.doe@foobar.com'
}

const user2: User = {
  id: 2,
  firstName: 'Jane',
  lastName: 'Doe',
  proUser: true,
  email: 'jane.doe@foobar.com',
  avatar: 'https://something/my-face.jpg'
}

请注意，我们不必为 user1 指定任何头像值，TypeScript 不会抱怨。

您的接口可以在自己的文件中定义，然后使用 ES6 模块 语法导入：

import { User } from '../interfaces/user';

const user1: User = {
  id: 1,
  firstName: 'John',
  lastName: 'Doe',
  proUser: false,
  email: 'john.doe@foobar.com'
}

// ...