TypeScript遍历对象并创建一个新对象

时间:2020-10-31 14:19:53

标签: reactjs typescript

我有两个接口相同的对象。

interface SizeFilter {
  key: string | undefined
}

const defaultFilter = {
    key: undefined,
} as SizeFilter; 

我有一个功能,该功能基本上检查状态是否设置了键,并相应地获取过滤器选项:

const { filters } = useSelector(({ sizeCurves }) => sizeCurves);


// Get FilterOptions for filtering on the page.
const getSelectedFilters = () => {
    const pageFilter = defaultFilter;
    // TODO: add an Object loop to check all properties and define value.
    pageFilter.sizeCurveKey = filters.sizeCurveKey ?? undefined ;
    return pageFilter;
};

我必须决定是从过滤器还是从默认过滤器获取过滤器值。为此,我在pageFilter函数中设置了getSelectedFilters

当我尝试使用defaultFilter遍历Object.Keys().map时,

Object.keys(defaultFilter).map(key =>{
             const pageFilter[item] = (defaultFilter[ key ])? defaultFilter[ key ] : undefined;
        });

我的编辑器向defaultFilter[ key ]发出警告

元素隐式地具有“ any”类型,因为类型的表达式 'string'不能用于索引'SizeFilter'类型。没有索引 在类型上找到参数类型为“字符串”的签名 “ SizeFilter”。

我不确定如何解决此问题。

1 个答案:

答案 0 :(得分:0)

此行为的原因是为了防止由于未知键索引对象而导致的运行时错误。为防止这种情况,您需要首先检查该键是否对defaultFilter有效。您可以使用一个小的辅助函数来实现此目的:

function hasKey<O>(obj: O, key: keyof any): key is keyof O { return key in obj }

之后,您可以使用如下功能:

    if (hasKey(defaultFilter, key)) { 
       defaultFilter[key] 
    }