TypeScript接口（interface）使用指南：定义、属性与函数类型详解

接口的核心定义

TypeScript中的接口主要用于定义对象的形状。虽然type关键字也可用于定义简单数据类型（如 type str = string），但interface专注于描述类类型、函数类型和数组类型等结构。

第1步：创建基础接口与对象校验

目的：定义对象所需的属性及其类型，确保传入的对象符合规范。

• 操作入口：通过 interface 关键字声明。
• 重要参数：属性名后紧跟冒号及类型标识。
• 完成状态：编译器将严格检查对象是否具备所有必需属性且类型匹配。

// 定义一个简单的接口
interface Person {
  name: string;
}

// 定义获取名称的方法
function getPersonName(person: Person): void {
  console.log(person.name);
}

// 定义设置名称的方法
function setPersonName(person: Person, name: string): void {
  person.name = name;
}

// 创建一个符合接口定义的对象
let person = { name: '一碗粥' };
setPersonName(person, '一碗周');
getPersonName(person); // 输出: 一碗周

上述代码中，Person 接口规定对象必须包含类型为 string 的 name 属性。类型检查不关注属性定义的顺序，只要属性存在且类型正确即可。

接口属性的高级控制

第2步：配置可选属性

目的：允许对象在满足基本要求的同时，具备灵活的非必填字段。

• 操作方法：在属性名后添加 ? 符号。
• 注意事项：未在接口中定义的属性（非索引签名扩展）若被访问，会触发编译错误。

interface Person {
  name: string;
  age?: number; // age 变为可选属性
}

let person = {
  name: '一碗周',
  age: 18,
};

// 注意：如果尝试访问未定义的 hobby 属性，即使对象中有该值，TS也会报错
// console.log(person.hobby); // Error: Property 'hobby' does not exist on type 'Person'

第3步：锁定只读属性

目的：防止对象创建后其特定属性被意外修改，保证数据完整性。

• 操作方法：使用 readonly 修饰符。
• 风险提醒：一旦赋值成功，后续任何试图修改该属性的行为均会导致编译失败。

interface Person {
  readonly name: string; // 只读属性
}

let person: Person = { name: '一碗周' };

function setPersonName(person: Person, name: string): void {
  person.name = name; // Cannot assign to 'name' because it is a read-only property.
}

接口的复用与扩展

第4步：实现多接口继承

目的：组合多个接口以构建更复杂的业务对象，提高模块复用率。

• 操作方法：接口使用 extends 关键字，支持逗号分隔多继承。
• 完成状态：新接口自动拥有所有父接口的成员。

// 定义基础接口
interface PersonName {
  name: string;
}
interface PersonAge {
  age: number;
}

// Person 接口继承前两者，并增加新方法
interface Person extends PersonName, PersonAge {
  hobby: string;
  say(): string;
}

let user: Person = {
  name: '一碗周',
  age: 18,
  hobby: 'coding',
  say() {
    return 'Hello';
  }
};

console.log(user.name, user.age, user.hobby);

函数类型接口的应用

接口不仅可以描述对象，还能描述函数的签名（参数列表和返回值类型）。

第5步：定义函数类型接口

目的：标准化函数传参格式和返回结果。

• 操作方法：使用括号 () 包裹参数定义，后跟冒号和返回类型。

// 定义函数签名接口
interface MyAdd {
  (x: number, y: number): number;
}

// 实现该接口
let myAdd: MyAdd = (x: number, y: number): number => {
  return x + y;
};

// 等价于直接使用类型别名定义的函数变量：
// let myAdd: (x: number, y: number) => number = ...

以上就是TypeScript接口（interface）的详细内容，包括对象约束、属性修饰及函数定义，更多关于TypeScript的基础知识资料请关注本站其它相关文章！