M

MLOG

Svenska

Utforska TypeScript literal types, en kraftfull funktion för strikta värdebegränsningar, tydligare kod och färre fel. Lär dig med praktiska exempel och avancerade tekniker.

TypeScript Literal Types: Bemästra exakta värdebegränsningar

TypeScript, ett superset av JavaScript, introducerar statisk typning i den dynamiska världen av webbutveckling. En av dess mest kraftfulla funktioner är konceptet med literal-typer. Literal-typer låter dig specificera det exakta värdet som en variabel eller egenskap kan ha, vilket ger förbättrad typsäkerhet och förhindrar oväntade fel. Denna artikel kommer att utforska literal-typer på djupet, och täcka deras syntax, användning och fördelar med praktiska exempel.

Vad är literal-typer?

Till skillnad från traditionella typer som string, number, eller boolean, representerar literal-typer inte en bred kategori av värden. Istället representerar de specifika, fasta värden. TypeScript stöder tre sorters literal-typer:

Genom att använda literal-typer kan du skapa mer exakta typdefinitioner som återspeglar de faktiska begränsningarna i din data, vilket leder till mer robust och underhållbar kod.

String Literal Types (Strängliteraler)

Strängliteraler är den vanligaste typen av literal-typer. De låter dig specificera att en variabel eller egenskap endast kan innehålla ett av en fördefinierad uppsättning strängvärden.

Grundläggande syntax

Syntaxen för att definiera en strängliteral-typ är enkel:


type AllowedValues = "value1" | "value2" | "value3";

Detta definierar en typ vid namn AllowedValues som endast kan innehålla strängarna "value1", "value2" eller "value3".

Praktiska exempel

1. Definiera en färgpalett:

Föreställ dig att du bygger ett UI-bibliotek och vill säkerställa att användare endast kan specificera färger från en fördefinierad palett:


type Color = "red" | "green" | "blue" | "yellow";

function paintElement(element: HTMLElement, color: Color) {
  element.style.backgroundColor = color;
}

paintElement(document.getElementById("myElement")!, "red"); // Giltigt
paintElement(document.getElementById("myElement")!, "purple"); // Fel: Argument av typen '"purple"' kan inte tilldelas till parameter av typen 'Color'.

Detta exempel visar hur strängliteraler kan upprätthålla en strikt uppsättning tillåtna värden, vilket förhindrar utvecklare från att av misstag använda ogiltiga färger.

2. Definiera API-ändpunkter:

När man arbetar med API:er behöver man ofta specificera de tillåtna ändpunkterna. Strängliteraler kan hjälpa till att upprätthålla detta:


type APIEndpoint = "/users" | "/posts" | "/comments";

function fetchData(endpoint: APIEndpoint) {
  // ... implementation för att hämta data från den specificerade ändpunkten
  console.log(`Fetching data from ${endpoint}`);
}

fetchData("/users"); // Giltigt
fetchData("/products"); // Fel: Argument av typen '"/products"' kan inte tilldelas till parameter av typen 'APIEndpoint'.

Detta exempel säkerställer att funktionen fetchData endast kan anropas med giltiga API-ändpunkter, vilket minskar risken för fel orsakade av stavfel eller felaktiga ändpunktsnamn.

3. Hantera olika språk (Internationalisering - i18n):

I globala applikationer kan du behöva hantera olika språk. Du kan använda strängliteraler för att säkerställa att din applikation endast stöder de specificerade språken:


type Language = "en" | "es" | "fr" | "de" | "zh";

function translate(text: string, language: Language): string {
  // ... implementation för att översätta texten till det specificerade språket
  console.log(`Translating '${text}' to ${language}`);
  return "Translated text"; // Platshållare
}

translate("Hello", "en"); // Giltigt
translate("Hello", "ja"); // Fel: Argument av typen '"ja"' kan inte tilldelas till parameter av typen 'Language'.

Detta exempel visar hur man säkerställer att endast stödda språk används inom din applikation.

Number Literal Types (Tal-literaler)

Tal-literaler låter dig specificera att en variabel eller egenskap endast kan innehålla ett specifikt numeriskt värde.

Grundläggande syntax

Syntaxen för att definiera en tal-literal-typ liknar den för strängliteraler:


type StatusCode = 200 | 404 | 500;

Detta definierar en typ vid namn StatusCode som endast kan innehålla talen 200, 404 eller 500.

Praktiska exempel

1. Definiera HTTP-statuskoder:

Du kan använda tal-literaler för att representera HTTP-statuskoder, vilket säkerställer att endast giltiga koder används i din applikation:


type HTTPStatus = 200 | 400 | 401 | 403 | 404 | 500;

function handleResponse(status: HTTPStatus) {
  switch (status) {
    case 200:
      console.log("Success!");
      break;
    case 400:
      console.log("Bad Request");
      break;
    // ... andra fall
    default:
      console.log("Unknown Status");
  }
}

handleResponse(200); // Giltigt
handleResponse(600); // Fel: Argument av typen '600' kan inte tilldelas till parameter av typen 'HTTPStatus'.

Detta exempel tvingar fram användningen av giltiga HTTP-statuskoder, vilket förhindrar fel orsakade av felaktiga eller icke-standardiserade koder.

2. Representera fasta alternativ:

Du kan använda tal-literaler för att representera fasta alternativ i ett konfigurationsobjekt:


type RetryAttempts = 1 | 3 | 5;

interface Config {
  retryAttempts: RetryAttempts;
}

const config1: Config = { retryAttempts: 3 }; // Giltigt
const config2: Config = { retryAttempts: 7 }; // Fel: Typen '{ retryAttempts: 7; }' kan inte tilldelas till typen 'Config'.

Detta exempel begränsar de möjliga värdena för retryAttempts till en specifik uppsättning, vilket förbättrar tydligheten och tillförlitligheten i din konfiguration.

Boolean Literal Types (Booleska literaler)

Booleska literaler representerar de specifika värdena true eller false. Även om de kan verka mindre mångsidiga än sträng- eller tal-literaler, kan de vara användbara i specifika scenarier.

Grundläggande syntax

Syntaxen för att definiera en boolesk literal-typ är:


type IsEnabled = true | false;

Att direkt använda true | false är dock redundant eftersom det är ekvivalent med typen boolean. Booleska literaler är mer användbara när de kombineras med andra typer eller i villkorliga typer.

Praktiska exempel

1. Villkorlig logik med konfiguration:

Du kan använda booleska literaler för att styra beteendet hos en funktion baserat på en konfigurationsflagga:


interface FeatureFlags {
  darkMode: boolean;
  newUserFlow: boolean;
}

function initializeApp(flags: FeatureFlags) {
  if (flags.darkMode) {
    // Aktivera mörkt läge
    console.log("Enabling dark mode...");
  } else {
    // Använd ljust läge
    console.log("Using light mode...");
  }

  if (flags.newUserFlow) {
    // Aktivera nytt användarflöde
    console.log("Enabling new user flow...");
  } else {
    // Använd gammalt användarflöde
    console.log("Using old user flow...");
  }
}

initializeApp({ darkMode: true, newUserFlow: false });

Även om detta exempel använder standardtypen boolean, kan du kombinera den med villkorliga typer (förklaras senare) för att skapa mer komplext beteende.

2. Diskriminerade unioner (Discriminated Unions):

Booleska literaler kan användas som diskriminatorer i union-typer. Tänk på följande exempel:


interface SuccessResult {
  success: true;
  data: any;
}

interface ErrorResult {
  success: false;
  error: string;
}

type Result = SuccessResult | ErrorResult;

function processResult(result: Result) {
  if (result.success) {
    console.log("Success:", result.data);
  } else {
    console.error("Error:", result.error);
  }
}

processResult({ success: true, data: { name: "John" } });
processResult({ success: false, error: "Failed to fetch data" });

Här agerar egenskapen success, som är en boolesk literal-typ, som en diskriminator, vilket låter TypeScript avgränsa typen av result inom if-satsen.

Kombinera literal-typer med union-typer

Literal-typer är som mest kraftfulla när de kombineras med union-typer (med |-operatorn). Detta låter dig definiera en typ som kan innehålla ett av flera specifika värden.

Praktiska exempel

1. Definiera en statustyp:


type Status = "pending" | "in progress" | "completed" | "failed";

interface Task {
  id: number;
  description: string;
  status: Status;
}

const task1: Task = { id: 1, description: "Implement login", status: "in progress" }; // Giltigt
const task2: Task = { id: 2, description: "Implement logout", status: "done" };       // Fel: Typen '{ id: number; description: string; status: string; }' kan inte tilldelas till typen 'Task'.

Detta exempel visar hur man tvingar fram en specifik uppsättning tillåtna statusvärden för ett Task-objekt.

2. Definiera en enhetstyp:

I en mobilapplikation kan du behöva hantera olika enhetstyper. Du kan använda en union av strängliteraler för att representera dessa:


type DeviceType = "mobile" | "tablet" | "desktop";

function logDeviceType(device: DeviceType) {
  console.log(`Device type: ${device}`);
}

logDeviceType("mobile"); // Giltigt
logDeviceType("smartwatch"); // Fel: Argument av typen '"smartwatch"' kan inte tilldelas till parameter av typen 'DeviceType'.

Detta exempel säkerställer att funktionen logDeviceType endast anropas med giltiga enhetstyper.

Literal-typer med typalias

Typalias (med nyckelordet type) ger ett sätt att namnge en literal-typ, vilket gör din kod mer läsbar och underhållbar.

Praktiska exempel

1. Definiera en valutakodstyp:


type CurrencyCode = "USD" | "EUR" | "GBP" | "JPY";

function formatCurrency(amount: number, currency: CurrencyCode): string {
  // ... implementation för att formatera beloppet baserat på valutakoden
  console.log(`Formatting ${amount} in ${currency}`);
  return "Formatted amount"; // Platshållare
}

formatCurrency(100, "USD"); // Giltigt
formatCurrency(200, "CAD"); // Fel: Argument av typen '"CAD"' kan inte tilldelas till parameter av typen 'CurrencyCode'.

Detta exempel definierar ett typalias CurrencyCode för en uppsättning valutakoder, vilket förbättrar läsbarheten för funktionen formatCurrency.

2. Definiera en veckodagstyp:


type DayOfWeek = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday";

function isWeekend(day: DayOfWeek): boolean {
  return day === "Saturday" || day === "Sunday";
}

console.log(isWeekend("Monday"));   // false
console.log(isWeekend("Saturday")); // true
console.log(isWeekend("Funday"));   // Fel: Argument av typen '"Funday"' kan inte tilldelas till parameter av typen 'DayOfWeek'.

Literal inferens (härledning)

TypeScript kan ofta härleda literal-typer automatiskt baserat på de värden du tilldelar variabler. Detta är särskilt användbart när man arbetar med const-variabler.

Praktiska exempel

1. Härledning av strängliteraler:


const apiKey = "your-api-key"; // TypeScript härleder typen av apiKey som "your-api-key"

function validateApiKey(key: "your-api-key") {
  return key === "your-api-key";
}

console.log(validateApiKey(apiKey)); // true

const anotherKey = "invalid-key";
console.log(validateApiKey(anotherKey)); // Fel: Argument av typen 'string' kan inte tilldelas till parameter av typen '"your-api-key"'.

I detta exempel härleder TypeScript typen av apiKey som strängliteral-typen "your-api-key". Men om du tilldelar ett icke-konstant värde till en variabel, kommer TypeScript vanligtvis att härleda den bredare typen string.

2. Härledning av tal-literaler:


const port = 8080; // TypeScript härleder typen av port som 8080

function startServer(portNumber: 8080) {
  console.log(`Starting server on port ${portNumber}`);
}

startServer(port); // Giltigt

const anotherPort = 3000;
startServer(anotherPort); // Fel: Argument av typen 'number' kan inte tilldelas till parameter av typen '8080'.

Använda literal-typer med villkorliga typer

Literal-typer blir ännu mer kraftfulla när de kombineras med villkorliga typer. Villkorliga typer låter dig definiera typer som beror på andra typer, vilket skapar mycket flexibla och uttrycksfulla typsystem.

Grundläggande syntax

Syntaxen för en villkorlig typ är:


TypeA extends TypeB ? TypeC : TypeD

Detta betyder: om TypeA kan tilldelas till TypeB, är den resulterande typen TypeC; annars är den resulterande typen TypeD.

Praktiska exempel

1. Mappa status till meddelande:


type Status = "pending" | "in progress" | "completed" | "failed";

type StatusMessage = T extends "pending"
  ? "Waiting for action"
  : T extends "in progress"
  ? "Currently processing"
  : T extends "completed"
  ? "Task finished successfully"
  : "An error occurred";

function getStatusMessage(status: T): StatusMessage {
  switch (status) {
    case "pending":
      return "Waiting for action" as StatusMessage;
    case "in progress":
      return "Currently processing" as StatusMessage;
    case "completed":
      return "Task finished successfully" as StatusMessage;
    case "failed":
      return "An error occurred" as StatusMessage;
    default:
      throw new Error("Invalid status");
  }
}

console.log(getStatusMessage("pending"));    // Waiting for action
console.log(getStatusMessage("in progress")); // Currently processing
console.log(getStatusMessage("completed"));   // Task finished successfully
console.log(getStatusMessage("failed"));      // An error occurred

Detta exempel definierar en StatusMessage-typ som mappar varje möjlig status till ett motsvarande meddelande med hjälp av villkorliga typer. Funktionen getStatusMessage utnyttjar denna typ för att tillhandahålla typsäkra statusmeddelanden.

2. Skapa en typsäker händelsehanterare:


type EventType = "click" | "mouseover" | "keydown";

type EventData = T extends "click"
  ? { x: number; y: number; } // Klickhändelsedata
  : T extends "mouseover"
  ? { target: HTMLElement; }   // Mouseover-händelsedata
  : { key: string; }             // Keydown-händelsedata

function handleEvent(type: T, data: EventData) {
  console.log(`Handling event type ${type} with data:`, data);
}

handleEvent("click", { x: 10, y: 20 }); // Giltigt
handleEvent("mouseover", { target: document.getElementById("myElement")! }); // Giltigt
handleEvent("keydown", { key: "Enter" }); // Giltigt

handleEvent("click", { key: "Enter" }); // Fel: Argument av typen '{ key: string; }' kan inte tilldelas till parameter av typen '{ x: number; y: number; }'.

Detta exempel skapar en EventData-typ som definierar olika datastrukturer baserat på händelsetypen. Detta låter dig säkerställa att korrekt data skickas till funktionen handleEvent för varje händelsetyp.

Bästa praxis för att använda literal-typer

För att effektivt använda literal-typer i dina TypeScript-projekt, överväg följande bästa praxis:

Fördelar med att använda literal-typer

Slutsats

TypeScript literal-typer är en kraftfull funktion som låter dig upprätthålla strikta värdebegränsningar, förbättra kodens tydlighet och förhindra fel. Genom att förstå deras syntax, användning och fördelar kan du utnyttja literal-typer för att skapa mer robusta och underhållbara TypeScript-applikationer. Från att definiera färgpaletter och API-ändpunkter till att hantera olika språk och skapa typsäkra händelsehanterare, erbjuder literal-typer ett brett spektrum av praktiska tillämpningar som kan avsevärt förbättra ditt utvecklingsflöde.