前言
在前端开发中，我们经常会使用 Storybook 来进行组件的开发与测试。而其中一个常用的插件就是 @storybook/addon-notes。为了让 TypeScript 对该插件的开发更加友好，我们可以使用 @types/storybook__addon-notes 包来对其进行类型定义。本篇文章将会详细介绍该 npm 包的使用教程。
安装
在使用该 npm 包之前，我们需要先安装 @storybook/addon-notes 和 @types/storybook__addon-notes 两个包。
npm i -D @storybook/addon-notes @types/storybook__addon-notes
使用
在使用 @storybook/addon-notes 时，我们需要在 .storybook/main.js 中进行配置。
module.exports = {
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-notes'
],
};在使用 @types/storybook__addon-notes 时，我们只需要进行以下引入即可。
import { addDecorator, addParameters } from '@storybook/react';
import { withNotes } from '@storybook/addon-notes';API
withNotes(options)(storyFn)
参数
- options:
string | object，可选，笔记的文本或笔记选项对象。 - storyFn:
function，装饰的 Story 函数。
示例
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- ------------- - ---- -------------------
------ - --------- - ---- -------------------------
--------------------------
------ ------- -
------ ----------------
--
------ ----- ------------- - -- -- -
---------- -----------
--
------------------- - -
----------- -
------ -------------
--
--在上述示例中，我们可以看到 withNotes() 函数的用法。每个 Story 都可以拥有一个 notes 参数，该参数可以是一个 String 类型的文本，也可以是一个 Object 类型的选项对象。
parameters.notes
类型
string或Array<string>，可选，笔记的文本。
示例
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- ------------- - ---- -------------------
------ - --------- - ---- -------------------------
--------------------------
------ ------- -
------ ----------------
----------- -
------ -------------
--
--
------ ----- ------------- - -- -- -
---------- -----------
--在上述示例中，我们可以看到了 parameters.notes 的用法。在 Story 的配置中添加 notes 参数，即可在 Storybook 中查看到笔记文本。
parameters.notes.markdown
类型
string或Array<string>，可选，笔记的 Markdown 文本。
示例
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- ------------- - ---- -------------------
------ - --------- - ---- -------------------------
--------------------------
------ ------- -
------ ----------------
----------- -
------ -
--------- -
- ---
---- ------------ ---
-- ---
- ---
- ---
--
--
--
--
------ ----- ------------ - -- -- -
---------- -----------
--在上述示例中，我们可以看到了 parameters.notes.markdown 的用法。在 Story 的配置中添加 markdown 参数，即可在 Storybook 中查看到渲染后的 Markdown 文本。
结语
通过本文的介绍，相信大家已经掌握了 npm 包 @types/storybook__addon-notes 的使用方法。该包为我们在使用 Storybook 进行开发时提供了很大的便利，提高了开发效率。在开发过程中如果遇到问题，不妨尝试使用该包来解决问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc216b5cbfe1ea0612024