在SvelteKit中结合Storybook使用TypeScript遇类型错误求助

云原生阿岚

2026-8-20

解决SvelteKit+TypeScript+Storybook中args类型报错问题

方案1：使用Storybook官方类型（推荐）

从@storybook/svelte导入官方提供的类型，给配置和故事变量做类型约束，同时可以结合组件Props类型实现类型校验：

import type { Meta, StoryObj } from '@storybook/svelte';
import Modal from './Modal.svelte';

// 定义Modal组件的Props类型，也可以直接从组件文件中导出复用
type ModalProps = {
  text: string;
};

const meta: Meta<ModalProps> = {
  title: 'Modal',
  component: Modal,
};

export default meta;

type Story = StoryObj<ModalProps>;

export const Primary: Story = {
  args: {
    text: 'Hello World',
  },
};

方案2：类型断言快速修复

如果不想改动原有代码结构，直接给Primary做类型断言，告诉TypeScript它包含args属性：

import Modal from './Modal.svelte';

export default {
  title: 'Modal',
  component: Modal,
};

const Template = (args: any) => ({
  component: Modal,
  props: args,
});

// 断言类型，允许挂载args属性
export const Primary = Template.bind({}) as typeof Template & { args?: any };
Primary.args = {
  text: 'Hello World',
};

方案3：复用组件自身导出的Props类型

如果你的Modal.svelte中已经导出了Props类型（比如export type Props = { text: string };），可以直接复用这个类型：

import type { Meta, StoryObj } from '@storybook/svelte';
import Modal, type { Props } from './Modal.svelte';

const meta: Meta<Props> = {
  title: 'Modal',
  component: Modal,
};

export default meta;

type Story = StoryObj<Props>;

export const Primary: Story = {
  args: {
    text: 'Hello World',
  },
};