„Šio“ konteksto „TypeScript“ klaidų taisymas senuosiuose joniniuose / kampiniuose projektuose naudojant RxJS

Suderinamumo iššūkių sprendimas senose Angular programose

Jei neseniai nuvalėte dulkes nuo senesnio Joninis / kampinis projektas ir susidūrėte su netikėtomis „TypeScript“ klaidomis, jūs ne vieni! 🛠️ Klaidos kaip "„šio“ tipo kontekstas...“ gali būti ypač klaidinantis seniai veikiančiose programose, kur naudojimo nutraukimas ir API pakeitimai apsunkina kūrimo procesą.

Šiame straipsnyje mes pasinersime į vieną iš dažniausiai pasitaikančių problemų, susijusių su RxJS ir TypeScript suderinamumas, ypač naudojant neasinchronines funkcijas kontekstuose, kuriuose tikimasi asinchroninių. Dėl tokių neatitikimų dažnai atsiranda „TypeScript“ klaidų, kurios gali blokuoti kūrimą ir sustabdyti kūrimo eigą.

Išnagrinėsime, kaip įveikti šias „TypeScript“ kliūtis, suprasti pagrindinę priežastį ir pasidalinti metodais, kaip koreguoti RxJS kodą, kad išvengtumėte šių klaidų. Be to, paryškinsime naudingus įrankius VS kodas kurie gali pagreitinti jūsų darbo eigą ir padaryti derinimą lengvai.

Nesvarbu, ar norite išspręsti problemas, ar gauti įžvalgų apie senojo kodo atnaujinimą, šiame vadove rasite įžvalgų ir praktinių veiksmų, kurių reikia norint greitai ir efektyviai išspręsti šias „TypeScript“ klaidas. ⚙️

RxJS ir TypeScript suderinamumo supratimas senose Angular programose

Aukščiau pateikti scenarijai yra skirti konkrečiai TypeScript klaida dažnai pasitaiko senuose Angular projektuose, kai naudojamas RxJS: „šis“ kontekstas, kurio tipas „...“, nepriskiriamas metodo „šio“ tipui. Ši klaida paprastai įvyksta, kai funkcijos, kurios yra sinchroninės arba turi neapibrėžtą kontekstą, perkeliamos į asinchroninius metodus, todėl „TypeScript“ pažymi neatitikimą. Norėdami tai išspręsti, naudojame NgRx sukurti efektą funkcija, kuri valdo asinchroninę logiką, stebėdama programos būsenos pokyčius ir vykdydama šalutinį poveikį, reaguodama į konkrečius veiksmus. Pirmajame pavyzdyje esantis NgRx efektas klausosi UPDATE_ORG_SUCCESS veiksmą, signalizuojant, kad organizacijos duomenys buvo atnaujinti, ir tada imama atitinkamų iššūkių sąrašų ir metrikos duomenų iš Observables.

Pagrindinė šios klaidos sprendimo dalis yra tinkamas stebėjimų tvarkymas ir tik būtinų duomenų apdorojimas. Tam, sujungti Naujausias naudojamas operatorius RxJS, leidžiantis paimti naujausias reikšmes iš kelių stebimų objektų. Naudojant combinLatest, efektas gali stebėti iššūkių sąrašo ir metrikos duomenų srautų pokyčius, suaktyvindamas poveikį tik tada, kai šios reikšmės atnaujinamos. Tai padeda sinchronizuoti duomenis ir sumažinti nepageidaujamą šalutinį poveikį. Mes taip pat naudojame filtras operatorius neįtrauktų nulinių verčių šiuose srautuose, užtikrinant, kad kitam operatoriui būtų perduoti tik galiojantys duomenys, o tai būtina programoms, kuriose gali būti duomenų neatitikimų.

Išfiltravus atitinkamus duomenis, switchMap operatorius susieja šias reikšmes į naują stebimą, šiuo atveju suaktyvina naują veiksmą, DataRetrieved. Šiame kontekste „SwitchMap“ yra labai svarbus, nes jis atšaukia bet kokias ankstesnes duomenų srautų prenumeratas, kai tik atsiranda nauja emisija, užtikrindama, kad „Oservable“ išlaikytų tik naujausias vertes, išvengiant atminties nutekėjimo ir nenumatytų veiksmų dinaminėse programose. Ši RxJS operatorių grandinė ne tik užtikrina, kad mūsų duomenų tvarkymas būtų efektyvus, bet ir išlaiko kodą modulinį, nes kiekvienas transformacijos žingsnis yra aiškiai apibrėžtas. Kodas palaiko skaitomumą ir patikimumą, o tai būtina norint išlaikyti senas kodų bazes.

Alternatyviame pavyzdyje asinchronizavimo / laukimo sintaksė taikoma stebimam konvejeriui konvertuojant duomenų srautus į pažadus su pažadėti. Šis metodas padeda kūrėjams tvarkyti asinchroninius duomenų srautus naudojant asinchronines funkcijas, pagerina skaitymo galimybes ir suteikia daugiau lankstumo tvarkant klaidas. Be to, atliekant vienetų testavimą su Jasmine/Karma, imitaciniai veiksmai sukuriami naudojant teiktiMockActions NgRx veiksmams imituoti ir karšta ir šalta stebimi duomenys naudojami imituojant realaus laiko ir buferinių duomenų srautus. Šios testavimo priemonės yra labai svarbios norint patikrinti efektų veikimą ir užtikrinti, kad mūsų kodas tiksliai ir nuspėjamai apdorotų asinchroninius įvykius įvairiose aplinkose. Dėl šių įrankių šis sprendimas yra tvirtas, efektyvus ir puikiai tinka sudėtingam asinchroniniam būsenos valdymui kampinėse programose.

import { Injectable } from '@angular/core';
import { Actions, ofType, createEffect } from '@ngrx/effects';
import { Observable, combineLatest, of } from 'rxjs';
import { switchMap, map, filter } from 'rxjs/operators';
import * as orgActions from './actions/orgActions';
import * as dataActions from './actions/dataActions';
@Injectable()
export class OrgEffects {
  constructor(private actions$: Actions,
              private dataChallenge: DataChallengeService,
              private dataMetric: DataMetricService) {}
  orgChangedSuccess$ = createEffect(() =>
    this.actions$.pipe(
      ofType(orgActions.UPDATE_ORG_SUCCESS),
      switchMap((org) => combineLatest([
        this.dataChallenge.challengeList$.pipe(filter(val => val !== null)),
        this.dataMetric.metrics$.pipe(filter(val => val !== null))
      ])
      .pipe(
        map(([challengeList, metrics]) =>
          new dataActions.DataRetrieved({ challengeList, metrics })
        )
      )
    ))
  );
}

import { Injectable } from '@angular/core';
import { Actions, ofType, createEffect } from '@ngrx/effects';
import { Observable, combineLatest, from } from 'rxjs';
import { switchMap, map, filter } from 'rxjs/operators';
import * as orgActions from './actions/orgActions';
import * as dataActions from './actions/dataActions';
@Injectable()
export class OrgEffects {
  constructor(private actions$: Actions,
              private dataChallenge: DataChallengeService,
              private dataMetric: DataMetricService) {}
  orgChangedSuccess$ = createEffect(() =>
    this.actions$.pipe(
      ofType(orgActions.UPDATE_ORG_SUCCESS),
      switchMap(async (org) => {
        const challengeList = await from(this.dataChallenge.challengeList$).pipe(filter(val => val !== null)).toPromise();
        const metrics = await from(this.dataMetric.metrics$).pipe(filter(val => val !== null)).toPromise();
        return new dataActions.DataRetrieved({ challengeList, metrics });
      })
    )
  );
}

import { TestBed } from '@angular/core/testing';
import { provideMockActions } from '@ngrx/effects/testing';
import { cold, hot } from 'jasmine-marbles';
import { Observable } from 'rxjs';
import { OrgEffects } from './org.effects';
import * as orgActions from './actions/orgActions';
import * as dataActions from './actions/dataActions';
describe('OrgEffects', () => {
  let actions$: Observable<any>;
  let effects: OrgEffects;
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        OrgEffects,
        provideMockActions(() => actions$)
      ]
    });
    effects = TestBed.inject(OrgEffects);
  });
  it('should dispatch DataRetrieved action when UPDATE_ORG_SUCCESS is triggered', () => {
    const action = orgActions.UPDATE_ORG_SUCCESS();
    const outcome = new dataActions.DataRetrieved({ challengeList: [], metrics: [] });
    actions$ = hot('-a', { a: action });
    const expected = cold('-b', { b: outcome });
    expect(effects.orgChangedSuccess$).toBeObservable(expected);
  });
});

Išplėstinė „TypeScript“ konteksto klaidų tvarkymo naudojant RxJS metodus Angular

Kalbant apie senus Angular projektus, RxJS Observables konteksto valdymas gali būti sudėtingas, ypač sudėtingų efektų ir asinchroninio duomenų tvarkymo atveju. Ši problema išryškėja dirbant su „TypeScript“, nes griežtas spausdinimas gali sukelti klaidų, jei kontekstas 'tai' nėra tinkamai išsaugotas funkcijų skambučiuose. Vienas iš būdų išspręsti šias klaidas yra naudoti Angular's surišti operatoriui arba naudojant arrow functions, kurios nekuria savo 'tai' kontekste. Rodyklės funkcijos RxJS kode padeda užtikrinti, kad „tai“ teisingai nurodytų klasės egzempliorių, o ne funkcijos apimtį, taip sumažinant dažnas klaidas ir daront kodą nuspėjamesnį.

Kitas būdas apima naudojimą bind perduodant funkcijas kaip argumentus RxJS konvejeryje. Nors bind dažnai siejamas su „JavaScript“, tai gali būti galingas įrankis tvarkant asinchroninius duomenis „TypeScript“, užtikrinant, kad būtų išsaugota teisinga „šios“ nuoroda. Be to, kai atvaizduojate duomenis iš kelių srautų, combineLatest ir forkJoin gali būti naudojamas stebimiems dalykams sinchronizuoti, ypač kai vienas stebimasis remiasi kito siunčiamais duomenimis. forkJoin, priešingai nei „combinLatest“, laukia, kol visi šaltinio stebimi objektai bus baigti, prieš išskirdami vertes, todėl tai lengviau nuspėjama tais atvejais, kai kiekvienas stebimasis skleidžia tik vieną kartą.

Kūrėjai taip pat turėtų apsvarstyti galimybę naudoti VS Code extensions siekiant supaprastinti derinimą, pvz., TypeScript Hero arba Angular Language Service. Šie plėtiniai padeda naršyti kodą ir teikti su kontekstu susijusius pasiūlymus, kurie yra neįkainojami atkuriant senesnes programas su sudėtingais RxJS diegimais. Plėtiniai, tokie kaip ESLint ir TSLint, taip pat padeda užtikrinti kodavimo standartų vykdymą, žymėti klaidas realiuoju laiku ir nukreipti pataisymus, o tai naudinga sprendžiant „šio“ konteksto klaidas arba nesuderinamų tipų priskyrimus. Kartu dėl šių metodų ir įrankių kodo priežiūra senose Angular programose žymiai sklandesnė ir sumažinamos dažniausios „TypeScript“ problemos.