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。

相关推荐
Zyx2007几秒前
JavaScript 数组:从内存布局到遍历策略的深度解析
javascript
UIUV2 分钟前
Ajax 数据请求学习笔记
前端·javascript·代码规范
FogLetter2 分钟前
手写useInterval:告别闭包陷阱,玩转React定时器!
前端·react.js
神秘的猪头4 分钟前
Vibe Coding 实战教学:用 Trae 协作开发 Chrome 扩展 “Hulk”
前端·人工智能
小时前端4 分钟前
当递归引爆调用栈:你的前端应用还能优雅降落吗?
前端·javascript·面试
盼小辉丶5 分钟前
TensorFlow深度学习实战(43)——TensorFlow.js
javascript·深度学习·tensorflow
张可爱5 分钟前
20251112-问题排查与复盘
前端
ZKshun6 分钟前
WebSocket指南:从原理到生产环境实战
前端·websocket
T___T8 分钟前
从定时器到 Promise:一次 JS 异步编程的进阶之旅
javascript·面试
不说别的就是很菜23 分钟前
【前端面试】Git篇
前端·git