TypeScript中的接口(Interface):定义对象结构的强类型方式

server/2024/11/28 10:19:44/

在TypeScript中,接口(Interface)是一种强大的方式,用于定义对象的结构,它确保一个对象只有特定的、预定义的结构。接口不仅可以用来定义对象的形状,还可以用于类、函数和数组等复杂的数据结构。本文将详细介绍TypeScript中的接口,包括它们的基本概念、如何定义和使用,以及一些高级用法。

接口的基本概念

接口在TypeScript中是一种强大的类型定义工具,它允许你定义对象应该具有的结构。接口由一组属性和方法签名组成,这些属性和方法必须在实现接口的类中具体实现。

定义一个简单的接口

typescript">interface Tips {label: string;color?: string;[propName: string]: string | number;
}

在这个例子中,Tips接口定义了一个对象,该对象必须有一个label属性(类型为string),一个可选的color属性(类型为string),以及一个索引签名,允许对象有任意数量的额外属性,这些属性的键是string类型,值是stringnumber类型。

使用接口

接口定义了对象的结构,但不限制对象的实际值。你可以创建符合接口定义的任何对象。

typescript">function descLog(t: Tips) {console.log(t.label);
}var circle: Tips = {label: "圆形"
}
descLog(circle); // 输出: 圆形var rectangle: Tips = {label: "矩形",width: 10,height: 20
}
descLog(rectangle); // 输出: 矩形

在这个例子中,我们定义了一个函数descLog,它接受一个Tips接口类型的参数。我们创建了两个对象circlerectangle,它们都符合Tips接口的定义,并传递给descLog函数。

索引签名

接口可以使用索引签名来定义对象的键值对数组或字典。

typescript">interface JArray {[index: number]: string;
}interface JDictonary {[key: string]: string;
}let arr: JArray = ["a", "b", "c"];
let map: JDictonary = {"key1": "value1","key2": "value2"
};console.log(arr); // 输出: [ 'a', 'b', 'c' ]
console.log(map); // 输出: { key1: 'value1', key2: 'value2' }

在这个例子中,JArray接口定义了一个数组,其中的元素都是string类型。JDictonary接口定义了一个字典,其中的键是string类型,值也是string类型。

接口的继承

接口可以通过扩展其他接口来继承属性。

typescript">interface Shape {color: string;
}interface Square extends Shape {sideLength: number;
}var square = <Square>{color: "blue",sideLength: 10
};

在这个例子中,Square接口继承了Shape接口的color属性,并添加了一个新的sideLength属性。

接口与类型别名

虽然接口和类型别名(Type Alias)都可以用来定义对象的结构,但它们有一些关键的区别。接口是可扩展的,并且可以被实现,而类型别名则不能。

typescript">interface IPerson {name: string;age: number;
}type Person = {name: string;age: number;
}// 接口可以被扩展
interface IPerson {gender: string;
}// 类可以实现接口
class User implements IPerson {name: string;age: number;gender: string;
}// 接口可以被合并
interface IPerson {address: string;
}// 类型别名不能被扩展或合并
type Person = {name: string;age: number;
};

结论

TypeScript中的接口是定义对象结构的强大工具,它们提供了一种方式来确保你的代码使用的是正确的对象形状。通过使用接口,你可以提高代码的可维护性和可读性,同时利用TypeScript的类型系统来避免运行时错误。无论是定义简单的对象结构,还是复杂的数据结构,接口都是TypeScript中不可或缺的一部分。


http://www.ppmy.cn/server/145599.html

相关文章

【pyspark学习从入门到精通22】机器学习库_5

训练-验证分割 TrainValidationSplit 模型为了选择最佳模型&#xff0c;会对输入数据集&#xff08;训练数据集&#xff09;进行随机分割&#xff0c;分成两个子集&#xff1a;较小的训练子集和验证子集。分割只执行一次。 在这个例子中&#xff0c;我们还将使用 ChiSqSelect…

创建一个简单的 Nuxt.js 应用

记录一下自己创建一个使用 Vue 3 的 Nuxt.js 应用的过程。该应用包含两个子页面&#xff0c;相对简单。最大的坑是创建项目时用了如下的命令&#xff1a; npx create-nuxt-app pic-first-nuxt结果如论如何都创建不出来&#xff0c;要不就卡住&#xff0c;要不就报错&#xff1…

BERT的配置

BERT的配置 BERT-base&#xff1a; BERT-base由12层编码器叠加而成。每层编码器都使用12个注意力头&#xff0c;其中前馈网络层由768个隐藏神经元组成&#xff0c;所以从BERT-base得到的特征向量的大小是768。 我们使用以下符号来表示上述内容。 ● 编码器的层数用L表示。 …

InstructGPT——AI 模型的对齐革命

InstructGPT——AI 模型的对齐革命 近年来&#xff0c;人工智能领域中大型语言模型的发展速度令人瞩目。其中&#xff0c;OpenAI 发布的 InstructGPT 是一次重要的技术革新&#xff0c;它通过引入人类反馈强化学习&#xff08;Reinforcement Learning with Human Feedback, RL…

17. 【.NET 8 实战--孢子记账--从单体到微服务】--记账模块--主币种设置

记账模块是我们项目的核心模块&#xff0c;也是用户使用最多的模块&#xff0c;因此这个模块的东西比较多&#xff0c;我们要分为多个部分编写代码。 一、需求 币种设置的需求涉及到了我们前面编写的代码&#xff0c;我们来具体看一下需求。 编号需求说明1主币种设置1. 用户…

git源码安装

源码安装。执行以下步骤&#xff1a; 使用"wget"命令下载Git源码包&#xff0c;例如&#xff1a;"wget https://www.kernel.org/pub/software/scm/git/git-2.0.5.tar.gz"。 使用"tar"命令解压缩下载的源码包&#xff0c;例如&#xff1a;"…

C语言编码规范

以下是一套较为完整的C语言编码规范&#xff1a; 一、代码布局 缩进 使用空格进行缩进&#xff0c;每级缩进为4个空格。这样可以保证代码在不同的编辑器和环境中都有一致的缩进效果。例如&#xff1a; if (condition) {// 这里缩进了4个空格statement1;statement2; }大括号 函…

快速理解微服务中Fegin的概念

一.由来 1.在传统的架构里面&#xff0c;我们是通过使用RestTemplate来访问其他的服务&#xff0c;但是这种方式就存在了一个很大的缺陷&#xff0c;也就是被调用方如果发生了服务的迁移(IP和端口发生了变化)&#xff0c;那么调用方也需要同步的在代码里面进行修改&#xff0c;…