3.1 接口基础 - 全栈应用开发修炼手册课程

🎯 学习目标

理解接口的概念和作用
掌握接口的基本语法
学会定义对象类型接口
了解接口的继承和扩展

📚 接口定义

接口（Interface）是 TypeScript 的核心特性之一，用于定义对象的形状（Shape），即对象应该有哪些属性和方法。

// 定义用户接口
interface User {
  id: number;
  name: string;
  email: string;
}

// 使用接口
const user: User = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com'
};

// 类型检查
const invalidUser: User = {
  id: 1,
  name: 'Bob'
  // Error: 缺少 email 属性
};
      

💻 接口特性

可选属性

interface User {
  id: number;
  name: string;
  email: string;
  age?: number;  // 可选属性，使用 ? 标记
  phone?: string;
}

// 可选属性可以不提供
const user1: User = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com'
};

const user2: User = {
  id: 2,
  name: 'Bob',
  email: 'bob@example.com',
  age: 25  // 可选提供
};
      

只读属性

interface User {
  readonly id: number;  // 只读属性，创建后不可修改
  name: string;
}

const user: User = {
  id: 1,
  name: 'Alice'
};

user.id = 2;  // Error: 无法修改只读属性
user.name = 'Bob';  // OK
      

🔧 接口继承

// 基础接口
interface Person {
  name: string;
  age: number;
}

// 继承扩展
interface Employee extends Person {
  employeeId: string;
  department: string;
}

const employee: Employee = {
  name: 'Alice',
  age: 30,
  employeeId: 'E001',
  department: 'Engineering'
};

// 多重继承
interface Serializable {
  serialize(): string;
}

interface Loggable extends Person, Serializable {
  log(): void;
}
      

📊 接口 vs 类型别名

特性	interface	type
语法	interface Name {}	type Name = {}
扩展	extends 继承	& 交叉类型
声明合并	支持	不支持
联合类型	不支持	支持

📝 本节小结

✅

• 接口用于定义对象的形状
• ? 定义可选属性，readonly 定义只读属性
• 接口可以继承扩展
• 对象类型优先使用 interface