“Šī” konteksta TypeScript kļūdu labošana mantotos jonu/leņķa projektos ar RxJS

Saderības problēmu risināšana mantotās Angular lietojumprogrammās

Ja nesen esat notīrījis putekļus no vecāka Jonu/leņķa projekts un saskārāties ar neparedzētām TypeScript kļūdām, jūs neesat viens! 🛠️ Kļūdas, piemēram, ""šis" veida konteksts..." var būt īpaši mulsinoši ilgstoši lietotās lietojumprogrammās, kur nolietojums un API izmaiņas sarežģī izstrādes procesu.

Šajā rakstā mēs apskatīsim vienu no izplatītākajām problēmām, kas saistītas ar RxJS un TypeScript saderība, jo īpaši, ja tiek izmantotas neasinhronas funkcijas kontekstā, kurā tiek sagaidītas asinhronas funkcijas. Šādas neatbilstības bieži izraisa TypeScript kļūdas, kas var bloķēt būvējumus un apturēt izstrādes gaitu.

Mēs izpētīsim, kā pārvarēt šos TypeScript šķēršļus, izprast to cēloni un kopīgot paņēmienus, kā pielāgot RxJS kodu, palīdzot izvairīties no šīm kļūdām. Turklāt mēs izcelsim noderīgus rīkus VS kods kas var paātrināt jūsu darbplūsmu un padarīt atkļūdošanu vienkāršu.

Neatkarīgi no tā, vai vēlaties novērst problēmas vai gūt ieskatu mantotā koda atjaunināšanā, šī rokasgrāmata sniegs ieskatu un praktiskas darbības, kas nepieciešamas, lai ātri un efektīvi novērstu šīs TypeScript kļūdas. ⚙️

Izpratne par RxJS un TypeScript saderību mantotās leņķiskās lietojumprogrammās

Iepriekš minētie skripti attiecas uz konkrētu TypeScript kļūda bieži sastopams mantotos Angular projektos, izmantojot RxJS: "šis" tipa "..." konteksts nav attiecināms uz metodes "this" tipu. Šī kļūda parasti rodas, ja funkcijas, kas ir sinhronas vai kurām ir nenoteikts konteksts, tiek nodotas asinhronām metodēm, kā rezultātā TypeScript atzīmē neatbilstības karodziņu. Lai to atrisinātu, mēs izmantojam NgRx radītEfektu funkcija, kas pārvalda asinhrono loģiku, novērojot izmaiņas lietojumprogrammas stāvoklī un izpildot blakusparādības, reaģējot uz konkrētām darbībām. NgRx efekts pirmajā piemērā klausās par UPDATE_ORG_SUCCESS darbību, norādot, ka organizācijas dati ir atjaunināti, un pēc tam turpina iegūt atbilstošos izaicinājumu sarakstus un metrikas datus no Observables.

Šīs kļūdas novēršanas galvenā sastāvdaļa ir pareiza novērojumu apstrāde un tikai nepieciešamo datu apstrāde. Šim nolūkam apvienot Jaunāko tiek izmantots operators RxJS, kas ļauj mums iegūt jaunākās vērtības no vairākiem novērojamiem objektiem. Izmantojot combinLatest, efekts var pārraudzīt izmaiņas gan izaicinājumu sarakstā, gan metrikas datu plūsmās, aktivizējot efektu tikai tad, kad šīs vērtības tiek atjauninātas. Tas palīdz sinhronizēt datus un samazināt neparedzētas blakusparādības. Mēs arī izmantojam filtru operatoram, lai šajās plūsmās izslēgtu nulles vērtības, nodrošinot, ka nākamajam operatoram tiek nodoti tikai derīgi dati, kas ir būtiski lietojumprogrammām, kurās var būt datu neatbilstības.

Kad attiecīgie dati ir filtrēti, switchMap operators kartē šīs vērtības jaunā novērojamā, šajā gadījumā aktivizējot jaunu darbību, DataRetrieved. SwitchMap šajā kontekstā ir ļoti svarīgs, jo tas atceļ visus iepriekšējos datu straumju abonementus ikreiz, kad parādās jauna emisija, nodrošinot, ka Observable satur tikai jaunākās vērtības, izvairoties no atmiņas noplūdēm un neparedzētas darbības dinamiskās lietojumprogrammās. Šī RxJS operatoru ķēde ne tikai nodrošina, ka mūsu datu apstrāde ir efektīva, bet arī saglabā kodu modulāru, jo katrs transformācijas solis ir skaidri definēts. Kods saglabā lasāmību un uzticamību, kas ir būtiski veco kodu bāzu uzturēšanai.

Alternatīvā piemērā asinhronā/gaidīšanas sintakse tiek lietota novērojamajam cauruļvadam, pārveidojot datu straumes par solījumiem ar apsolīt. Šī pieeja palīdz izstrādātājiem apstrādāt asinhronās datu plūsmas, izmantojot asinhronās funkcijas, uzlabojot lasāmību un nodrošinot lielāku kļūdu apstrādes elastību. Turklāt mūsu vienību testēšanā ar Jasmine/Karma tiek izveidotas imitācijas darbības, izmantojot provideMockActions NgRx darbību simulēšanai un karsts un auksts novērojamie dati tiek izmantoti, lai atdarinātu reāllaika un buferizētās datu plūsmas. Šīs testēšanas utilītas ir svarīgas, lai pārbaudītu efektu darbību, nodrošinot, ka mūsu kods precīzi un paredzami apstrādā asinhronos notikumus dažādās vidēs. Šie rīki kopā padara šo risinājumu stabilu, efektīvu un labi piemērotu sarežģītai asinhronai stāvokļa pārvaldībai Angular lietojumprogrammās.

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

Uzlabotas metodes TypeScript konteksta kļūdu apstrādei Angular, izmantojot RxJS

Strādājot ar mantotajiem Angular projektiem, RxJS Observables konteksta pārvaldība var būt sarežģīta, jo īpaši ar sarežģītiem efektiem un asinhronu datu apstrādi. Šī problēma kļūst skaidrāka, strādājot ar TypeScript, jo stingra rakstīšana var izraisīt kļūdas, ja kontekstā 'šis' nav pareizi saglabāts funkciju izsaukumos. Viens veids, kā novērst šīs kļūdas, ir izmantot Angular saistīt operatoram vai izmantojot arrow functions, kas nerada savas 'šis' kontekstā. Bultiņu funkcijas RxJS kodā palīdz nodrošināt, ka “tas” pareizi atsaucas uz klases gadījumu, nevis uz funkcijas tvērumu, tādējādi samazinot bieži sastopamās kļūdas un padarot kodu paredzamāku.

Vēl viena pieeja ietver izmantošanu bind nododot funkcijas kā argumentus RxJS konveijerā. Kamēr bind bieži tiek saistīts ar JavaScript, tas var būt spēcīgs rīks, apstrādājot asinhronos datus programmā TypeScript, nodrošinot, ka tiek saglabāta pareizā “šī” atsauce. Turklāt, kartējot datus no vairākām straumēm, combineLatest un forkJoin var izmantot, lai sinhronizētu novērojamos datus, jo īpaši, ja viens novērojams balstās uz cita emitētajiem datiem. forkJoin, atšķirībā no CombinLatest, pirms vērtību izstarošanas gaida, līdz visi avota novērojamie elementi tiks pabeigti, padarot to paredzamāku gadījumos, kad katrs novērojams izstaro tikai vienu reizi.

Izstrādātājiem arī jāapsver iespēja izmantot VS Code extensions lai vienkāršotu atkļūdošanu, piemēram, TypeScript Hero vai Angular Language Service. Šie paplašinājumi palīdz koda navigācijā un kontekstam raksturīgos ieteikumos, kas ir nenovērtējami, pārveidojot vecākas lietojumprogrammas ar sarežģītām RxJS implementācijām. Paplašinājumi, piemēram, ESLint un TSLint, arī palīdz ieviest kodēšanas standartus, atzīmēt kļūdas reāllaikā un vadīt labojumus, kas ir noderīgi, apstrādājot “šī” konteksta kļūdas vai nesaderīgu tipu piešķiršanu. Šīs metodes un rīki kopā padara koda uzturēšanu mantotās Angular lietojumprogrammās ievērojami vienmērīgāku un samazina bieži sastopamās TypeScript problēmas.