TypeScript中的接口是什么?如何定义和使用接口?

在 TypeScript 中,接口(Interface)用于定义对象的结构和类型。接口描述了对象应该具有的属性、方法和类型约束,它们提供了一种结构化的方式来定义和使用数据。

接口的定义使用 interface 关键字,可以包含属性、方法、索引签名等。以下是一个简单的接口定义示例:

typescript 复制代码
interface Person {
  name: string;
  age: number;
  sayHello: () => void;
}

在上面的示例中,我们定义了一个名为 Person 的接口,它要求具有 name 属性(字符串类型)、age 属性(数字类型)和 sayHello 方法(没有参数和返回值)。

接口的使用主要有两种方式:对象实现接口变量类型注解

  1. 对象实现接口:

通过实现接口,我们可以确保对象的结构符合接口的要求。示例如下:

typescript 复制代码
interface Person {
  name: string;
  age: number;
  sayHello: () => void;
}

const person: Person = {
  name: "John",
  age: 25,
  sayHello: () => {
    console.log("Hello!");
  },
};
}

在上面的示例中,我们创建了一个 person 对象,并确保它符合 Person 接口的结构要求。

  1. 变量类型注解:

我们可以使用接口作为变量的类型注解,来限制变量的类型。示例如下:

typescript 复制代码
interface Person {
  name: string;
  age: number;
  sayHello: () => void;
}

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

const john = {
  name: "John",
  age: 25,
  sayHello: () => {
    console.log("Hello!");
  },
};

greet(john);

在上面的示例中,我们定义了一个 greet 函数,它接受一个参数 person,类型为 Person 接口。在调用 greet 函数时,传入符合 Person 接口要求的对象 john。

相关推荐
克里斯蒂亚诺更新14 小时前
微信小程序 点击某个marker改变其大小
开发语言·前端·javascript
天才奇男子14 小时前
从零开始搭建Linux Web服务器
linux·服务器·前端
长空任鸟飞_阿康15 小时前
AI 多模态全栈应用项目描述
前端·vue.js·人工智能·node.js·语音识别
Mintopia15 小时前
🌐 实时协同 AIGC:多人在线 Web 创作的技术架构设计
前端·人工智能·trae
Mintopia15 小时前
🔥 “Solo Coding”的近期热度解析(截至 2025 年末)
前端·人工智能·trae
顾安r15 小时前
11.14 脚本网页 迷宫逃离
服务器·javascript·游戏·flask·html
顾安r16 小时前
11.14 脚本网页游戏 猜黑红
前端·javascript·游戏·flask·html
码码哈哈0.016 小时前
Vue 3 + Vite 集成 Spring Boot 完整部署指南 - 前后端一体化打包方案
前端·vue.js·spring boot
@菜菜_达16 小时前
interact.js 前端拖拽插件
开发语言·前端·javascript
Baklib梅梅16 小时前
故事叙述的力量:用Baklib创作让内容更具温度与共鸣
前端·ruby on rails·前端框架·ruby