Svelte组件遍历对象时出现TS7053错误的解决求助

在纯TypeScript环境中可正常运行的代码，在Svelte组件中出现TS7053错误：

error TS7053: Element implicitly has an 'any' type because expression of type ‘string' can't be used to index type 'Prefs'

原因是Object.entries()返回的key类型为string，TypeScript无法确认该key属于Prefs类型的合法键，即使实际遍历的是对象自身的键。且Svelte中无法通过//@ts-ignore忽略该错误，以下是几种可行解决方法：

方案1：直接使用遍历得到的value（最简单） #

既然已经通过Object.entries($tempPrefs)拿到了每个键对应的value（即Preference实例），直接绑定value.value即可，完全绕开索引操作：

{#each Object.entries($tempPrefs) as [key, value]}
    <div style="width: 31em; padding:1em 1em">
        {#each value.enumChoices as choice}
            <label>
                <input
                    type="checkbox"
                    bind:group={value.value} <!-- 直接用value.value代替$tempPrefs[key].value -->
                    name={key + "choices"}
                    value={choice}
                />
                {camelCaseToTitleCase(choice)}
            </label>
        {/each}
    </div>
{/each}

方案2：给key添加类型断言 #

明确告诉TypeScript，遍历得到的key是Prefs类型的合法键：

{#each Object.entries($tempPrefs) as [key, value]}
    <div style="width: 31em; padding:1em 1em">
        {#each value.enumChoices as choice}
            <label>
                <input
                    type="checkbox"
                    bind:group={$tempPrefs[key as keyof Prefs].value} <!-- 添加keyof Prefs断言 -->
                    name={key + "choices"}
                    value={choice}
                />
                {camelCaseToTitleCase(choice)}
            </label>
        {/each}
    </div>
{/each}

方案3：封装类型安全的entries工具函数 #

如果需要多次使用类型安全的对象遍历，可以封装一个工具函数，确保返回的键是目标类型的合法键：

// utils.ts
export function typedEntries<T>(obj: T): Array<[keyof T, T[keyof T]]> {
    return Object.entries(obj) as Array<[keyof T, T[keyof T]]>;
}

在Svelte组件中使用：

<script>
    import { typedEntries } from './utils';
</script>

{#each typedEntries($tempPrefs) as [key, value]}
    <div style="width: 31em; padding:1em 1em">
        {#each value.enumChoices as choice}
            <label>
                <input
                    type="checkbox"
                    bind:group={$tempPrefs[key].value} <!-- 此时key类型为keyof Prefs，无类型错误 -->
                    name={key + "choices"}
                    value={choice}
                />
                {camelCaseToTitleCase(choice)}
            </label>
        {/each}
    </div>
{/each}

方案4：修改Prefs类型为可索引类型（不推荐） #

通过给Prefs添加索引签名，允许使用string类型索引，但会失去对具体键的类型检查：

export class Prefs {
    [key: string]: Preference; // 添加索引签名
    rulesName: Preference;
    investmentAmountUnit: Preference;
    // ... 其他属性
}

此方法不建议使用，因为会弱化TypeScript的类型校验能力，容易引入潜在错误。

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