Hur man använder TypeScript Type Assertions

Typpåståenden i TypeScript är ett sätt att tala om för kompilatorn att du vet mer om typen av ett värde än vad den gör. Detta kan vara användbart när du arbetar med värden som har osäkra eller breda typer, och du vill begränsa dem för bättre typkontroll och kodläsbarhet. I den här artikeln kommer vi att utforska hur man använder TypeScript-påståenden effektivt.

Vad är Type Assertion?

Type assertion är en mekanism i TypeScript som låter dig åsidosätta standardtypinferensen som görs av TypeScript-kompilatorn. Det ändrar inte den faktiska körtidstypen men hjälper kompilatorn att förstå typen av en variabel för typkontrollens skull. Typpåståenden liknar typcasting på andra språk som C# eller Java, men utan någon körtidspåverkan.

Syntax för typpåståenden

Det finns två sätt att använda typpåståenden i TypeScript:

• Använda nyckelordet as (rekommenderas)
• Använda vinkelfästen <>

Använda nyckelordet as

Det vanligaste sättet att använda typpåståenden är med nyckelordet as:

let someValue: unknown = "Hello, TypeScript!";
let strLength: number = (someValue as string).length;

console.log(strLength); // Output: 17

I det här exemplet berättar vi för TypeScript att someValue är av typen string, vilket gör att vi kan använda egenskapen length.

Använda vinkelfästen <>

Den alternativa syntaxen för typpåståenden använder vinkelparenteser:

let someValue: unknown = "Hello, TypeScript!";
let strLength: number = (someValue).length;

console.log(strLength); // Output: 17

Denna syntax uppnår samma resultat som as-syntaxen. Det rekommenderas dock inte i miljöer där JSX (som React) används, eftersom det kommer i konflikt med syntaxen för JSX-element.

Vanliga användningsfall för typpåståenden

Typpåståenden används vanligtvis i flera scenarier:

• När du arbetar med typen okänt
• Vid hantering av DOM-element
• När man begränsar fackföreningstyper
• När du interagerar med tredjepartsbibliotek som saknar typdefinitioner

Exempel: Att hävda typer med typen unknown

Typen unknown är användbar när du vill acceptera vilken typ som helst men ändå behöver göra en typkontroll innan du använder den. Typpåståenden hjälper till att begränsa typen:

function getLength(value: unknown): number {
  if (typeof value === "string") {
    return (value as string).length;
  } else if (Array.isArray(value)) {
    return (value as any[]).length;
  }
  return 0;
}

console.log(getLength("Hello")); // Output: 5
console.log(getLength([1, 2, 3])); // Output: 3
console.log(getLength(42)); // Output: 0

I det här exemplet använder vi typpåståenden för att tala om för TypeScript att värde är en sträng eller en valfri[]-matris.

Exempel: Hantering av DOM-element

När du manipulerar DOM behöver TypeScript känna till den specifika typen av ett element för att tillhandahålla lämpliga egenskaper och metoder. Typpåståenden är till hjälp här:

const inputElement = document.getElementById("user-input") as HTMLInputElement;
inputElement.value = "Hello, TypeScript!";

Här använder vi typbekräftelse för att tala om för TypeScript att inputElement är ett HTMLInputElement, vilket ger oss tillgång till egenskapen value direkt.

Typpåstående vs. Typgjutning

Det är viktigt att förstå skillnaden mellan typpåstående och typgjutning. I TypeScript ändrar inte typpåståenden den faktiska typen vid körning; de berättar bara för TypeScript-kompilatorn hur man ska behandla typen vid kompilering. Däremot kan typcasting på andra språk som C# eller Java involvera att konvertera ett värde från en typ till en annan vid körning, vilket kan påverka prestanda och beteende.

Varningar när du använder typpåståenden

Även om typpåståenden kan vara kraftfulla kan missbruk leda till körtidsfel. Här är några tips för att använda dem säkert:

• Undvik att använda påståenden för att tvångskonvertera inkompatibla typer.
• Använd alltid påståenden med försiktighet och föredrar avsmalnande typer med TypeScripts typskydd.
• Använd påståenden när du är säker på typen och när det inte går att begränsa den annars.

Exempel på felaktig typpåstående

Här är ett exempel på ett påstående av farlig typ:

let someValue: string = "Hello, TypeScript!";
let numValue: number = (someValue as unknown as number); // Dangerous!

console.log(numValue); // Output: Hello, TypeScript! (incorrect)

Den här koden kompileras utan fel, men den kommer att leda till oväntat beteende vid körning eftersom strängen felaktigt behandlas som ett nummer.

Slutsats

Typpåståenden i TypeScript ger ett sätt att åsidosätta de härledda typerna när du vet mer om ett värdes typ än vad TypeScript gör. De är användbara när man hanterar osäkra typer, interagerar med tredjepartsbibliotek eller arbetar med DOM-element. De bör dock användas med försiktighet för att undvika körtidsfel och säkerställa typsäkerhet i din kod.

Genom att behärska typpåståenden kan du skriva mer uttrycksfull och robust TypeScript-kod. Öva på att använda dem i olika scenarier för att bli mer bekväm med denna kraftfulla funktion.