Forstå forskjellen mellom! og ? Operatører i TypeScript

Utforsker TypeScript-operatører for sikker tilgang og påstand

Når du jobber med TypeScript, støter utviklere ofte på scenarier der de trenger å få tilgang til egenskaper eller metoder for et objekt som kan være udefinert eller null. I disse situasjonene vil ! (utropstegn) og ?(spørsmålstegn) operatører kommer inn. Disse operatørene lar utviklere kontrollere hvordan TypeScript håndterer potensielt null eller udefinert verdier.

De ! operator, vanligvis kjent som "non-null assertion operator," brukes til å fortelle TypeScript-kompilatoren at variabelen eller uttrykket som åpnes ikke er null eller udefinert. På den annen side ?. operatør, eller "valgfri kjedeoperatør", sjekker trygt om objektet eksisterer før det forsøker å få tilgang til dets egenskaper eller metoder.

Denne subtile forskjellen er avgjørende når du bygger applikasjoner hvor kjøretidsfeil fra tilgang til udefinerte verdier kan forårsake betydelige problemer. Disse to operatørene hjelper til med å forbedre kodesikkerhet og lesbarhet, men de brukes til forskjellige formål.

Forstå de viktigste forskjellene mellom obj!.eiendom og obj?.eiendom kan hjelpe utviklere med å skrive mer robust TypeScript-kode, unngå vanlige fallgruver som oppstår når du arbeider med potensielt udefinerte data. I denne artikkelen vil vi dykke dypere inn i disse konseptene med eksempler for å illustrere bruken.

Forstå ikke-nullpåstand og valgfri kjeding i TypeScript

Det første settet med skript utforsker to viktige TypeScript-funksjoner: ikke-null påstand operatør (!) og valgfri kjetting operatør (?.). Ikke-null-påstanden er en direkte måte å fortelle TypeScript-kompilatoren at en verdi aldri vil være null eller udefinert. Dette er spesielt nyttig når vi er sikre på at et objekt vil eksistere under kjøring, selv om TypeScript ikke kan bevise det på kompileringstidspunktet. For eksempel i obj!.data, ber vi kompilatoren hoppe over alle nullkontroller og anta at obj eksisterer. Denne tilnærmingen, selv om den er praktisk, kan føre til kjøretidsfeil hvis objektet viser seg å være null eller udefinert.

På den annen side gir den valgfrie kjedeoperatoren en sikrere metode for å få tilgang til nestede egenskaper eller metoder i et objekt som kan være null. I tilfelle av obj?.data, sjekker koden om objektet eksisterer før den forsøker å få tilgang til dataegenskapen. Hvis objektet er null eller udefinert, returnerer det ganske enkelt udefinert i stedet for å gi en feil. Denne metoden er spesielt nyttig i dynamiske miljøer der objekter kan være betinget opprettet eller hentet fra eksterne kilder som APIer. Dette forhindrer krasj eller uventet oppførsel, noe som gjør koden din mer spenstig.

Det andre eksemplet fokuserer på funksjonsanrop ved bruk av disse operatorene. Med ikke-null-påstand tvinger vi påkallelsen av en metode, forutsatt at objektet og metoden begge eksisterer, som vist i obj!.doSomething(). Dette kan være nyttig i scenarier der utvikleren har full kontroll over dataene, men det utgjør en risiko hvis forutsetningen feiler. Hvis metoden ikke eksisterer eller objektet er null, vil programmet gi et unntak. Dette gjør ikke-null-påstand til et verktøy med høy risiko og høy belønning.

Valgfri kjetting brukt på funksjonsanrop, som i obj?.doSomething(), forhindrer slike kjøretidsfeil ved å sjekke om metoden eksisterer før du forsøker å starte den. Hvis metoden eller objektet er udefinert, skjer ingenting, og programmet fortsetter å kjøre uten å gi en feil. Denne teknikken anbefales sterkt i situasjoner der objektet hentes dynamisk eller kan være udefinert på visse stadier av programmet. Det gir mulighet for sikker kjøring og reduserer behovet for detaljert null-sjekkingskode, og forbedrer begge ytelse og kodelesbarhet.

// Example 1: Using non-null assertion operator (!)
// The assumption here is that obj is definitely not null or undefined
const obj: { data?: string } | null = { data: 'Hello' };
const data: string = obj!.data;  // Non-null assertion, ignores potential null/undefined
console.log(data);  // Output: 'Hello'

// Example 2: Optional chaining (?.) for safer access
// This approach checks if obj exists before accessing data property
const obj2: { data?: string } | null = null;
const data2: string | undefined = obj2?.data;  // Safely returns undefined if obj2 is null
console.log(data2);  // Output: undefined

// Note: The first approach forces the compiler to assume obj is not null
// The second approach ensures no runtime error if obj is null or undefined

// Example 1: Using non-null assertion operator for function invocation
// Assumes obj is not null or undefined before invoking the method
const objFunc: { doSomething?: () => void } | null = { doSomething: () => console.log('Action') };
objFunc!.doSomething();  // Forces execution, assuming objFunc is valid

// Example 2: Optional chaining operator for function invocation
// This approach safely checks if objFunc exists before calling the method
const objFunc2: { doSomething?: () => void } | null = null;
objFunc2?.doSomething();  // No error thrown, simply does nothing if objFunc2 is null

// Conclusion: Non-null assertion is riskier but direct, while optional chaining is safer but may return undefined

// Unit Test 1: Testing non-null assertion operator (!)
import { expect } from 'chai';
it('should return data with non-null assertion', () => {
  const obj = { data: 'Test' };
  const result = obj!.data;
  expect(result).to.equal('Test');
});

// Unit Test 2: Testing optional chaining operator (?.)
it('should return undefined if obj is null using optional chaining', () => {
  const obj = null;
  const result = obj?.data;
  expect(result).to.be.undefined;
});

// Ensures both methods behave as expected in null/undefined scenarios

Avanserte teknikker: Utforsking av ikke-nullpåstander og valgfri kjeding

I tillegg til de grunnleggende brukstilfellene av ikke-null påstand og valgfri kjetting diskutert tidligere, spiller disse operatørene også en avgjørende rolle i å håndtere komplekse datastrukturer, spesielt i store applikasjoner. Når du arbeider med dypt nestede objekter eller store datasett hentet fra APIer, er det vanlig å støte på scenarier der visse egenskaper kan eksistere eller ikke eksisterer på forskjellige stadier av applikasjonens livssyklus. Ved å bruke valgfri kjeding kan utviklere skrive renere og mer vedlikeholdbar kode uten å gjentatte ganger legge til nullsjekker for hver egenskap i hierarkiet.

Et annet viktig aspekt å vurdere er hvordan disse operatørene samhandler med TypeScripts strenge modus. I streng modus håndhever TypeScript strengere null- og udefinerte kontroller, noe som gjør det mer utfordrende å få tilgang til potensielt udefinerte egenskaper. De ! Operatøren lar utviklere omgå TypeScripts advarsler om mulige nullverdier, men den bør brukes med forsiktighet, da den kan føre til kjøretidsfeil hvis den misbrukes. Derfor ? operatør er ofte foretrukket i situasjoner der eksistensen av en gjenstand eller eiendom er usikker.

Dessuten, bruk av valgfri kjetting i forbindelse med andre moderne JavaScript-funksjoner som standardverdier (ved å bruke || eller ??-operatørene) kan kodesikkerheten og lesbarheten betydelig forbedres. For eksempel kan utviklere trygt få tilgang til et objekts eiendom og gi en reserveverdi hvis egenskapen er udefinert. Dette er spesielt nyttig i skjemaer, brukerinndata eller konfigurasjoner der verdier kan være fraværende eller valgfrie, noe som ytterligere forbedrer robustheten til koden.