Svelte+Carbon Components：组件作为变量传props及类型报错解决

核心结论 #

完全可以将组件赋值给变量后传递给其他组件的props，Svelte本身支持组件作为值传递的特性，Carbon Components Svelte也完全兼容这种写法。

解决TS类型错误的具体写法 #

针对你遇到的ts(2451)、ts(2741)、ts(2352)错误，以下是规范的实现方式：

基础场景：根据状态切换组件

直接将组件赋值给变量，使用typeof 组件名获取原生类型，避免手动声明类型导致的不匹配：

<script lang="ts">
  import { Modal, InlineLoading } from 'carbon-components-svelte';

  // 声明加载状态
  let isLoading = false;

  // 用typeof直接获取InlineLoading的组件类型，避免类型不匹配
  let primaryButtonIcon: typeof InlineLoading | null = null;

  // 响应式更新组件变量
  $: primaryButtonIcon = isLoading ? InlineLoading : null;
</script>

<Modal
  open={true}
  primaryButtonText="提交"
  {primaryButtonIcon}
/>

进阶场景：传递组件的Props

如果需要给动态组件传递props，可利用Carbon Modal提供的primaryButtonIconProps属性，同时声明组件和其props的类型：

<script lang="ts">
  import { Modal, InlineLoading } from 'carbon-components-svelte';
  import type { InlineLoadingProps } from 'carbon-components-svelte';

  let isLoading = true;

  // 声明包含组件和props的类型结构
  let buttonIconConfig: {
    component: typeof InlineLoading;
    props: InlineLoadingProps;
  };

  $: {
    buttonIconConfig = {
      component: InlineLoading,
      props: { status: isLoading ? 'active' : 'inactive' }
    };
  }
</script>

<Modal
  open={true}
  primaryButtonText="提交"
  primaryButtonIcon={buttonIconConfig.component}
  primaryButtonIconProps={buttonIconConfig.props}
/>

常见TS错误的原因与解决 #

• ts(2451)：重新声明块范围变量：检查script标签内的变量声明，确保同一变量只声明一次，避免重复定义。
• ts(2741)：类型缺少必要属性：不要手动编写组件类型，直接使用typeof 组件名获取Carbon组件的原生类型，确保包含Svelte组件的所有必要属性。
• ts(2352)：类型转换无效：确保变量类型与目标props的要求完全匹配，比如Modal的primaryButtonIcon只接受Svelte组件类型，不要传递普通对象或其他类型的值。

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