TypeScript接口类型：让代码更清晰可靠的实用技巧

ref="/tag/42/" style="color:#874873;font-weight:bold;">接口不是装饰，是代码的说明书

写前端时间一长，总会遇到这样的问题：别人传过来一个对象，你得猜它有哪些字段；自己写的函数，过两周再看，还得重新推敲参数结构。TypeScript 的接口类型（interface）就是来解决这类“沟通成本”的。

比如你在写一个用户信息展示组件，后端返回的数据结构应该是固定的。这时候用 interface 定义一下，谁用都清楚。

interface User {
  id: number;
  name: string;
  email?: string; // 可选属性
  isActive: boolean;
}

function renderUserInfo(user: User) {
  console.log(`用户名：${user.name}，状态：${user.isActive ? '在线' : '离线'}`);
}

一旦传进来的对象不符合 User 的结构，编辑器立马标红提醒，不用等到运行时才发现报错。

接口可以继承，别重复造轮子

现实中，管理员也是用户，只是多几个权限字段。这时候用 extends 让接口继承，逻辑就顺了。

interface Admin extends User {
  role: string;
  permissions: string[];
}

const admin: Admin = {
  id: 1001,
  name: '张伟',
  isActive: true,
  role: 'super',
  permissions: ['edit', 'delete', 'audit']
};

这样既复用了 User 的结构，又清晰表达了层级关系，维护起来也省心。

接口还能描述函数类型

除了对象结构，接口也能规定一个函数该怎么用。比如你要统一处理表单校验，每个校验函数都应接收字符串、返回布尔值。

interface Validator {
  (input: string): boolean;
}

const emailValidator: Validator = (email) => {
  return /^[^@]+@[^@]+\.[^@]+$/.test(email);
};

emailValidator('test@example.com'); // true

这种写法在封装工具库时特别有用，调用者一眼就知道函数的输入输出规范。

实际开发中的小窍门

项目大了以后，接口文件容易杂乱。建议按模块拆分，比如 user.interface.ts、form.interface.ts，别全堆在一个地方。

另外，接口支持合并。同名 interface 会自动合并成员，适合在扩展第三方库类型时使用。

interface Window {
  myAppVersion: string;
}

// 在别的文件里也可以扩展
interface Window {
  debugMode: boolean;
}

// 最终 Window 拥有 both myAppVersion 和 debugMode

这招在加全局变量或调试功能时很实用，不用动原始定义。

接口不是 TypeScript 的高级玩法，而是日常写代码的“基本功”。用好了，团队协作顺畅，自己回看代码也省力。