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。

相关推荐
0***R51510 小时前
前端云原生
前端·云原生
月弦笙音10 小时前
【Promise.withResolvers】发现这个api还挺有用
前端·javascript·typescript
疯狂踩坑人10 小时前
MCP理论和实战,然后做个MCP脚手架吧
前端·node.js·mcp
中杯可乐多加冰10 小时前
基于 DeepSeek + MateChat 的证券智能投顾技术实践:打造金融领域的专属大Q模型助手
前端·人工智能
凡人程序员10 小时前
搭建简易版monorepo + turborepo
前端·javascript
丸子哥哥10 小时前
同一个域名,如何添加多个网站?
服务器·前端·nginx·微服务
不努力也不会混10 小时前
vite联邦实现微前端(vite-plugin-federation)
前端·vue.js
伍亿伍千万10 小时前
Uptime Kuma修改作为内嵌页面的自适应
前端
Heo10 小时前
原来Webpack在大厂中这样进行性能优化!
前端·javascript·vue.js
涔溪10 小时前
Vue2 项目中通过封装 axios 来同时连接两个不同的后端服务器
前端·vue.js·axios