Angular v18 labošana ar Storybook v8 TypeScript kļūdas: “ArgsStoryFn” tipa neatbilstības problēma

Veida kļūdu pārvarēšana, izmantojot EventEmitter stāstu grāmatā un Angular

TypeScript, Angular un Storybook ir spēcīgi rīki komponentu vadīta dizaina izveidei, taču dažkārt tie var sadurties neparedzētā veidā, it īpaši, ja TypeScript tipi kļūst sarežģīti. Nesen, strādājot ar Storybook v8.3.4 un Angular v18.2.6, es saskāros ar mulsinošu tipa kļūdu. 😕

Problēma parādījās, kad pievienoju an EventEmitter uz stāstu grāmatas stāstu Angular komponentam. Lai gan EventEmitter bija būtisks komponenta darbībai, Storybook iemeta tipa kļūdu, padarot neiespējamu stāsta vienmērīgu palaišanu. Tas bija apgrūtinošs šķērslis, jo kļūdas ziņojums ne tuvu nebija noderīgs, pieminot neatbilstību 'ArgsStoryFn' un nesaprotamu tipu hierarhiju.

Noņemot EventEmitter, kļūda tika novērsta, taču acīmredzot tas nebija iespējams risinājums. Pēc eksperimentēšanas es atklāju pagaidu risinājumu, mainot StoryObj ierakstiet "jebkurš". Tomēr šis risinājums šķita neveikls, un es gribēju saprast problēmas sakni. 🤔

Šajā rakstā mēs izpētīsim, kāpēc rodas šāda veida neatbilstība, un apskatīsim veidus, kā to efektīvi novērst. Mēs arī sniegsim dažus kodēšanas padomus, kas palīdzēs izvairīties no līdzīgām kļūdām, strādājot ar Storybook un Angular komponentiem, izmantojot TypeScript.

Izpratne par stāstu grāmatas TypeScript risinājumiem leņķisko komponentu problēmām

Iepriekš izveidotie skripti risina konkrētu problēmu ar EventEmitter raksti Storybook, strādājot ar Angular un TypeScript. Šī problēma bieži rodas, iekļaujot EventEmitter kā an @Izvade() sadaļā Angular komponenti un pēc tam mēģiniet tos parādīt Storybook — rīkā lietotāja saskarnes komponentu veidošanai. Veida neatbilstības kļūda rodas, jo Storybook rakstīšanas sistēma, jo īpaši ArgsStoryFn tips, ir pretrunā ar Angular tipiem. Pirmais risinājums izmanto TypeScript Daļēja tipa, ļaujot mums definēt renderēšanas funkcijas argumentus, neprasot iekļaut visus komponenta rekvizītus. Izmantojot Partial, Storybook var elastīgāk apstrādāt rekvizītus, īpaši pielāgotiem notikumiem, piemēram, EventEmitter. Piemēram, ja es vēlos pogas komponentu, kas izstaro klikšķa notikumu, daļēja izmantošana palīdz izvairīties no kļūdām, pat ja rekvizīti sākotnēji nav pilnībā ievadīti. 🎉

Otrais risinājums ievieš palīga funkciju, rokturisArgs, lai dinamiski apstrādātu rekvizītus pirms to nodošanas Storybook. Šī pieeja nodrošina, ka tiek nodoti tikai stāstā definētie rekvizīti (piemēram, šajā gadījumā EventEmitter), novēršot jebkādu tipu konfliktu no nedefinētiem vai nesaderīgiem veidiem. Šī palīga funkcija ir vērtīga arī, apstrādājot sarežģītus komponentus ar daudziem ligzdotiem vai izvēles rekvizītiem, jo ​​tā sniedz izstrādātājiem vienu punktu, lai pārbaudītu un pielāgotu Storybook argumentus, nepārveidojot pašu komponentu. Palīdzības funkcija izveido tīru un efektīvu tiltu starp Angular un Storybook, parādot, kā elastīgi risinājumi var vienkāršot komponentu integrāciju.

Trešajā pieejā mēs izmantojam TypeScript Izlaist ierakstiet, lai izslēgtu noteiktus rekvizītus, piemēram, EventEmitter, kas tieši nedarbojas ar Storybook noklusējuma rakstīšanu. Izlaižot nesaderīgus rekvizītus, mēs varam definēt pielāgotus aizvietotājus vai pievienot rekvizītu nosacīti, kā mēs to darījām, pārbaudot, vai EventEmitter ir vai nav. Šī pieeja ir ļoti izdevīga liela mēroga projektiem, kur komponenti ļoti atšķiras, jo mēs varam selektīvi izslēgt vai pielāgot rekvizītus, neietekmējot komponenta funkcionalitāti. Piemēram, tas ir noderīgi, parādot modālu komponentu Storybook, neinicializējot noteiktus notikumu aktivizētājus, tādējādi atvieglojot koncentrēšanos uz vizuālajiem elementiem, neuztraucoties par tipu konfliktiem.

Visbeidzot, vienības testi ir būtiski, lai pārbaudītu katra risinājuma noturību. Vienības testi, izmantojot Jest's gaidīt funkcija apstiprina, ka EventEmitter rekvizīti ir pareizi piešķirti un darbojas, pārliecinoties, ka Storybook stāsti darbojas kā paredzēts un komponenti tiek renderēti bez kļūdām. Šie testi ir lieliski piemēroti arī turpmāku problēmu novēršanai, jo īpaši, ja jūsu komanda pievieno vai atjaunina komponentus. Piemēram, testi var apstiprināt pielāgota nolaižamā komponenta darbību, pārbaudot, vai komponents aktivizē konkrētus notikumus vai precīzi parāda opcijas, sniedzot izstrādātājiem pārliecību par komponenta integritāti. Izmantojot šos modulāros risinājumus un rūpīgu testēšanu, varat nevainojami pārvaldīt sarežģītas lietotāja saskarnes mijiedarbības, nodrošinot nevainojamu pieredzi gan izstrādes, gan testēšanas vidēs. 🚀

import { Meta, StoryObj } from '@storybook/angular';
import { EventEmitter } from '@angular/core';
import MyComponent from './my-component.component';
// Set up the meta configuration for Storybook
const meta: Meta<MyComponent> = {
  title: 'MyComponent',
  component: MyComponent
};
export default meta;
// Define Story type using MyComponent while maintaining types
type Story = StoryObj<Meta<MyComponent>>;
// Approach: Wrapper function to handle EventEmitter without type errors
export const Basic: Story = {
  render: (args: Partial<MyComponent>) => ({
    props: {
      ...args,
      someEvent: new EventEmitter<any>()
    }
  }),
  args: {}
};
// Unit Test to verify the EventEmitter renders correctly in Storybook
describe('MyComponent Story', () => {
  it('should render without type errors', () => {
    const emitter = new EventEmitter<any>();
    expect(emitter.observers).toBeDefined();
  });
});

import { Meta, StoryObj } from '@storybook/angular';
import MyComponent from './my-component.component';
import { EventEmitter } from '@angular/core';
// Set up Storybook metadata for the component
const meta: Meta<MyComponent> = {
  title: 'MyComponent',
  component: MyComponent
};
export default meta;
// Wrapper function for Story args handling
function handleArgs(args: Partial<MyComponent>): Partial<MyComponent> {
  return { ...args, someEvent: new EventEmitter<any>() };
}
// Define story with helper function
export const Basic: StoryObj<Meta<MyComponent>> = {
  render: (args) => ({
    props: handleArgs(args)
  }),
  args: {}
};
// Unit test for the EventEmitter wrapper function
describe('handleArgs function', () => {
  it('should attach an EventEmitter to args', () => {
    const result = handleArgs({});
    expect(result.someEvent).toBeInstanceOf(EventEmitter);
  });
});

import { Meta, StoryObj } from '@storybook/angular';
import { EventEmitter } from '@angular/core';
import MyComponent from './my-component.component';
// Define a custom type to match Storybook expectations
type MyComponentArgs = Omit<MyComponent, 'someEvent'> & {
  someEvent?: EventEmitter<any>;
};
// Set up Storybook meta
const meta: Meta<MyComponent> = {
  title: 'MyComponent',
  component: MyComponent
};
export default meta;
// Define the story using custom argument type
export const Basic: StoryObj<Meta<MyComponentArgs>> = {
  render: (args: MyComponentArgs) => ({
    props: { ...args, someEvent: args.someEvent || new EventEmitter<any>() }
  }),
  args: {}
};
// Test to verify custom types and event behavior
describe('MyComponent with Custom Types', () => {
  it('should handle MyComponentArgs without errors', () => {
    const event = new EventEmitter<any>();
    const result = { ...event };
    expect(result).toBeDefined();
  });
});

Iedziļināties TypeScript saderībā ar stāstu grāmatu un leņķiskajiem komponentiem

TypeScript projektos, kas ietver Stāstu grāmata un Leņķisks, komponentu stāstu izveide kļūst sarežģīta, ja ir iesaistīti EventEmitters. Lai gan Storybook nodrošina efektīvu platformu lietotāja interfeisa izstrādei, tās integrēšana ar Angular sarežģītajiem ierakstiem var radīt unikālas problēmas. Lietojot Angular's, bieži rodas tipa kļūdas @Output() Notikumu izstarotāji stāstos, jo TypeScript veidi starp Angular un Storybook ne vienmēr sakrīt. Šī problēma ir pastiprināta programmā TypeScript, kur ir Storybook's ArgsStoryFn tips var sagaidīt rekvizītus, kas atšķiras no Angular prasībām. Lai efektīvi apstrādātu šos veidus, bieži ir vajadzīgas tādas stratēģijas kā pielāgoti tipi vai palīgfunkcijas, kas var palīdzēt Storybook labāk “izprast” leņķiskās sastāvdaļas. 🛠️

Viena efektīva pieeja ir tipu saderības pielāgošana, izmantojot TypeScript uzlabotos veidus, piemēram Omit un Partial, kas ļauj izstrādātājiem kontrolēt noteiktu veidu izslēgšanu vai iekļaušanu. Piemēram, Omit var noņemt rekvizītus, kas izraisa konfliktus, piemēram, an EventEmitter, vienlaikus ļaujot stāstam precīzi atveidot pārējo komponentu. Alternatīvi, izmantojot Partial ļauj izstrādātājiem padarīt katru komponenta īpašumu neobligātu, sniedzot Storybook lielāku elastību, kā tas apstrādā komponentu rekvizītus. Šie rīki ir noderīgi izstrādātājiem, kuri bieži strādā ar lietotāja interfeisa komponentiem, kuriem ir dinamiski notikumi un kuri ir būtiski, lai līdzsvarotu funkcionalitāti ar vienmērīgu stāsta attīstību.

Visbeidzot, visaptverošu testu pievienošana nodrošina, ka pielāgotie veidi un risinājumi darbojas kā paredzēts visās izstrādes vidēs. Izmantojot vienību testēšanas sistēmas, piemēram, Jest vai Jasmine, testi var apstiprināt katra veida korekciju, apstiprināt, ka emitētie notikumi tiek pareizi apstrādāti, un pārbaudīt, vai komponenti darbojas, kā paredzēts Storybook. Šie testi novērš negaidītas tipa kļūdas, padarot izstrādi paredzamāku un mērogojamāku. Piemēram, pārbaudot veidlapas komponenta iesniegšanas notikumu Storybook, varat pārbaudīt, vai lietotāja mijiedarbība pareizi aktivizē EventEmitter, piedāvājot gan izstrādes efektivitāti, gan labāku lietotāja pieredzi. 🚀