Förstå skillnaden mellan! och ? Operatörer i TypeScript

Utforska TypeScript-operatörer för säker åtkomst och påstående

När man arbetar med TypeScript, stöter utvecklare ofta på scenarier där de behöver komma åt egenskaper eller metoder för ett objekt som kan vara odefinierad eller null. I dessa situationer är ! (utropstecken) och ?(frågetecken) operatörer kommer in i bilden. Dessa operatörer tillåter utvecklare att kontrollera hur TypeScript hanterar potentiellt null eller odefinierad värden.

De ! operatorn, vanligen känd som "non-null assertion operator", används för att tala om för TypeScript-kompilatorn att variabeln eller uttrycket som används inte är null eller odefinierad. Å andra sidan ?. operatören, eller den "valfria kedjeoperatören", kontrollerar säkert om objektet finns innan det försöker komma åt dess egenskaper eller metoder.

Denna subtila distinktion är avgörande när man bygger applikationer där körtidsfel från att komma åt odefinierade värden kan orsaka betydande problem. Dessa två operatörer hjälper till att förbättra kodsäkerhet och läsbarhet, men de används för olika ändamål.

Förstå de viktigaste skillnaderna mellan obj!.fastighet och obj?.fastighet kan hjälpa utvecklare att skriva mer robust TypeScript-kod, undvika vanliga fallgropar som uppstår när man arbetar med potentiellt odefinierade data. I den här artikeln kommer vi att dyka djupare in i dessa begrepp med exempel för att illustrera deras användning.

Förstå Non-Null-påstående och valfri kedja i TypeScript

Den första uppsättningen skript utforskar två viktiga TypeScript-funktioner: icke-noll påstående operatör (!) och valfri kedja operatör (?.). Påståendet om icke-null är ett direkt sätt att tala om för TypeScript-kompilatorn att ett värde aldrig kommer att vara null eller odefinierat. Detta är särskilt användbart när vi är säkra på att ett objekt kommer att existera under körning, även om TypeScript inte kan bevisa det vid kompilering. Till exempel i obj!.data, vi säger åt kompilatorn att hoppa över alla nollkontroller och anta att obj existerar. Detta tillvägagångssätt, även om det är bekvämt, kan leda till körtidsfel om objektet visar sig vara null eller odefinierat.

Å andra sidan tillhandahåller den valfria kedjeoperatorn en säkrare metod för att komma åt kapslade egenskaper eller metoder i ett objekt som kan vara null. I fallet med obj?.data, kontrollerar koden om objektet finns innan det försöker komma åt dataegenskapen. Om objektet är null eller odefinierat returnerar det helt enkelt odefinierat istället för att skapa ett fel. Den här metoden är särskilt användbar i dynamiska miljöer där objekt kan skapas villkorligt eller hämtas från externa källor som API:er. Detta förhindrar krascher eller oväntat beteende, vilket gör din kod mer elastisk.

Det andra exemplet fokuserar på funktionsanrop som använder dessa operatorer. Med icke-null-påstående tvingar vi fram anropet av en metod, förutsatt att både objektet och metoden existerar, som framgår av obj!.doSomething(). Detta kan vara till hjälp i scenarier där utvecklaren har full kontroll över data, men det utgör en risk om antagandet misslyckas. Om metoden inte finns eller om objektet är null kommer programmet att skapa ett undantag. Detta gör påstående utan noll till ett verktyg med hög risk och hög belöning.

Valfri kedja tillämpas på funktionsanrop, som i obj?.doSomething(), förhindrar sådana körtidsfel genom att kontrollera om metoden finns innan du försöker anropa den. Om metoden eller objektet är odefinierat händer ingenting och programmet fortsätter att köra utan att skapa ett fel. Denna teknik rekommenderas starkt i situationer där objektet hämtas dynamiskt eller kan vara odefinierat i vissa skeden av programmet. Det möjliggör säker exekvering och minskar behovet av utförlig nollkontrollkod, vilket förbättrar båda prestanda och kodläsbarhet.

// 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

Avancerade tekniker: Utforska icke-nullpåståenden och valfri kedja

Förutom de grundläggande användningsfallen för icke-noll påstående och valfri kedja som diskuterats tidigare spelar dessa operatörer också en avgörande roll för att hantera komplexa datastrukturer, särskilt i storskaliga applikationer. När man arbetar med djupt kapslade objekt eller stora datamängder som hämtas från API:er är det vanligt att man stöter på scenarier där vissa egenskaper kan existera eller inte finns i olika skeden av programmets livscykel. Genom att använda valfri kedja kan utvecklare skriva renare och mer underhållbar kod utan att upprepade gånger lägga till nollkontroller för varje egenskap i hierarkin.

En annan viktig aspekt att överväga är hur dessa operatörer interagerar med TypeScripts strikta läge. I strikt läge upprätthåller TypeScript strängare null- och odefinierade kontroller, vilket gör det mer utmanande att komma åt potentiellt odefinierade egenskaper. De ! Operatören tillåter utvecklare att kringgå TypeScripts varningar om möjliga nollvärden, men den bör användas med försiktighet, eftersom den kan leda till körtidsfel om den missbrukas. Därför ? operatör föredras ofta i situationer där det är osäkert om ett objekt eller en egendom finns.

Använder dessutom valfri kedja i kombination med andra moderna JavaScript-funktioner som standardvärden (med hjälp av operatörerna || eller ??) kan avsevärt förbättra kodsäkerhet och läsbarhet. Till exempel kan utvecklare säkert komma åt ett objekts egenskap och tillhandahålla ett reservvärde om egenskapen är odefinierad. Detta är särskilt användbart i formulär, användarinmatningar eller konfigurationer där värden kan saknas eller är valfria, vilket ytterligare förbättrar kodens robusthet.