Vad är TypeScript? En lättförståelig guide för icke-utvecklare

TypeScript är JavaScript med typer. Du lägger till etiketter som säger vilken sorts data varje värde ska vara – ett tal, en text, en lista med beställningar – och TypeScript kontrollerar din kod för felaktigheter innan den ens körs. TypeScript-sidan beskriver det som “JavaScript med syntax för typer”; typerna tas bort när koden omvandlas till vanlig JavaScript, som sedan körs överallt där JavaScript körs.

Varför det spelar roll när du bygger med AI

AI-modeller skriver kod snabbt, och snabb kod har misstag: ett fält som heter customerName i en fil och customer_name i en annan, ett pris skickat som text i stället för ett tal, en funktion anropad med ett saknat värde. I vanlig JavaScript syns många av dessa misstag först när någon klickar på fel knapp.

TypeScript fångar många av dem tidigare, medan koden skrivs:

• AI:n får direkt återkoppling. Typfel pekar på exakt vilken rad som är fel, så agenten kan åtgärda det innan du ser det.
• Ändringar blir säkrare. Byter du namn på ett fält flaggar TypeScript varje ställe som fortfarande använder det gamla namnet.
• Koden förklarar sig själv. Typer dokumenterar vad en funktion förväntar sig och returnerar, vilket hjälper dig, AI:n och alla utvecklare som arbetar med den senare.
• Editorer blir smartare. Autokomplettering och “gå till definition” fungerar bättre eftersom editorn vet vad varje värde är.

Det är en stor anledning till att många AI-appbyggare använder TypeScript som standard.

En vardagsliknelse

Tänk dig ett lager med märkta fack. Varje fack har en skylt: “Endast pallar”, “Kyld”, “Max 500 kg”. När en leverans anländer jämför en kontrollant vid dörren varorna med skylten. Frysad fisk på väg till torrvarufacket stoppas vid dörren, inte upptäckt en vecka senare när den luktar.

TypeScript är kontrollanten vid dörren. Typerna är skyltarna. Kontrollen sker innan varorna – din kod – tas i bruk. Och när allt är på plats tas skyltarna bort: den körande JavaScript-koden har inga typer kvar.

Så fungerar TypeScript

1. Du (eller AI:n) skriver .ts- eller .tsx-filer – TypeScript, med typetiketter.
2. Typkontrollen läser koden och rapporterar felaktigheter som fel i editorn eller bygget.
3. Ett byggsteg tar bort typerna och ger vanlig JavaScript.
4. JavaScript körs i webbläsaren eller på en server (Node.js, Deno, Bun).

En viktig konsekvens: TypeScript kontrollerar koden du skrev, inte data som kommer in medan appen körs. Om ett externt API skickar tillbaka något oväntat kan TypeScript inte se det om du inte lägger till validering under körning.

Ett praktiskt exempel: ett bokningsformulär

Säg att du bygger en bokningsapp för en frisersalong. Här är en typ som beskriver en bokning:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // ? betyder att fältet är valfritt
};

Och en funktion som räknar ut en förskottsbetalning:

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

Titta nu på vad TypeScript fångar.

Ett felstavat fält.

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScript rapporterar att prise inte är en känd egenskap och att price saknas. I vanlig JavaScript skulle detta tyst räkna ut en förskottsbetalning på NaN (inte ett tal).

Fel sorts värde.

const booking: Booking = { ...otherFields, price: "40" };

TypeScript rapporterar att en sträng inte kan användas där ett tal förväntas. Utan det fungerar "40" * 0.2 av en slump, men "40" + 5 ger "405" – den sorts bugg som dyker upp på en faktura.

En tjänst som inte finns.

const booking: Booking = { ...otherFields, service: "perm" };

TypeScript rapporterar att "perm" inte är en av de tillåtna tjänsterna. När salongen senare lägger till permanenter lägger du till dem i typen, och TypeScript visar varje ställe som behöver uppdateras – prislistan, formuläret, kalenderfärgerna.

Vad det inte kan fånga. Om bokningsformuläret skickar price: "40" från webbläsaren till servern ser TypeScript på servern inte det under körning. Därför validerar välbyggda appar också inkommande data, ofta med ett valideringsbibliotek som kontrollerar formen och omvandlar den till en riktig Booking.

TypeScript kontra JavaScript

Vanliga termer förklarade

Vanliga misstag och missuppfattningar

• “TypeScript gör koden felfri.” Det fångar felaktigheter i datastrukturen, inte fel logik. En deposition på 2 % i stället för 20 % går igenom typkontrollen utan problem.
• “Typer skyddar mig från dålig indata.” Typer försvinner under körning. Validera data från användare, formulär och API:er.
• any överallt. När en AI kör fast kan den använda any eller // @ts-ignore för att tysta felen. Det döljer problem i stället för att lösa dem.
• Att ignorera typfel eftersom förhandsvisningen fungerar. Vissa verktyg kör ändå kod med typfel. Felen är fortfarande buggar som väntar på att hända.
• “TypeScript är långsammare.” Typerna tas bort före körning; JavaScript som körs är i princip densamma.
• “Det är bara för stora team.” Soloföretagare drar också nytta av det, särskilt när en AI gör större delen av ändringarna.

Vad du kan be din AI-byggare om

• “Använd TypeScript med strikt läge påslaget.”
• “Definiera delade typer för våra viktigaste poster – Customer, Booking, Invoice – och använd dem både i frontend och backend.”
• “Använd inte any eller @ts-ignore för att komma förbi fel; åtgärda det underliggande problemet och berätta vad det var.”
• “Validera all inkommande data på servern, inte bara med typer.”
• “Kör typkontrollen och åtgärda varje fel innan du säger att det är klart.”
• “När du byter namn på ett fält, uppdatera varje ställe som TypeScript flaggar.”
• “Förklara det här typfelet på vanlig svenska.”

För mer om hur du kontrollerar det AI:n producerat, se hur du granskar AI-genererad kod och hur du felsöker en AI-byggd app.

TypeScript i Mythex

När du inte ber om något särskilt startar Mythex nya projekt med Vite + React + TypeScript + Tailwind. Kodeditorn har språkstöd – komplettering, diagnostik och gå-till-definition för TypeScript och JavaScript, bland andra språk – så typfel syns i koden, inte bara i förhandsvisningen. Editorn är skrivskyddad på Free och fullt redigerbar på Pro. Du kan fortfarande be om en annan uppsättning i din första prompt; dokumentationssidan om hur tekniken väljs förklarar hur, och dokumentationen för kodeditorn beskriver vad editorn visar.

Frågor