简介
在前端开发中，我们通常使用 Storybook 这个工具来展示我们的组件。而 Storybook 的一个重要功能是可以让我们以交互式的方式快速调试和修改组件的 props 或 states，这就是通过 @storybook/addon-knobs 插件实现的。
但是，当我们使用 TypeScript 开发时，我们需要使用 @types/storybook__addon-knobs 这个 npm 包来为其提供类型定义支持。本篇文章将介绍如何使用 @types/storybook__addon-knobs 包来加强我们的 TypeScript 开发体验。
安装
npm install --save-dev @types/storybook__addon-knobs
使用
在我们的项目中，我们需要先导入 @storybook/addon-knobs，然后再导入 @types/storybook__addon-knobs，就可以在组件定义时使用 WithKnobs 高阶组件导出我们的组件了。
-- -------------------- ---- -------
------ - ---------- ----- ------- - ---- -------------------------
------ - --------- - ---- -------------------
------ - ----------- - ---- ----------------
------ - -- ----- ---- -------------------------
------ ---------------- ---- ----------------------
------ ----------------------------------
----- ------- - ------------------------ --------
--------------------------------
----------------- ------- -- -- -
----- ------ ---------------- - -
------ ------------- ------- ---------
--------- ------------------- -------
--
------ ------------ ---------- ---
---在上面的代码中，我们首先导入了 @storybook/addon-knobs 中的 WithKnobs 高阶组件，以及所需的 prop-types，然后导入了 @types/storybook__addon-knobs 包中的类型定义，同时导入了示例代码中的 MyComponent 组件和 props。在添加故事之前，我们使用 WithKnobs 高阶组件作为 decorator 将其添加到 Storybook 中。在添加故事中，我们使用 text() 和 boolean() 函数来定义我们的样板文件，然后将这些 prop 传递给我们的组件。
注意，我们还需要运行 @storybook/addon-knobs/register，以确保 Storybook 中的 knobs 插件处于可用状态。
示例
下面的代码演示了如何使用 @types/storybook__addon-knobs 包来加强我们的 TypeScript 开发体验。
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ - --------- - ---- -------------------
------ - ---------- ---- - ---- -------------------------
------ - ----- - ---- ----------------------
------ ----------------------------------
------ - -- ----- ---- -------------------------
------ - ------------ ------------ - ---- -----------------------------------------------
------------------ -------
-- -- --------- ----- ----------
------------------------
---------- ------ -- -- ------ ------------------- ------ ------------ ---
-- -----------
-----
----- -------
-- -- -
-- -----
---- ----- - ---------------------
-- - ------------ ----- ---------- ----------
-- -------------- ----- ----
----- ---------- --------------- - ------- -- -
-- -------- ------
----- - --------- - - ------
-- -- ----- ----
----- ------------ ----------- - -
------ -
----- -------
-------- ------ -----------
--
--
-- -----------
-----------------------
------ ------ ------------------- --------------------------- ---
--
------ ------------- -------------- ---------- ------------- ------------------- ------------------ ---
--
- ------ - -------- ---- - -
--在上面的代码中，我们展示了 @types/storybook__addon-knobs 包的许多功能。我们从导入了需要的依赖开始，包括 @storybook/addon-knobs 的导入，代码中的 Hello 组件，以及一些相应的配置。
我们在故事中使用了 WithKnobs 高阶组件，以展示如何使用组件的 props 来添加 knobs，如何使用 KnobsWrapper 来定义需要添加的样板，并指定默认值。
总结
通过本文，我们可以了解到，在使用 Storybook 进行 TypeScript 开发时，使用 @types/storybook__addon-knobs 包可以让我们受益匪浅。它提供了类型支持，并允许我们在执行时线调节属性并定义样板以测试组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/193944