如何在TypeScript中使用动态对象属性
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在TypeScript中使用动态对象属性相关的知识,希望对你有一定的参考价值。
我正在使用TypeScript,我需要处理动态对象属性。我希望我能成为TypeScript的高手,但我不是。我遇到的问题是,在我目前的项目中,我想让用户可以将自己的自定义界面输入到Generic界面。
我现在工作的是以下界面
export interface Filter {
columnId: string;
searchTerm: string;
}
export interface GridState {
filters: Filter[];
}
// use it as an array of filters
const state: GridState = {
filters: [{ columnId: 'firtName', searchTerm: 'John' }]
}
但是,从上面所示,我想给用户使用他自己的界面的可能性。所以,让我说使用columnId
而不是field
而不是searchTerm
,他会使用value
。所以他的自定义界面将是
export interface CustomFilter {
field: string;
value: string;
}
我想向用户提供的是这样的定制结构模板
export interface FilterStruct {
propNameColumnId: string;
propNameSearchTerm: string;
}
但是如何将2连接在一起?如何将用户的CustomFilter
与FilterStruct
一起使用。以下不起作用,我知道这是不正确的。
export interface GridState {
filters: FilterStruct<CustomFilter>[];
}
最终目标是用户能够输入自己的界面和他自己的属性名称。然后在我身边,我将使用提供的动态对象属性循环遍历数组。
您可以使GridState
通用并为泛型参数提供默认值。此外FilterStruct
可以继承Array
,因此我们可以使用辅助函数为数组添加额外的属性:
export interface FilterStruct<T> extends Array<T> {
// We make sure the property names are actually properties of T
// We make these optional you should use default values if they are undefined
// We do this to keep initialization simple in the non customized scenario, you can make them mandatory, but then you can't initialize with a simple array
propNameColumnId?: keyof T;
propNameSearchTerm?: keyof T;
}
export interface Filter {
columnId: string;
searchTerm: string;
}
export interface CustomFilter {
field: string;
value: string;
}
// T has a default value of Filter so we don't have to specify it, unless we want to customize
export interface GridState<T = Filter> {
filters: FilterStruct<T>;
}
// Helper function to create an array with the extra properties
function createFilterStruct<T>(cfg: { propNameColumnId: keyof T; propNameSearchTerm: keyof T; }, items: T[]) {
return Object.assign(items, cfg);
}
// Default we can use simple array initailization
const state: GridState = {
filters: [{ columnId: 'firtName', searchTerm: 'John' }]
}
// Custom filter, create with createFilterStruct
const stateCustom: GridState<CustomFilter> = {
filters: createFilterStruct({ propNameColumnId: 'value', propNameSearchTerm: 'field' }, [
{ value: 'firtName', field: 'John' }
])
}
//Usage
function loopThrough<T>(grid: GridState<T>){
// Provide defaults for propNameColumnId and propNameSearchTerm
let propNameColumnId = grid.filters.propNameColumnId || 'columnId' as keyof T
let propNameSearchTerm = grid.filters.propNameSearchTerm || 'searchTerm' as keyof T
// Loop throught the array normally, it is just an array
for(let filter of grid.filters){
// Access the properties
console.log(`${filter[propNameColumnId]} = ${filter[propNameSearchTerm]}`);
}
}
loopThrough(stateCustom);
loopThrough(state);
以上是关于如何在TypeScript中使用动态对象属性的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Typescript 中将具有动态键的对象设置为 React 状态
typescript 计算属性允许您使用在运行时动态计算的名称在对象上定义属性。
使用随机数组字符串键入对象键/属性 - TypeScript
IOC 控制反转Android 事件依赖注入 ( 事件依赖注入具体的操作细节 | 创建 事件监听器 对应的 动态代理 | 动态代理的数据准备 | 创建调用处理程序 | 创建动态代理实例对象 )(代码片