TypeScript Vue中Prop添加description报错，如何实现Storybook展示？

1. 扩展Vue的Prop类型定义（推荐） #

Vue官方的PropOptions类型里并没有包含description字段——这个字段是Storybook等文档工具需要的元数据，不属于Vue运行时的必填属性，所以TypeScript会抛出类型错误。我们可以通过扩展Vue的类型声明来解决：

在项目根目录创建或修改vue.d.ts文件，添加以下代码：

import Vue from 'vue';

declare module 'vue/types/options' {
  interface PropOptions {
    // 为Prop选项添加可选的description属性
    description?: string;
  }
}

这样TypeScript就会将description识别为合法的Prop选项，同时保留其他类型检查的能力。

2. 临时忽略类型错误（不推荐） #

如果只是临时测试，也可以用// @ts-ignore注释跳过单个字段的类型检查：

export default Vue.extend({
  name: 'something',
  props: {
    backgroundColor: {
      type: String,
      // @ts-ignore
      description: 'What background color to use'
    }
  }
});

这种方法虽然简单，但会关闭该字段的类型校验，可能隐藏其他潜在问题，不建议在正式项目中大量使用。

完成上述操作后，Storybook就能正常读取description字段并展示Prop描述了。

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