typescript interface定义数组每一项都为对象

2023-11-03

定义一个方法,返回一个数组,数组的每一项均为对象,对象中包含label和value两个属性

创建一个public.ts文件

javascript实现

// javascript 实现
export const formatYear = function () {
	let date = new Date().getFullYear();
	let arr = [];
	for (let i = 0; i < date + 10; i++) {
		arr.push({
			label: i,
			value: i
		})
	}
    return arr;
}

typescript实现

// 定义一个接口约束label和value值类型

interface labelValue {
	label: number;
	value: number;
}
let obj: labelValue;
export function formatYear (): labelValue[] {
	let date = new Date().getFullYear();
	let arr: labelValue[];
	for (let i = 0; i < date + 10; i++) {
		obj = {
			label: i,
			value: i
		}
		arr.push(obj)
	}
	return arr;
}

typescript 类型兼容

在public文件中再定义一个方法,也返回一个数组,但是label类型变为string

由于ts文件中label属性只能声明一次

所以需要用到类型变量来实现

T 表示传入的类型,可以为number、string、boolean等
传入什么label就是什么类型
interface labelValue<T> {
	label: T;
	value: number;
}
// 传入number类型
let obj: labelValue<number>;
export function formatYear (): labelValue<number>[] {
	let date = new Date().getFullYear();
	let arr: labelValue<number>[];
	for (let i = 0; i < date + 10; i++) {
		obj = {
			label: i,
			value: i
		}
		arr.push(obj)
	}
	return arr;
}

// 传入string类型
let obj1: labelValue<string>;
export function formatHours (): labelValue<string>[] {
	let arr: labelValue<string>[];
	for (let i = 0; i <= 24 + 10; i++) {
		obj1 = {
			label: i + 'h',
			value: i
		}
		arr.push(obj1)
	}
	return arr;
}

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

typescript interface定义数组每一项都为对象 的相关文章

随机推荐

  • 怎样删除Github中的项目

    我们在GitHub上创建项目的时候 如果想要删除当前项目 怎样进行操作呢 下面就简单介绍一下怎样去删除GitHub中的项目 1 选择要删除的项目 2 进入项目中的setting 设置 中 3 一直下拉 看到有红色字体出现 进入Danger
  • 都2022年了,出去面试连分布式锁的源码你都不会画?

    V xin ruyuanhadeng获得600 页原创精品文章汇总PDF 目录 一 写在前面 二 Redisson实现Redis分布式锁的底层原理 1 加锁机制 2 锁互斥机制 3 watch dog自动延期机制 4 可重入加锁机制 5 锁
  • Linux基础笔记17

    磁盘基础概念知识 计算机主要存储媒介之一 由一个或多个铝制 玻璃的碟片组成 碟片外覆盖具有铁磁性材料 磁盘内部由磁道 柱面 扇区 磁头等关键部位组成 Linux 系统中硬件设备文件放在 dev 下 不同磁盘接口 系统识别的设备名称不一样 I
  • MySQL查询操作

    MySQL查询操作 1 建表 CREATE TABLE 学生 学号 char 7 NOT NULL PRIMARY KEY 姓名 char 8 NOT NULL 性别 char 2 年龄 tinyint 入学时间 datetime 专业 v
  • 【科普贴】MOS管开关原理及应用详解

    前言 MOS管通常被用作电源开关使用 通常使用PMOS做为上管 将NMOS做为下管使用 当然也有反过来使用的场景 但使用较少 此贴为科普贴 就不做累述了 MOS原理介绍 1 NMOS管介绍 电流方向从D S 漏极流向源极 导通条件为VGS有
  • i.mx287学习笔记4-使用QT控制LED

    上面是我的微信和QQ群 欢迎新朋友的加入 目录 1 安装QT CREATOR 2 硬件连接 3 驱动源码 4 编译驱动 测试驱动 5 创建QT界面 6 编译QT 7 运行 8 源码 1 安装QT CREATOR sudo apt get i
  • AVPlayer 播放的时候有黑色边

    iOS视频开发中 使用系统的AVPlayer的几率非常高 然 在部分Plus机型会出现黑边的情况 平时不容易发现 但你的视频若是白色色调 就比较明显 解决方法 修改AVPlayerLayer的属性 使playerLayer光栅化 即位图化
  • python需要学多长时间

    随着人工智能和机器学习的持续升温 Python 目前是首选的AI语言 在数据科学和AI中占据主导地位 而且随着互联网的发展 Python的应用越来越广泛 学习Python的人也越来越多 主要是因为Python门槛低 上手很快 而且通用性和实
  • npm ERR! 400/403 Bad Request - PUT https://registry.npmjs.org/xxx- “xxx“ is invalid for new packages

    npm ERR 403 403 Forbidden PUT https registry npmjs org df ui You do not have permission to publish df ui Are you logged
  • TypeError: 'builtin_function_or_method' object is not subscriptable的一种错误情况

    TypeError builtin function or method object is not subscriptable的一种错误情况 初学python 今天在做练习时为一个Error苦恼了很久 最终找到了解决方法 错误代码块如下
  • Contrastive Self-Supervised Learning 的对比学习框架和设计新方法

    翻译自 建议阅读原文 https towardsdatascience com a framework for contrastive self supervised learning and designing a new approac
  • OpenGL点精灵(Point Sprite)

    From http iiunknown blogbus com logs 48250551 html 在很多粒子的demo中 看到把粒子显示成一个个小球 如果你以为那是用glutSolidShpere画出来的话 你就错了 上万个粒子 每个球
  • 织梦网站服务器配置未见,DedeCms系统配置参数无法显示的解决方法

    Dedecms后台系统基本参数不显示的原因 这个是我使用dedecms建站来遇到的问题 到dedecms官方看了下 什么玩意的信息都没有 蛋疼的官方 对于我们这等草根来说dedecms官方基本没有指导作用 都是论坛的会员在哪儿里互相帮助 此
  • 患病率对 Delta 和样本量的影响 - 使用 R 语言进行计算

    患病率对 Delta 和样本量的影响 使用 R 语言进行计算 概述 在研究和实验设计中 样本量是一个重要的考虑因素 样本量的确定需要考虑多个因素 其中之一是患病率 即事件发生的概率 患病率的不同取值会对所需的样本量和效果大小 Delta 产
  • Flutter学习六:GestureDetector练习

    在Android中所有View都可以设置OnClick事件 但是在Flutter中除开少数自带Press事件的widget 大部分控件都是不带事件的 如果需要添加事件 就可以用GestureDetector作为父widget包裹需要添加事件
  • 华为OD真题练习

    华为OD真题练习 华为OD机考真题练习 题目描述 任务混部 公司创新实验室正在研究如何最小化资源成本 最大化资源利用率 请你设计算法帮他们解决一个任务混部问题 有taskNum项任务 每个任务有开始时间 startTime 结束时间 end
  • 获取ItemsControl中当前item的binding数据

    直接用 Binding 就可以了 如下
  • 负载均衡策略之AbstractLoadBalancerRule和RandomRule源码解读

    一 负载均衡类图 二 AbstractLoadBalancerRule解读 负载均衡策略的抽象类 public abstract class AbstractLoadBalancerRule implements IRule IClient
  • 微信小程序实现 3秒后自动跳转到指定页面

    需求描述 在某个页面 当用户点击 按钮 时 如果用户没有登录 则 3 秒后自动跳转到登录页面 思路 1 判断用户有没有进行登录 如果没有登录 那么就调用this delayTime 这个方法 2 首先写一个展示弹框的方法 this show
  • typescript interface定义数组每一项都为对象

    定义一个方法 返回一个数组 数组的每一项均为对象 对象中包含label和value两个属性 创建一个public ts文件 javascript实现 javascript 实现 export const formatYear functio