故事书迁移到 CSF 的打字稿问题答案

【问题标题】：Typescript problem with storybook migration to CSF故事书迁移到 CSF 的打字稿问题
【发布时间】：2021-02-18 12:19:03
【问题描述】：

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

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

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

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

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

【问题讨论】：

【解决方案1】：

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

例子：

interface Props {
  name: string;
}

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

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

如果导出接口：

export interface Props {
  name: string;
}

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

错误会消失。

【讨论】：

【解决方案2】：

我假设您已经为 MyComponentProps 定义了一个接口。尝试将其更改为类型声明。这为我解决了问题。

【讨论】：