TS7053错误解决：字符串无法索引空对象的TypeScript问题

问题背景 #

我需要将API返回的数组按元素关联的公司名称首字符分组排序，预期结果按首字母顺序展示分组（比如B、F开头的元素各自成组）。用Vue3的计算属性实现了逻辑，但TypeScript抛出TS7053警告，代码能正常运行但类型检查不通过。

实现代码如下：

<script lang="ts">
const computedItems = computed(() => {
    if (!items.value) return {};
    const grouped = items.value.data.reduce((r, item) => {
        // 原代码存在类型不匹配问题：ItemData没有直接的name属性
        let group = item.name[0];
        if (!r[group]) r[group] = {group, children: [item]}
        else r[group].children.push(item);
        return r;
    }, {});
    return Object.keys(grouped).sort().reduce(
        (obj, key) => {
            obj[key] = grouped[key];
            return obj;
        },
        {} as Record<string, { group: string, children: Item[] }>
);
});
</script>

触发的TS警告：

TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'. No index signature with a parameter of type 'string' was found on type '{}'.

警告出现在三个位置：

• if (!r[group]) r[group]...
• else r[group]...
• obj[key] = grouped[key];

相关类型定义：

type ItemResult = { data: ItemData[], links?: any, meta?: any };

const {
    data: items,
} = await useLazyAsyncApi<ItemResult>(`/api/item`);

export type ItemData = {
    uuid: string;
    company: App.Domain.Company.Data.CompanyData;
};

export type CompanyData = {
    uuid: string;
    name: string;
    url: string | null;
    phone: string | null;
    email: string | null;
    created_at: string;
    deleted_at: string | null;
};

警告原因 #

TypeScript对类型推断严格，核心问题是reduce的初始累加器类型未明确：

1. 第一个reduce的初始值是{}，TS会推断它为{}（空对象类型），这个类型不允许用任意字符串作为索引——因为空对象默认没有定义任何索引签名。
2. 当你用r[group]（group是字符串）去访问这个空对象时，TS无法确认该索引是否存在，也无法推断对应值的类型，因此抛出“隐式any类型”的警告。
3. 第二个reduce里的grouped是第一个reduce的返回值，TS同样无法推断它的类型，所以obj[key] = grouped[key]也会触发同类警告。

另外，原代码里的item.name[0]存在类型错误：根据定义，ItemData没有直接的name属性，正确的取值应该是item.company.name[0]。

解决方法 #

1. 明确第一个reduce累加器的类型 #

给初始的空对象断言为目标类型，让TS知道这个对象允许字符串索引，且每个索引对应的值结构是{ group: string; children: ItemData[] }。

2. 修正取值路径的类型错误 #

把item.name[0]改为item.company.name[0]，匹配你的类型定义。

修复后的完整代码 #

<script lang="ts">
import type { ItemData } from '@/path/to/your/types'; // 导入你的类型定义

const computedItems = computed(() => {
    if (!items.value) return {};
    // 给第一个reduce的累加器指定明确类型
    const grouped = items.value.data.reduce((r, item) => {
        const group = item.company.name[0].toUpperCase(); // 可选：统一大写分组键，避免大小写分组重复
        if (!r[group]) {
            r[group] = { group, children: [item] };
        } else {
            r[group].children.push(item);
        }
        return r;
    }, {} as Record<string, { group: string; children: ItemData[] }>);

    // 第二个reduce的类型已经明确，无需额外修改
    return Object.keys(grouped).sort().reduce(
        (obj, key) => {
            obj[key] = grouped[key];
            return obj;
        },
        {} as Record<string, { group: string; children: ItemData[] }>
    );
});
</script>

额外优化（可选） #

• 给分组键统一转大写/小写，避免因大小写差异产生重复分组（比如b和B分成两组）。
• 如果company.name可能为空，需要添加空值判断，比如：

  const companyName = item.company.name;
  if (!companyName) return r; // 跳过无名称的元素
  const group = companyName[0].toUpperCase();
  

内容的提问来源于stack exchange，提问作者SPQRInc