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。

相关推荐
H178535090965 分钟前
SolidWorks_基于草图的实体特征14_扫描扭转与控制
前端·人工智能·算法·3d建模·solidworks
万岳科技系统开发5 分钟前
骑手配送系统如何支持外卖与跑腿一体化运营
大数据·前端·小程序
meilindehuzi_a8 分钟前
深入理解JavaScript线性数据结构:从内存视角探究数组、链表、栈与队列
javascript·数据结构·链表
雨季mo浅忆15 分钟前
Cursor快速实现上传Excel功能
前端·vue3·ai编程
韩曙亮20 分钟前
【Flutter】Flutter 编译 Web 网站 ① ( Tomcat 部署 Web 网站 )
前端·flutter·tomcat·web
古怪今人22 分钟前
手工搭建PC端:pnpm + Vite + Vue3 + Element Plus + Electron
前端·vue.js·electron
Anastasiozzzz24 分钟前
构建健壮软件系统的基石:深入解析面向对象设计七大原则
开发语言·javascript·设计模式·ecmascript
共创splendid--与您携手1 小时前
AI读取前端项目生成skill.md
前端·人工智能·ai
San813_LDD3 小时前
[C语言]《Dev-C++ 报错解决手册(Day0607 精华版)》
java·前端·javascript