TypeScript之索引签名

news2025/1/12 15:42:47

1. 索引签名

在 TypeScript 中,索引签名是一种定义对象类型的方式,它允许我们使用字符串或数字作为索引来访问对象的属性。

索引签名最主要的作用就是允许我们动态地添加或访问对象的属性,通过使用索引签名,我们可以在编译时无法确定具体属性名称的情况下,仍然能够安全地操作对象的属性

2. 定义索引签名

索引签名通过以下语法进行定义:

数字索引签名

{
	[index: string]: type
}

字符串索引签名

{
	[index: number]: type
}

index表示索引的名称,字符串索引签名的index就类似对象的键,数字索引签名index就类似数组的索引下标,当然index的类型也可以定义为any

type表示索引对应的值的类型,可以是any | number | string | symbol

3. 索引签名的使用

下面我们通过实例来体会索引签名的使用:

字符串索引签名

interface MyString {
    [index: string]: string
}

const str: MyString = {}
console.log(str);  // {}
// 使用索引签名的方式添加对象属性
str['name'] = 'zhangsan'
// 使用索引签名的方式访问对象属性
console.log(str['name']);  // zhangsan

数字索引签名

interface MyNumber {
    [index: number]: string
}

const num: MyNumber = {}
console.log(num);  // {}
num[0] = 'zhangsan'
console.log(num[0]);  // zhangsan

值得注意的是,接口往往会约束对象变量所定义时的属性,而当使用索引签名并且接口内只定义了使用索引签名的属性时,使用此接口的对象变量可以定义为空,如上代码所示

4. 注意事项

当类型不匹配时,会报错
在这里插入图片描述
索引签名的顺序问题,对同一个属性多次赋值时,最后一次赋值将覆盖之前的值
在这里插入图片描述
可以使用readonly修饰符来限制索引签名的可写性
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1137386.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023年CSP-S赛后总结(2023CSP-S题解+游记)

目录 T1 题目描述 输入格式 输出格式 代码 T2 题目描述 输入格式 输出格式 题目描述 输入格式 输出格式 题意翻译 代码 T3 题目背景 题目描述 输入格式 输出格式 代码 T4 题目描述 输入格式 输出格式 代码 总结 游记 DAY1 DAY0 DAY-1 T1 题目描述…

P-MOS管开关机控制电路(手动按键控制和自动采样信号触发控制)

1. 手动(按键)控制 这种控制适合与消费电子,家庭消费电子领域,用户人为地手动按动机械按键控制P-MOS管导通与断开。例如:电动牙刷、儿童玩具等等,很多都会用到一个按钮控制产品的开关机,调档等等。 1.1 RH6030_JX触摸…

029.Python面向对象_类补充_属性(方法)相关

我 的 个 人 主 页:👉👉 失心疯的个人主页 👈👈 入 门 教 程 推 荐 :👉👉 Python零基础入门教程合集 👈👈 虚 拟 环 境 搭 建 :👉&…

Qt之菜单栏、工具栏、状态栏介绍及工具栏QAction的动态增删显示实现方式

目的 端应用程序或者编辑器基本都支持工具栏快捷功能的动态增删,即通过在菜单栏上打钩就可以在工具栏上看到相应功能的快捷按钮,取消打钩则在工具栏上就移除了该功能的快捷按钮。那么Qt如何实现这个功能,本篇目的就是记录实现此功能的方法及思…

cmd 命令关闭占用端口

工作中还是偶尔会遇到端口号被占用的情况,之前也有写过另一种关闭方式,但是发现没有命令方便,所以记录一下。 1、 查看 8081 端口占用的 pid 。 命令:netstat -ano |findstr 8081 由上图可知,占用 8081 端口的进程 id…

折叠式菜单怎么做编程,初学编程系统化教程初级1上线

中文编程系统化教程,不需英语基础,学习链接——入门篇课程 https://edu.csdn.net/course/detail/39036中文编程系统化教程,不需英语基础,学习链接—— 初级1课程 https://edu.csdn.net/course/detail/39061 ——————————…

C语言输出以下图案

图案&#xff1a; * * * * * * * * * * * * * * * * * * * * * * * * * 完整代码&#xff1a; /* 输出以下图案 * * * * * * * * * * * * * * * * * * * * * * * * * */ #include<stdio.h>int main(){//图案的行数int n5;for (int i 0; i < n; i){//每一行开头空格…

通过profibus PA转Modbus rtu协议网关把RTU数据传到pa设备上

远创智控PA转modbus rtu协议网关YC-PA-485&#xff0c;解决您的协议转换难题。 这款PA转Modbus RTU协议网关&#xff0c;将Profibus PA和Modbus RTU专用通讯协议进行桥接&#xff0c;为您的数据传输提供稳定、高效的解决方案。它符合Modbus通讯协议&#xff0c;允许Modbus设备…

基于Java的学生在线课程学习系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09; 代码参考数据库参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&am…

架构设计基础

一、架构图 二、系统背景 业务发展迅速&#xff0c;积累了大量的数据资产&#xff0c;大数据团队承担数据串联、沉淀&#xff0c;反哺和赋能业务的重要职责。大数据团队协同各部门打造了玩个大狗魔方、大狗宝盒数据产品&#xff0c;提供data-center应用发力数据中台&#xff0…

leetcode做题笔记203. 移除链表元素

给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6 输出&#xff1a;[1,2,3,4,5]示例 2&#xff1a; 输入&#xff1a…

redis archive github

https://github.com/redis/redis/releases/tag/7.2.2https://github.com/redis/redis/releases/tag/7.2.2

JS38 高频数据类型

题目来源&#xff1a; 高频数据类型_牛客题霸_牛客网 (nowcoder.com) JS38 高频数据类型 描述 请补全JavaScript代码&#xff0c;要求找到参数数组中出现频次最高的数据类型&#xff0c;并且计算出出现的次数&#xff0c;要求以数组的形式返回。 注意&#xff1a; 1. 基本数据…

【VASP】QVASP 的使用

【VASP】QVASP 的使用 QVASP 的介绍Qvasp 安装使用、测试和算例ELF电荷局域函数计算输入文件简述 QVASP 的介绍 下载地址&#xff1a;https://sourceforge.net/projects/qvasp/ qvasp定位于开发包含VASP输入文件前处理、输出文件后处理的基本功能&#xff0c;同时&#xff0c…

threejs(6)-操控物体实现家居编辑器

// 导入threejs import * as THREE from "three"; // 导入轨道控制器 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; // 导入lil.gui import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";…

使用ControlNet生成视频(Pose2Pose)

目录 ControlNet 介绍 ControlNet 14种模型分别是用来做什么的 ControlNet 运行环境搭建 用到的相关模型地址 ControlNet 介绍 ControlNet 是一种用于控制扩散模型的神经网络结构&#xff0c;可以通过添加额外的条件来实现对图像生成的控制。它通过将神经网络块的权重复制到…

排序-基数排序

排序思路&#xff1a;抽象实现多个桶用来储存所需要排序的基数&#xff0c;再递归的调用到每一次数上&#xff08;通俗点讲&#xff0c;先按个位进行分类&#xff0c;再按十位进行分类&#xff0c;依次排到最高位&#xff0c;最后将所有分类的数连在一起就是排完的序列&#xf…

Pytorch代码入门学习之分类任务(三):定义损失函数与优化器

一、定义损失函数 1.1 代码 criterion nn.CrossEntropyLoss() 1.2 损失函数简介 神经网络的学习通过某个指标表示目前的状态&#xff0c;然后以这个指标为基准&#xff0c;寻找最优的权重参数。神经网络以某个指标为线索寻找最优权重参数&#xff0c;该指标称为损失函数&am…

M1安装python3.12

1.下载pkg文件 Python Releases for macOS | Python.org 2.安装 下一步下一步即可 3.配置环境变量 不配置也可以&#xff0c;直接python3.12即可进入python环境。 4.python3.12改为python 每次少敲4次键盘也挺爽的。效果&#xff1a; 实现步骤&#xff1a; python3.12的默…

DeepinV20实现使用CapsLock键切换输入法

概览 起因参考资料解决问题1. 删除CapsLock键映射关系2. 新建CapsLock键映射关系3. 建立配置文件4. **注销用户或者重启电脑**5. 修改切换输入法快捷键6. 测试输入 起因 看同事的MacBook可以使用CapsLock键切换输入法&#xff0c;而我作为Shift党CapsLock键几乎不使用&#xf…