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

定义一个方法,返回一个数组,数组的每一项均为对象,对象中包含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;
}

 

### 如何在 TypeScript定义包含数组对象类型 在 TypeScript 中,可以通过显式声明对象的属性及其对应的类型来定义包含数组对象类型。以下是具体的实现方式: #### 使用接口定义对象类型 通过 `interface` 关键字可以清晰地描述对象结构以及其内部数组的类型。 ```typescript // 定义一个包含数组对象类型 interface User { name: string; age: number; hobbies: string[]; } const user: User = { name: "Alice", age: 25, hobbies: ["Reading", "Traveling"] // 数组类型为 string[] }; ``` 上述代码中,`hobbies` 属性被定义为字符串数组类型 `string[]`[^1]。 --- #### 使用类型别名定义对象类型 除了使用接口外,也可以利用 `type` 来创建类似的对象类型定义。 ```typescript // 使用 type 创建包含数组对象类型 type Product = { id: number; title: string; tags: readonly string[]; // 只读数组类型 }; const product: Product = { id: 101, title: "Laptop", tags: ["Electronics", "Gadgets"] as const, // 确保数组不可变 }; ``` 在此示例中,`tags` 被指定为只读数组类型 `readonly string[]`,这意味着无法对其执行修改操作[^4]。 --- #### 结合联合类型与数组对象中的数组可能存储多种类型的值时,可采用联合类型来扩展灵活性。 ```typescript // 包含联合类型数组对象 interface Config { settings: (boolean | string)[]; } const config: Config = { settings: [true, "dark-mode", false], // 数组元素既可以是 boolean 也可以是 string }; ``` 这里展示了如何将数组设置为 `(boolean | string)[]` 类型,允许数组内的每一项属于多个候选类型之一[^2]。 --- #### 嵌套复杂对象并包含数组 对于更复杂的场景,可以在对象中嵌套其他对象或者进一步深化数组的应用范围。 ```typescript // 复杂对象类型定义 type Department = { departmentName: string; employees: { name: string; role: string }[]; }; const salesDepartment: Department = { departmentName: "Sales", employees: [ { name: "John Doe", role: "Manager" }, { name: "Jane Smith", role: "Associate" } ] }; ``` 此片段说明了一个部门对象模型,其中员工列表由具有特定字段的小型对象构成,并作为整体存放在数组之中。 --- ### 总结 TypeScript 提供了丰富的工具集去精确控制数据形态,无论是简单还是高度定制化的对象都可以轻松构建出来。借助于接口、类型别名以及其他高级特性(如联合类型和只读修饰符),开发者能够灵活应对各种实际需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值