ஸ்டோரிபுக் v8 டைப்ஸ்கிரிப்ட் பிழைகளுடன் கோண v18 ஐ சரிசெய்தல்: 'ArgsStoryFn' வகை பொருந்தாத சிக்கல்

கதைப்புத்தகம் மற்றும் கோணத்தில் EventEmitter மூலம் வகைப் பிழைகளை சமாளித்தல்

டைப்ஸ்கிரிப்ட், ஆங்குலர் மற்றும் ஸ்டோரிபுக் ஆகியவை கூறு-உந்துதல் வடிவமைப்பை உருவாக்குவதற்கான சக்திவாய்ந்த கருவிகள், ஆனால் அவை சில நேரங்களில் எதிர்பாராத வழிகளில் மோதலாம், குறிப்பாக டைப்ஸ்கிரிப்ட் வகைகள் சிக்கலானதாக இருக்கும்போது. சமீபத்தில், Storybook v8.3.4 மற்றும் Angular v18.2.6 ஆகியவற்றுடன் பணிபுரியும் போது ஒரு குழப்பமான வகைப் பிழையை எதிர்கொண்டேன். 😕

நான் ஒன்றைச் சேர்த்தபோது சிக்கல் எழுந்தது நிகழ்வு எமிட்டர் ஒரு கோணக் கூறுக்கான கதைப்புத்தகக் கதைக்கு. கூறுகளின் நடத்தைக்கு EventEmitter இன்றியமையாததாக இருந்தாலும், ஸ்டோரிபுக் ஒரு வகை பிழையை ஏற்படுத்தியது, இதனால் கதையை சீராக இயக்க முடியவில்லை. 'ArgsStoryFn' உடன் பொருந்தாமை மற்றும் புரிந்துகொள்ள முடியாத வகைப் படிநிலை ஆகியவற்றைக் குறிப்பிட்டு, பிழைச் செய்தி உதவிகரமாக இல்லாததால், இது ஒரு வெறுப்பூட்டும் தடையாக இருந்தது.

EventEmitter ஐ அகற்றுவது பிழையைத் தீர்த்தது, ஆனால் வெளிப்படையாக, அது ஒரு சாத்தியமான தீர்வு அல்ல. பரிசோதனைக்குப் பிறகு, மாற்றுவதன் மூலம் ஒரு தற்காலிக தீர்வைக் கண்டுபிடித்தேன் StoryObj 'ஏதேனும்' என தட்டச்சு செய்யவும். இருப்பினும், இந்த தீர்வு விகாரமாக உணர்ந்தேன், மேலும் பிரச்சினையின் மூலத்தை நான் புரிந்து கொள்ள விரும்பினேன். 🤔

இந்தக் கட்டுரையில், ஏன் இந்த வகைப் பொருத்தமின்மை ஏற்படுகிறது என்பதை ஆராய்ந்து, அதைத் திறம்பட சரிசெய்வதற்கான வழிகளைக் காண்போம். டைப்ஸ்கிரிப்டைப் பயன்படுத்தி ஸ்டோரிபுக் மற்றும் கோணக் கூறுகளுடன் பணிபுரியும் போது இதுபோன்ற பிழைகளைத் தவிர்க்க உதவும் சில குறியீட்டு உதவிக்குறிப்புகளையும் நாங்கள் வழங்குவோம்.

கோணக் கூறு சிக்கல்களுக்கான கதைப்புத்தக டைப்ஸ்கிரிப்ட் தீர்வுகளைப் புரிந்துகொள்வது

மேலே உருவாக்கப்பட்ட ஸ்கிரிப்டுகள் ஒரு குறிப்பிட்ட சிக்கலைக் குறிக்கின்றன நிகழ்வு எமிட்டர் Angular மற்றும் TypeScript உடன் பணிபுரியும் போது Storybook இல் உள்ள வகைகளை. நாம் EventEmitter ஐ சேர்க்கும்போது இந்தச் சிக்கல் அடிக்கடி எழுகிறது @அவுட்புட்() கோணக் கூறுகளில், பின்னர் UI கூறுகளை உருவாக்குவதற்கான ஒரு கருவியான Storybook இல் அவற்றைக் காட்ட முயற்சிக்கவும். ஸ்டோரிபுக்கின் தட்டச்சு முறை, குறிப்பாக ArgsStoryFn வகை, கோணத்தின் வகைகளுடன் முரண்படுவதால் வகை பொருந்தாத பிழை ஏற்படுகிறது. முதல் தீர்வு TypeScript ஐப் பயன்படுத்துகிறது பகுதி வகை, அனைத்து கூறு பண்புகளையும் சேர்க்க வேண்டிய அவசியமின்றி, ரெண்டர் செயல்பாட்டிற்கான வாதங்களை வரையறுக்க அனுமதிக்கிறது. பகுதியலைப் பயன்படுத்துவதன் மூலம், ஸ்டோரிபுக் முட்டுகளை மிகவும் நெகிழ்வாகக் கையாள முடியும், குறிப்பாக EventEmitter போன்ற தனிப்பயன் நிகழ்வுகளுக்கு. எடுத்துக்காட்டாக, ஒரு கிளிக் நிகழ்வை வெளியிடும் பொத்தான் கூறுகளை நான் விரும்பினால், ஆரம்பத்தில் முட்டுகள் முழுமையாக தட்டச்சு செய்யப்படாவிட்டாலும், பகுதியலைப் பயன்படுத்துவது பிழைகளைத் தவிர்க்க உதவும். 🎉

இரண்டாவது தீர்வு ஒரு உதவி செயல்பாட்டை அறிமுகப்படுத்துகிறது, handArgs, பண்புகளை ஸ்டோரிபுக்கிற்கு அனுப்பும் முன் அவற்றை மாறும் வகையில் கையாள. இந்த அணுகுமுறை கதையில் வரையறுக்கப்பட்ட பண்புகள் மட்டுமே (இந்த வழக்கில் EventEmitter போன்றவை) அனுப்பப்படுவதை உறுதிசெய்கிறது. பல உள்ளமைக்கப்பட்ட அல்லது விருப்பமான பண்புகளைக் கொண்ட சிக்கலான கூறுகளைக் கையாளும் போது இந்த உதவியாளர் செயல்பாடு மதிப்புமிக்கது, ஏனெனில் இது டெவலப்பர்களுக்கு கூறுகளை மாற்றாமல் ஸ்டோரிபுக்கிற்கான வாதங்களை சரிபார்த்து சரிசெய்ய ஒரு புள்ளியை வழங்குகிறது. ஹெல்பர் செயல்பாடு கோண மற்றும் ஸ்டோரிபுக் இடையே ஒரு சுத்தமான மற்றும் திறமையான பாலத்தை உருவாக்குகிறது, நெகிழ்வான தீர்வுகள் கூறு ஒருங்கிணைப்பை எவ்வாறு எளிதாக்குகிறது என்பதைக் காட்டுகிறது.

மூன்றாவது அணுகுமுறையில், நாம் TypeScript ஐப் பயன்படுத்துகிறோம் தவிர்க்கவும் ஸ்டோரிபுக்கின் இயல்புநிலை தட்டச்சுடன் நேரடியாக வேலை செய்யாத EventEmitter போன்ற சில பண்புகளை விலக்க தட்டச்சு செய்யவும். பொருந்தாத பண்புகளைத் தவிர்ப்பதன் மூலம், EventEmitter உள்ளதா இல்லையா என்பதைச் சரிபார்த்து, நாங்கள் தனிப்பயன் மாற்றீடுகளை வரையறுக்கலாம் அல்லது நிபந்தனையுடன் சொத்தை சேர்க்கலாம். கூறுகள் முழுவதும் பண்புகள் பரவலாக மாறுபடும் பெரிய அளவிலான திட்டங்களுக்கு இந்த அணுகுமுறை மிகவும் பயனுள்ளதாக இருக்கும், ஏனெனில் நாம் கூறுகளின் செயல்பாட்டை பாதிக்காமல் பண்புகளைத் தேர்ந்தெடுத்து விலக்கலாம் அல்லது தனிப்பயனாக்கலாம். எடுத்துக்காட்டாக, ஸ்டோரிபுக்கில் ஒரு மாதிரியான கூறுகளை சில நிகழ்வு தூண்டுதல்களைத் தொடங்காமல் காண்பிக்கும் போது இது பயனுள்ளதாக இருக்கும், இது வகை முரண்பாடுகளைப் பற்றி கவலைப்படாமல் காட்சி கூறுகளில் கவனம் செலுத்துவதை எளிதாக்குகிறது.

கடைசியாக, ஒவ்வொரு தீர்வின் உறுதியையும் சரிபார்க்க அலகு சோதனைகள் அவசியம். Jest ஐப் பயன்படுத்தி அலகு சோதனைகள் எதிர்பார்க்கிறார்கள் EventEmitter பண்புகள் சரியாக ஒதுக்கப்பட்டு செயல்படுகின்றன என்பதை செயல்பாடு உறுதிப்படுத்துகிறது, ஸ்டோரிபுக் கதைகள் நோக்கம் கொண்டதாக செயல்படுவதையும் கூறுகள் பிழையின்றி வழங்குவதையும் உறுதி செய்கிறது. இந்தச் சோதனைகள் எதிர்காலச் சிக்கல்களைத் தடுப்பதற்கும் சிறந்தவை, குறிப்பாக உங்கள் குழு கூறுகளைச் சேர்க்கும் அல்லது புதுப்பிக்கும் போது. எடுத்துக்காட்டாக, சோதனைகள், தனிப்பயன் கீழ்தோன்றும் கூறுகளின் நடத்தையை உறுதிப்படுத்தலாம், கூறு குறிப்பிட்ட நிகழ்வுகளைத் தூண்டுகிறதா அல்லது விருப்பங்களைத் துல்லியமாகக் காண்பிக்கிறதா என்பதைச் சரிபார்த்து, டெவலப்பர்களுக்கு கூறுகளின் ஒருமைப்பாட்டின் மீது நம்பிக்கையை அளிக்கிறது. இந்த மாடுலர் தீர்வுகள் மற்றும் முழுமையான சோதனையைப் பயன்படுத்துவதன் மூலம், சிக்கலான UI இடைவினைகளை நீங்கள் சீராக நிர்வகிக்கலாம், மேம்பாடு மற்றும் சோதனை சூழல்கள் இரண்டிலும் தடையற்ற அனுபவத்தை உறுதிசெய்யலாம். 🚀

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();
  });
});

ஸ்டோரிபுக் மற்றும் கோணக் கூறுகளுடன் டைப்ஸ்கிரிப்ட் இணக்கத்தன்மையை ஆராய்தல்

டைப்ஸ்கிரிப்ட் திட்டங்களில் சம்பந்தப்பட்டது கதைப்புத்தகம் மற்றும் கோணல், EventEmitters ஈடுபடும்போது கூறு கதைகளை உருவாக்குவது தந்திரமானது. ஸ்டோரிபுக் UI மேம்பாட்டிற்கான திறமையான தளத்தை வழங்கும் அதே வேளையில், கோணத்தின் சிக்கலான தட்டச்சுகளுடன் அதை ஒருங்கிணைப்பது தனித்துவமான சவால்களை முன்வைக்கும். கோணத்தைப் பயன்படுத்தும் போது வகைப் பிழைகள் அடிக்கடி ஏற்படும் @Output() ஆங்குலர் மற்றும் ஸ்டோரிபுக் இடையே உள்ள டைப்ஸ்கிரிப்ட் வகைகள் எப்போதும் சீரமையாததால், கதைகளில் EventEmitters. ஸ்டோரிபுக்கில் உள்ள டைப்ஸ்கிரிப்ட்டில் இந்த சிக்கல் பெருக்கப்படுகிறது ArgsStoryFn கோணத்தின் தேவைகளிலிருந்து வேறுபட்ட முட்டுக்கட்டைகளை வகை எதிர்பார்க்கலாம். இந்த வகைகளை திறம்பட கையாள்வதற்கு பெரும்பாலும் தனிப்பயன் வகைகள் அல்லது உதவி செயல்பாடுகள் போன்ற உத்திகள் தேவைப்படுகிறது, இது ஸ்டோரிபுக்கிற்கு கோண கூறுகளை சிறப்பாக "புரிந்துகொள்ள" உதவும். 🛠️

டைப்ஸ்கிரிப்ட்டின் மேம்பட்ட வகைகளைப் பயன்படுத்தி வகை இணக்கத்தன்மையைத் தனிப்பயனாக்குவது ஒரு பயனுள்ள அணுகுமுறை Omit மற்றும் Partial, இவை இரண்டும் டெவலப்பர்களுக்கு குறிப்பிட்ட வகை விலக்குகள் அல்லது சேர்த்தல்களின் மீது கட்டுப்பாட்டை வழங்குகின்றன. உதாரணமாக, Omit போன்ற முரண்பாடுகளை ஏற்படுத்தும் பண்புகளை நீக்க முடியும் EventEmitter, மீதமுள்ள கூறுகளை துல்லியமாக வழங்க கதையை அனுமதிக்கும் போது. மாற்றாக, பயன்படுத்தி Partial டெவலப்பர்கள் ஒவ்வொரு கூறு சொத்துக்களையும் விருப்பமானதாக மாற்ற உதவுகிறது, ஸ்டோரிபுக் கூறுகளை எவ்வாறு கையாளுகிறது என்பதில் அதிக நெகிழ்வுத்தன்மையை அளிக்கிறது. டைனமிக் நிகழ்வுகளைக் கொண்ட UI கூறுகளுடன் அடிக்கடி பணிபுரியும் டெவலப்பர்களுக்கு இந்தக் கருவிகள் உதவியாக இருக்கும்.

இறுதியாக, விரிவான சோதனைகளைச் சேர்ப்பதன் மூலம் தனிப்பயன் வகைகள் மற்றும் தீர்வுகள் வளர்ச்சிச் சூழல்கள் முழுவதும் செயல்படுவதை உறுதி செய்கிறது. ஜெஸ்ட் அல்லது ஜாஸ்மின் போன்ற யூனிட் டெஸ்டிங் ஃப்ரேம்வொர்க்குகளைப் பயன்படுத்தி, சோதனைகள் ஒவ்வொரு வகை சரிசெய்தலையும் சரிபார்க்கலாம், உமிழப்படும் நிகழ்வுகள் சரியாகக் கையாளப்படுகின்றன என்பதை உறுதிப்படுத்தலாம் மற்றும் ஸ்டோரிபுக்கில் எதிர்பார்த்தபடி கூறுகள் செயல்படுகின்றனவா என்பதைச் சரிபார்க்கலாம். இந்த சோதனைகள் எதிர்பாராத வகை பிழைகளைத் தடுக்கின்றன, மேலும் வளர்ச்சியை மேலும் கணிக்கக்கூடியதாகவும் அளவிடக்கூடியதாகவும் ஆக்குகிறது. எடுத்துக்காட்டாக, ஸ்டோரிபுக்கில் படிவக் கூறுகளின் சமர்ப்பிப்பு நிகழ்வைச் சோதிப்பதன் மூலம், பயனர் தொடர்புகள் EventEmitter ஐ சரியாகத் தூண்டுகின்றன என்பதை நீங்கள் சரிபார்க்கலாம், இது வளர்ச்சித் திறன் மற்றும் சிறந்த பயனர் அனுபவத்தை வழங்குகிறது. 🚀