Storybook中如何为@Input()配置复杂类型并做好类型标注

基础类型输入的常规写法 #

当组件@Input()接收的是字符串、布尔值这类基础类型时，可以直接在story的args字段中设置静态默认值，示例如下：

export const Default = Template.bind({});
Default.args = {
  id: 'checkbox1',
  isChecked: false,
  isDisabled: false,
  isInline: false,
  isRequired: false,
  label: 'Test Checkbox'
};

复杂表单类型的处理方式 #

当@Input()接收的是Angular响应式表单的AbstractControl、FormGroup这类复杂实例类型时，不需要用字符串占位这类笨拙的处理方式，按以下方法实现即可同时满足功能可用、类型提示清晰的要求：

• 直接构造真实的表单实例作为args默认值
  FormControl本身就是AbstractControl的子类，直接在story中导入响应式表单相关类，构造真实实例传入即可，使用者查看代码时能直接明确参数需要传入对应类的实例，不存在理解成本。示例代码如下：

  import { FormControl, FormGroup, Validators } from '@angular/forms';
  
  export const Default = Template.bind({});
  Default.args = {
    // 传入真实的FormControl实例，匹配AbstractControl类型要求
    checkboxAbstractControl: new FormControl(false, Validators.required),
    // 传入真实的FormGroup实例
    parentFormGroup: new FormGroup({
      testCheckbox: new FormControl(false)
    }),
    // 其余基础类型参数正常传值即可
    id: 'checkbox1',
    label: 'Test Checkbox'
  };
  

• 补充TypeScript类型定义强化提示
  给story的参数定义明确的TS接口，从类型校验层面避免传参错误，IDE会自动给使用者提示参数类型：

  import { StoryObj } from '@storybook/angular';
  import { AbstractControl, FormGroup } from '@angular/forms';
  
  // 明确声明组件story接收的参数类型
  interface CheckboxStoryArgs {
    id: string;
    label: string;
    checkboxAbstractControl: AbstractControl;
    parentFormGroup: FormGroup;
  }
  
  export const Default: StoryObj<CheckboxStoryArgs> = {
    render: (args) => ({
      props: args,
      template: `<app-checkbox [id]="id" [label]="label" [checkboxAbstractControl]="checkboxAbstractControl" [parentFormGroup]="parentFormGroup"></app-checkbox>`
    }),
    args: {
      id: 'checkbox1',
      label: 'Test Checkbox',
      checkboxAbstractControl: new FormControl(false),
      parentFormGroup: new FormGroup({})
    }
  };
  

• 通过argTypes补充文档说明，关闭无效的默认编辑控件
  这类复杂类实例无法通过Storybook默认的UI控件面板编辑，直接在argTypes中关闭对应参数的默认编辑器，同时补充参数描述，在自动生成的文档页中给使用者清晰的说明：

  Default.argTypes = {
    checkboxAbstractControl: {
      description: '绑定到复选框的响应式表单控件，类型为Angular的AbstractControl，一般传入FormControl实例',
      control: false,
    },
    parentFormGroup: {
      description: '复选框所属的响应式表单组，类型为Angular的FormGroup',
      control: false,
    }
  };
  

如果需要展示控件的不同状态（比如校验错误、禁用状态），直接新增独立的story变体，在变体中构造对应状态的表单实例即可，比占位符的展示效果更直观。

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