如何解决Carbon Component Svelte插槽组件的TypeScript属性不存在错误

问题原因 #

官方ComboBoxItem类型仅定义了id、text、disabled字段，当传入包含额外字段（如name、description）的自定义数组时，组件插槽的item仍被推断为基础的ComboBoxItem类型，导致访问扩展字段时TypeScript报错。

解决方案 #

方法1：通过泛型指定自定义类型（推荐） #

carbon-components-svelte的ComboBox组件支持泛型参数，直接传入你的自定义类型，让组件自动推断item的类型：

修改后的完整代码：

<script>
import type { ComboBoxItem } from 'carbon-components-svelte/types/ComboBox/ComboBox.svelte';
import ComboBox from 'carbon-components-svelte/ComboBox.svelte';

// 先定义自定义类型
interface CamsComboBoxItem extends ComboBoxItem {
    name?: string;
    description?: string;
    versionNumber?: string;
}

function itemToString(item: CamsComboBoxItem): string {
    return item.name || '';
}

// 示例基础数据
const mockdata = { name: "Base", description: "Base desc", versionNumber: "1" };

const items: CamsComboBoxItem[] = Array.from(Array(3)).map((e, i) => ({
    ...mockdata,
    name: `Variant Name ${i}: ${mockdata.name}`,
    description: `Variant Description ${i}: ${mockdata.description}`,
    versionNumber: mockdata.versionNumber + '.' + i,
    id: i,
    text: mockdata.name, // 补充基础类型要求的必填text字段
}));
</script>

<!-- 给ComboBox指定泛型参数为自定义类型 -->
<ComboBox<CamsComboBoxItem>
    titleText="Contact"
    placeholder="Select contact method"
    let:item
    let:index
    items={items}
    selectedId={1}
    {itemToString}
>
    <div title={item.description}>
        <strong>{item.name}</strong>
    </div>
    <div>
        Version Number: {item.versionNumber}
    </div>
    <div>
        ID: {item.id}
    </div>
</ComboBox>

方法2：在插槽中使用类型断言 #

如果不想用泛型，也可以在访问扩展字段时直接断言item为自定义类型：

<!-- 插槽内的写法 -->
<div title={(item as CamsComboBoxItem).description}>
    <strong>{(item as CamsComboBoxItem).name}</strong>
</div>
<div>
    Version Number: {(item as CamsComboBoxItem).versionNumber}
</div>

注意事项 #

• 自定义类型必须满足基础ComboBoxItem的要求：确保包含id和text字段（text是必填项，原代码中缺少该字段会触发类型报错）。
• ComboBoxItemId本身支持string | number类型，因此无需在自定义类型中重新定义id: number。

内容的提问来源于stack exchange，提问作者G-key