typescript - Vad är den exakta skillnaden mellan ?. och ?: operatorerna i Angular

Jag tänker inte på ?:(ternary operator). Ibland tittar jag på YouTube-tutorials där folk använder ?. Operator på HTML-sidor, och ibland använder de ?: på TS (TypeScript)-sidor. Jag är inte riktigt säker på hur de exakt skiljer sig åt?

Svar #1

Så det finns en skillnad när man använder ? inom Angular, här är de tre sätten du kan syfta på för användningen.

säker-operatörer

När du anger ett värde inom HTML med ett frågetecken i det, är detta en säker kontroll, så du kontrollerar att variabeln är definierad innan du får åtkomst till den. (att försöka komma åt värden som inte finns kommer att resultera i fel).

Utdraget nedan skulle kontrollera att this.example har ett värde innan man kontrollerar text, vilket skulle resultera i ett fel. Om texten nås medan den är odefinierad kan detta nästan garantera oönskat beteende.

<p>{{example?.text}}</p>

Detta håller allt säkert, för att läsa mer om säkra operatorer, ta en titt i Angular-dokumentationen som finns här

Valfria parametrar

Nästa användning, vilket är vad jag tror att du letade efter, är valfria värden i funktioner/gränssnitt. Detta innebär att gränssnittet inte kommer att ge ett fel om det anropas utan exampleValue eftersom det nu har definierats som valfritt.

export interface Itest
{
 exampleValue?: string; // optional
 neededValue: string; // non-optional
}

Eller inom en funktion, utan den valfria indikatorn (?) skulle ett fel uppstå om funktionen kallades på detta sätt: this.exampleFunction();

public exampleFunction(test?): void 
{
  console.log(test);
  // this function can be called with or without test being passed in without causing an error.
}

Fler exempel på detta kan hittas i denna korta artikel om valfria parametrar

Villkorlig (ternär) operator

Frågan letade inte efter detta men tänkte att det skulle vara vettigt att ta med det eftersom det är ett annat fall där ? kan ses i användning.

När det ses i TypeScript kan du använda det i ett villkorligt ternärt uttryck (if/else) som ser ut så här.

const example = 'hello';
console.log(example === 'hello' ? 'im true' : 'im false');

vilket skulle vara samma sak som att skriva följande uttalande.

    const example = "hello";
    
    if (example === 'hello')
    {
      console.log('im true');
    }else 
    {
      console.log('im false');
    }

Mer information och användning av villkorsoperatören (ternära) kan hittas här.

Relaterade artiklar