ts泛型报错

Question

我定义了一个公共的方法：

export const filterByFront = <T>(
  value: string,
  jsonData: T[],
  setData: (data: T[]) => void,
  filterKey: keyof T
) => {
  const originData = jsonData;
  if (!!value && !!value.trim()) {
    setData(originData);
  } else {
    const filterData = originData.filter((item) => {
      const newFilterValue = item[filterKey];
      return newFilterValue
        ?.toLowerCase() //这一行出现错误信息error: Property 'toLowerCase' does not exist on type 'NonNullable<T[keyof T]>'.ts(2339)
        ?.includes(value.trim().toLowerCase());
    });

    setData(filterData);
  }
};

如下图调用：

          <Input.Search
            key="filter_role"
            placeholder={t('common.filter')}
            onSearch={(value) =>
              filterByFront<IRoleListItem>(value, jsonData, setRoleData, 'id')
            }
          />,

类型：

export interface IRoleListItem {
  authority?: string;

  id?: string;

  privilege?: string;

  prohibit?: string;

  tag_list?: string;
}

诉求：如何解决这个报错，报错产生的原因是什么

Answer 1

同此问题回答https://segmentfault.com/q/10...