Bemästra typsäkerhet: En omfattande guide till type guards och type assertions

Inom mjukvaruutveckling, särskilt när man arbetar med dynamiskt typade språk som JavaScript, kan det vara en stor utmaning att upprätthålla typsäkerhet. TypeScript, ett superset av JavaScript, hanterar detta problem genom att introducera statisk typning. Men även med TypeScript's typsystem uppstår situationer där kompilatorn behöver hjälp med att härleda den korrekta typen för en variabel. Det är här type guards och type assertions kommer in i bilden. Denna omfattande guide kommer att fördjupa sig i dessa kraftfulla funktioner, med praktiska exempel och bästa praxis för att förbättra din kods tillförlitlighet och underhållbarhet.

Vad är Type Guards?

Type guards (typvakter) är TypeScript-uttryck som begränsar typen av en variabel inom ett specifikt scope. De gör det möjligt för kompilatorn att förstå en variabels typ mer exakt än den ursprungligen kunde härleda. Detta är särskilt användbart när man hanterar union-typer eller när en variabels typ beror på körtidsvillkor. Genom att använda type guards kan du undvika körtidsfel och skriva mer robust kod.

Vanliga tekniker för Type Guards

TypeScript erbjuder flera inbyggda mekanismer för att skapa type guards:

• typeof-operatorn: Kontrollerar den primitiva typen av en variabel (t.ex. "string", "number", "boolean", "undefined", "object", "function", "symbol", "bigint").
• instanceof-operatorn: Kontrollerar om ett objekt är en instans av en specifik klass.
• in-operatorn: Kontrollerar om ett objekt har en specifik egenskap.
• Anpassade Type Guard-funktioner: Funktioner som returnerar ett typpredikat, vilket är en speciell typ av booleskt uttryck som TypeScript använder för att begränsa typer.

Använda typeof

typeof-operatorn är ett enkelt sätt att kontrollera den primitiva typen av en variabel. Den returnerar en sträng som indikerar typen.

            function printValue(value: string | number) {
  if (typeof value === "string") {
    console.log(value.toUpperCase()); // TypeScript vet att 'value' är en sträng här
  } else {
    console.log(value.toFixed(2)); // TypeScript vet att 'value' är ett nummer här
  }
}

printValue("hello"); // Output: HELLO
printValue(3.14159); // Output: 3.14

            

              
                Copy
              
            
          

Använda instanceof

instanceof-operatorn kontrollerar om ett objekt är en instans av en viss klass. Detta är särskilt användbart när man arbetar med arv.

            class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof!");
  }
}

function makeSound(animal: Animal) {
  if (animal instanceof Dog) {
    animal.bark(); // TypeScript vet att 'animal' är en Dog här
  } else {
    console.log("Generiskt djurljud");
  }
}

const myDog = new Dog("Buddy");
const myAnimal = new Animal("Generiskt djur");

makeSound(myDog); // Output: Woof!
makeSound(myAnimal); // Output: Generiskt djurljud

            

              
                Copy
              
            
          

Använda in

in-operatorn kontrollerar om ett objekt har en specifik egenskap. Detta är användbart när man hanterar objekt som kan ha olika egenskaper beroende på deras typ.

            interface Bird {
  fly(): void;
  layEggs(): void;
}

interface Fish {
  swim(): void;
  layEggs(): void;
}

function move(animal: Bird | Fish) {
  if ("fly" in animal) {
    animal.fly(); // TypeScript vet att 'animal' är en Bird här
  } else {
    animal.swim(); // TypeScript vet att 'animal' är en Fish här
  }
}

const myBird: Bird = { fly: () => console.log("Flyger"), layEggs: () => console.log("Lägger ägg") };
const myFish: Fish = { swim: () => console.log("Simmar"), layEggs: () => console.log("Lägger ägg") };

move(myBird); // Output: Flyger
move(myFish); // Output: Simmar

            

              
                Copy
              
            
          

Anpassade Type Guard-funktioner

För mer komplexa scenarier kan du definiera dina egna type guard-funktioner. Dessa funktioner returnerar ett typpredikat, vilket är ett booleskt uttryck som TypeScript använder för att begränsa en variabels typ. Ett typpredikat har formen variable is Type.

            interface Square {
  kind: "square";
  size: number;
}

interface Circle {
  kind: "circle";
  radius: number;
}

type Shape = Square | Circle;

function isSquare(shape: Shape): shape is Square {
  return shape.kind === "square";
}

function getArea(shape: Shape) {
  if (isSquare(shape)) {
    return shape.size * shape.size; // TypeScript vet att 'shape' är en Square här
  } else {
    return Math.PI * shape.radius * shape.radius; // TypeScript vet att 'shape' är en Circle här
  }
}

const mySquare: Square = { kind: "square", size: 5 };
const myCircle: Circle = { kind: "circle", radius: 3 };

console.log(getArea(mySquare)); // Output: 25
console.log(getArea(myCircle)); // Output: 28.274333882308138

            

              
                Copy
              
            
          

Vad är Type Assertions?

Type assertions (typassertioner) är ett sätt att tala om för TypeScript-kompilatorn att du vet mer om typen av en variabel än vad den för närvarande förstår. De är ett sätt att åsidosätta TypeScript's typinferens och explicit specificera en värdes typ. Det är dock viktigt att använda type assertions med försiktighet, eftersom de kan kringgå TypeScript's typkontroll och potentiellt leda till körtidsfel om de används felaktigt.

Type assertions har två former:

• Vinkelhake-syntax: <Type>value
• as-nyckelordet: value as Type

as-nyckelordet föredras generellt eftersom det är mer kompatibelt med JSX.

När man ska använda Type Assertions

Type assertions används vanligtvis i följande scenarier:

• När du är säker på typen av en variabel som TypeScript inte kan härleda.
• När du arbetar med kod som interagerar med JavaScript-bibliotek som inte är fullständigt typade.
• När du behöver konvertera ett värde till en mer specifik typ.

Exempel på Type Assertions

Explicit Typassertion

I det här exemplet hävdar (assert) vi att anropet till document.getElementById kommer att returnera ett HTMLCanvasElement. Utan assertionen skulle TypeScript härleda en mer generisk typ av HTMLElement | null.

            const canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d"); // TypeScript vet att 'canvas' är ett HTMLCanvasElement här

if (ctx) {
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 150, 75);
}

            

              
                Copy
              
            
          

Arbeta med okända typer

När man arbetar med data från en extern källa, som ett API, kan man få data med en okänd typ. Du kan använda en type assertion för att berätta för TypeScript hur den ska behandla datan.

            interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  const data = await response.json();
  return data as User; // Assertera att datan är en User
}

fetchUser(1)
  .then(user => {
    console.log(user.name); // TypeScript vet att 'user' är en User här
  })
  .catch(error => {
    console.error("Fel vid hämtning av användare:", error);
  });

            

              
                Copy
              
            
          

Försiktighetsåtgärder vid användning av Type Assertions

Type assertions bör användas sparsamt och med försiktighet. Överanvändning av type assertions kan dölja underliggande typfel och leda till körtidsproblem. Här är några viktiga överväganden:

• Undvik tvingande assertioner: Använd inte type assertions för att tvinga ett värde till en typ som det uppenbarligen inte är. Detta kan kringgå TypeScript's typkontroll och leda till oväntat beteende.
• Föredra Type Guards: Använd om möjligt type guards istället för type assertions. Type guards erbjuder ett säkrare och mer tillförlitligt sätt att begränsa typer.
• Validera data: Om du asserterar typen av data från en extern källa, överväg att validera datan mot ett schema för att säkerställa att den matchar den förväntade typen.

Typinskränkning (Type Narrowing)

Type guards är oupplösligt kopplade till konceptet type narrowing (typinskränkning). Typinskränkning är processen att förfina typen av en variabel till en mer specifik typ baserat på körtidsvillkor eller kontroller. Type guards är de verktyg vi använder för att uppnå typinskränkning.

TypeScript använder kontrollflödesanalys för att förstå hur typen av en variabel förändras inom olika kodgrenar. När en type guard används uppdaterar TypeScript sin interna förståelse av variabelns typ, vilket gör att du säkert kan använda metoder och egenskaper som är specifika för den typen.

Exempel på typinskränkning

            function processValue(value: string | number | null) {
  if (value === null) {
    console.log("Värdet är null");
  } else if (typeof value === "string") {
    console.log(value.toUpperCase()); // TypeScript vet att 'value' är en sträng här
  } else {
    console.log(value.toFixed(2)); // TypeScript vet att 'value' är ett nummer här
  }
}

processValue("test"); // Output: TEST
processValue(123.456); // Output: 123.46
processValue(null); // Output: Värdet är null

            

              
                Copy
              
            
          

Bästa praxis

För att effektivt utnyttja type guards och type assertions i dina TypeScript-projekt, överväg följande bästa praxis:

• Föredra Type Guards framför Type Assertions: Type guards erbjuder ett säkrare och mer tillförlitligt sätt att begränsa typer. Använd type assertions endast när det är nödvändigt och med försiktighet.
• Använd anpassade Type Guards för komplexa scenarier: När du hanterar komplexa typrelationer eller anpassade datastrukturer, definiera dina egna type guard-funktioner för att förbättra kodens tydlighet och underhållbarhet.
• Dokumentera Type Assertions: Om du använder type assertions, lägg till kommentarer för att förklara varför du använder dem och varför du anser att assertionen är säker.
• Validera extern data: När du arbetar med data från externa källor, validera datan mot ett schema för att säkerställa att den matchar den förväntade typen. Bibliotek som zod eller yup kan vara till hjälp för detta.
• Håll typdefinitioner korrekta: Se till att dina typdefinitioner korrekt återspeglar strukturen på din data. Felaktiga typdefinitioner kan leda till felaktig typinferens och körtidsfel.
• Aktivera Strict Mode: Använd TypeScript's strict mode (strict: true i tsconfig.json) för att aktivera striktare typkontroll och fånga potentiella fel tidigt.

Internationella överväganden

När du utvecklar applikationer för en global publik, var medveten om hur type guards och type assertions kan påverka lokaliserings- och internationaliseringsinsatser (i18n). Specifikt, överväg följande:

• Dataformatering: Nummer- och datumformat varierar avsevärt mellan olika locales (språkområden). När du utför typkontroller eller assertioner på numeriska eller datumvärden, se till att du använder lokalmedvetna formaterings- och tolkningsfunktioner. Använd till exempel bibliotek som Intl.NumberFormat och Intl.DateTimeFormat för att formatera och tolka nummer och datum enligt användarens locale. Att felaktigt anta ett specifikt format (t.ex. amerikanskt datumformat MM/DD/YYYY) kan leda till fel i andra locales.
• Valutahantering: Valutasymboler och formatering skiljer sig också globalt. När du hanterar monetära värden, använd bibliotek som stöder valutaformatering och konvertering, och undvik att hårdkoda valutasymboler. Se till att dina type guards hanterar olika valutatyper korrekt och förhindrar oavsiktlig blandning av valutor.
• Teckenkodning: Var medveten om problem med teckenkodning, särskilt när du arbetar med strängar. Se till att din kod hanterar Unicode-tecken korrekt och undviker antaganden om teckenuppsättningar. Överväg att använda bibliotek som tillhandahåller Unicode-medvetna strängmanipuleringsfunktioner.
• Höger-till-vänster (RTL) språk: Om din applikation stöder RTL-språk som arabiska eller hebreiska, se till att dina type guards och assertioner hanterar textriktningen korrekt. Var uppmärksam på hur RTL-text kan påverka strängjämförelser och valideringar.

Slutsats

Type guards och type assertions är väsentliga verktyg för att förbättra typsäkerheten och skriva mer robust TypeScript-kod. Genom att förstå hur man använder dessa funktioner effektivt kan du förhindra körtidsfel, förbättra kodens underhållbarhet och skapa mer tillförlitliga applikationer. Kom ihåg att föredra type guards framför type assertions när det är möjligt, dokumentera dina type assertions och validera extern data för att säkerställa att din typinformation är korrekt. Genom att tillämpa dessa principer kan du skapa mer stabil och förutsägbar mjukvara, lämplig för global distribution.