Frontend Academy · 课时

接口与对象类型

使用 interface 和 type 描述对象结构，扩展接口，使用 ? 声明可选属性，并使用 readonly 实现不可变性。

接口与对象类型 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

接口与类型的区别

interface 和 type 都可以描述对象结构。关键区别在于：接口可以合并（声明合并），通常更适合定义公共 API 结构。类型别名在复杂类型方面更加灵活。

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

// type alias (equivalent for objects):
type User = {
  id: number;
  name: string;
};

定义接口

请使用 interface 定义对象结构。默认情况下，所有属性都是必需的。请使用分号分隔属性。

interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
  inStock: boolean;
  category: string;
}

可选属性和只读属性

请使用 ? 将属性标记为可选。使用 readonly 防止修改。只读属性会在编译时强制执行不可变性。

interface Config {
  host: string;
  port?: number;          // optional: number | undefined
  readonly apiKey: string; // can't change after assignment
}

const config: Config = { host: 'localhost', apiKey: 'abc' };
config.port = 8080;       // OK
config.apiKey = 'new';    // Error: readonly

扩展接口

请使用 extends 创建新接口，使其包含另一个接口的全部属性。TypeScript 支持多重继承。

interface Animal {
  name: string;
  sound(): string;
}

interface Dog extends Animal {
  breed: string;
  fetch(): void;
}

interface ServiceDog extends Dog {
  task: string;
}

索引签名——动态键

如果您事先不知道属性名，但知道属性值的类型，请使用索引签名。

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

const headers: StringMap = {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer token123'
};

// Also for translating:
interface Translations {
  [locale: string]: { [key: string]: string };
}

接口中的函数类型

请在接口中定义方法签名——简写语法和完整属性语法都可以使用。

interface Logger {
  log(message: string): void;
  warn(message: string): void;
  error(message: string, err?: Error): void;
}

// Also valid:
interface Logger2 {
  log: (message: string) => void;
}

在类中实现接口

一个类可以 implement 一个或多个接口。TypeScript 会验证该类是否提供了所有必需成员。

interface Serialisable {
  serialise(): string;
  deserialise(data: string): this;
}

class User implements Serialisable {
  constructor(public name: string) {}
  serialise() { return JSON.stringify({ name: this.name }); }
  deserialise(data: string) {
    const obj = JSON.parse(data);
    return new User(obj.name) as this;
  }
}

声明合并

多个同名的 interface 声明会合并为一个接口。这对于扩展第三方类型很有用。类型别名不支持此功能。

interface Window {
  myPlugin: { version: string };
}
// Now window.myPlugin is typed everywhere

嵌套对象类型

接口属性本身也可以具有对象类型，既可以内联定义，也可以引用另一个接口。

interface Order {
  id: string;
  customer: {
    name: string;
    email: string;
  };
  items: Array<{
    productId: string;
    quantity: number;
    price: number;
  }>;
  total: number;
}

结构化类型——鸭子类型

TypeScript 使用结构化类型：如果某个值至少具有类型要求的属性，就满足该类型。无需显式声明实现。任何结构正确的对象都具有兼容性。

interface Named {
  name: string;
}

function greet(obj: Named) {
  console.log(`Hello, ${obj.name}!`);
}

// No 'implements Named' needed:
greet({ name: 'Alice', age: 30 }); // OK — has the name property

使用接口定义可辨识联合类型

请添加字面量类型的判别属性，以区分联合类型中的不同变体。TypeScript 会根据该判别属性，在 switch/if 中缩小类型范围。

interface Circle { kind: 'circle'; radius: number; }
interface Square { kind: 'square'; side: number; }
type Shape = Circle | Square;

function area(shape: Shape): number {
  switch (shape.kind) {
    case 'circle': return Math.PI * shape.radius ** 2;
    case 'square': return shape.side ** 2;
  }
}

快速检查

TypeScript 中 interface 和 type 的关键区别是什么？

回顾：接口

interface 用于描述对象结构，并支持必需、可选和只读属性。使用 extends 扩展接口。使用索引签名表示动态键。类可以实现接口。声明合并是接口独有的功能。TypeScript 使用结构化类型——重要的是结构，而不是显式声明。

常见问题解答

「接口与对象类型」课时是免费的吗？

是的 — 「接口与对象类型」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「接口与对象类型」这节课中我会学到什么？

使用 interface 和 type 描述对象结构，扩展接口，使用 ? 声明可选属性，并使用 readonly 实现不可变性。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「接口与对象类型」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy