故事书迁移到 CSF 时出现打字稿问题

Question

将 50 多个故事迁移到 CSF 后，它们不会出现在故事​​书中。经过一番挖掘后，我发现我必须将组件密钥传递给默认导出，并将组件作为其值

export default {
title: "Title"
component: MyComponent
}

问题是我的所有组件都使用 Typescript，并且由于某种原因出现错误：

模块的默认导出具有或正在使用专用名称“MyComponentProps”.ts(4082)

对此的任何帮助将不胜感激。

Answer 1

您可以将他们的 props 更改为type而不是interface，就像 @Mayank 建议的那样，或者您可以简单地确保export他们的 props。

例子：

interface Props {
  name: string;
}

const ({ name }: Props) => {
  return <div>{name}</div>;
}

如果您尝试为此组件创建故事，此代码将提供您将获得的 TS4082。

如果导出接口：

export interface Props {
  name: string;
}

const ({ name }: Props) => {
  return <div>{name}</div>;
}

错误将会消失。