Webarbeider i TypeScript

Denne artikkelen forklarer webarbeidere i TypeScript.

Du kan lære om konseptet med Web Workers og ulike brukstips med eksempler.

YouTube Video

Arbeider i TypeScript

I TypeScript er en Worker en mekanisme for å utføre behandling i bakgrunnen, adskilt fra hovedtråden, ved bruk av JavaScript Web Workers API. Dette gjør det mulig å utføre tunge beregninger og asynkrone oppgaver uten å påvirke bruken av brukergrensesnittet.

En Worker opererer parallelt med hovedtråden (UI-tråden) og kan utveksle data mellom tråder via meldinger. Selv i TypeScript kan du bruke Worker mens du skriver typesikker kode.

Grunnleggende bruk av arbeider

1. Opprette en arbeidstråd

   Opprett en Worker-instans og kjør det spesifiserte skriptet. Vanligvis er skriptet definert i en separat fil.

2. Meldingsutveksling

   Send og motta meldinger mellom hovedtråden og Worker-tråden ved bruk av postMessage og onmessage.

Eksempel: Grunnleggende implementering av arbeidstråd

1. worker.ts: Skript for arbeidstråd

1// worker.ts
2self.onmessage = (event) => {
3    const data = event.data;
4    const result = data.num1 + data.num2;
5    self.postMessage(result); // Return the result to the main thread
6};

2. main.ts: Skript for å bruke arbeider i hovedtråd

 1// main.ts
 2const worker = new Worker(
 3    new URL('./worker.ts', import.meta.url),
 4    { type: 'module' }
 5);
 6
 7worker.onmessage = (event) => {
 8    console.log("Result from worker:", event.data); // Receive message from the worker
 9};
10
11worker.postMessage({ num1: 10, num2: 20 }); // Send message to the worker

• I dette eksemplet kjører worker.ts i en separat tråd, beregner summen av num1 og num2, og returnerer den til hovedtråden. Hovedtråden mottar resultatet og skriver det ut til konsollen.
• Når du spesifiserer type: 'module', tolkes Worker-skriptet som en ES-modul, slik at du kan bruke import og export. Dette gjør at du kan håndtere modulstrukturer uten å bruke den tradisjonelle importScripts().

Viktige punkter å vurdere når du bruker arbeidere i TypeScript

Legge til typedefinisjoner

I TypeScript, definer datatyper for å sikre typesikker interaksjon under meldingssending og -mottak.

 1// Define data types
 2interface WorkerData {
 3    num1: number;
 4    num2: number;
 5}
 6
 7interface WorkerResult {
 8    result: number;
 9}
10
11// worker.ts
12self.onmessage = (event: MessageEvent<WorkerData>) => {
13    const data = event.data;
14    const result = data.num1 + data.num2;
15    const message: WorkerResult = { result };
16    self.postMessage(message); // Send the result in a type-safe manner
17};
18
19// main.ts
20const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
21
22// Type the event from the worker
23worker.onmessage = (event: MessageEvent<WorkerResult>) => {
24  console.log("Result from worker:", event.data); // event.data is number
25};
26
27// Send typed data to the worker
28const message: WorkerData = { num1: 10, num2: 20 };
29worker.postMessage(message);

• Ved å spesifisere typeparameteren til MessageEvent kan du klart definere typen av data som skal mottas. Dette gjør at data kan utveksles med typesikkerhet.

Konfigurere Webpack eller Vite

Når du bruker Worker i TypeScript, kan det være nødvendig med pakkere som Webpack eller Vite. Ved å bruke disse verktøyene kan du korrekt pakke Worker-skriptet og gjøre det tilgjengelig fra hovedtråden.

For eksempel, når du bruker Vite, bruk import.meta.url for å importere Worker riktig.

1const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });

• Dette sikrer at det pakkede Worker-skriptet lastes inn riktig, slik at du kan utnytte Worker til behandling.

Hensyn for meldingsutveksling og samtidighet

1. Datakopiering

   Når du sender og mottar meldinger mellom hovedtråden og Worker-tråden, blir data kopiert. Når du arbeider med komplekse data som objekter, må effektivitet vurderes. Hyppig utveksling av store datamengder kan redusere ytelsen.

2. Transferable objekter

   Noen objekter, som ArrayBuffer, kalles Transferable-objekter. Transferable-objekter kan overføres til Workeren i stedet for å kopieres under meldingsutveksling. Dette lar deg unngå belastningen av datakopiering.

1const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
2
3const buffer = new ArrayBuffer(1024);
4worker.postMessage(buffer, [buffer]); // Transfer ownership to the Worker
5
6console.log(buffer.byteLength); // 0 (ownership moved)

• Ved å sende [buffer] som det andre argumentet til worker.postMessage(), blir buffer overført til Workeren i stedet for å bli kopiert.

• Etter dette blir buffer på hovedtråden tom (med byteLength 0), og kan kun brukes av Workeren.

Avslutte en Worker

Worker bør avsluttes etter bruk for å minimere minneforbruk. Du kan avslutte en Worker ved å bruke terminate-metoden.

1const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
2// ...
3
4worker.terminate(); // Terminate the Worker

• Denne koden avslutter Workeren ved hjelp av terminate-metoden.

Unntakshåndtering i Worker

Hvis det oppstår en feil i en Worker, kan du håndtere feilen ved å bruke onerror-hendelsen.

1const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });
2
3worker.onerror = (error) => {
4    console.error("Error in Worker:", error.message);
5};

• Denne koden fanger opp og håndterer feil som oppstår inne i Workeren ved å bruke onerror-hendelsen.

Sammendrag

Ved å bruke Worker i TypeScript kan du utføre tunge oppgaver i bakgrunnen samtidig som du holder hovedtråden jevn. Ved å bruke typedefinisjoner kan meldingsutvekslinger også gjøres på en typesikker måte. Ved å være oppmerksom på datautveksling og trådhåndtering kan du oppnå ytelsesforbedringer og effektiv samtidighet.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video