首页 › TypeScript › 接口与类型别名 › Interface 详解

基础 Interface

interface User {
  name: string;
  age: number;
  email?: string;           // 可选属性
  readonly id: number;      // 只读属性
}

const user: User = {
  name: '张三',
  age: 28,
  id: 1,
};
// user.id = 2;  // ❌ 只读

索引签名

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

const config: StringMap = {
  host: 'localhost',
  port: 8080,        // 允许
};

函数类型 Interface

interface SearchFn {
  (source: string, subString: string): boolean;
}

const search: SearchFn = (src, sub) => src.includes(sub);

接口合并

interface User {
  name: string;
}
interface User {
  age: number;
}
// 合并后 User = { name: string; age: number; }

Interface vs Type

// 类型别名
type UserType = {
  name: string;
  age: number;
};

// interface 可扩展（extends）、可合并
interface Animal { name: string; }
interface Dog extends Animal { breed: string; }

// type 可用联合、交叉、映射类型
type Status = 'active' | 'inactive';
type Config = { host: string } & { port: number };

// 原则：优先用 interface，需要联合/交叉时用 type

小结

特性	interface	type
扩展	extends	&
合并声明	✅ 同名合并	❌
联合类型	❌	✅
映射类型	❌	✅

上一节：枚举 下一节：Type 与联合/交叉类型

贡献者: 布欧-Lewyon