JavaScript: dynamisk

Värdet får sin typ när koden körs. '10' är en sträng och 10 är ett tal, och en variabel kan byta typ när som helst.

let price = 39;
price = 'gratis'; // inga problem

TypeScript: statisk

Typen bestäms när koden skrivs, och kontrolleras innan den körs.

let price = 39;
price = 'gratis';
// Type 'string' is not assignable
// to type 'number'.

Sträng från ett formulär

const quantity = input.value; // '2'
const total = quantity * 39;

Stavfel

product.prise;
// undefined, utan fel

Fel typ in

formatPrice('39');
// TypeError: price.toFixed
// is not a function

Felen kommer tidigare

Från när användaren kör appen till när du skriver koden. undefined upptäcks i editorn, inte i produktion.

Editorn hjälper dig

Autocomplete som vet vilka egenskaper som finns, och röda streck direkt när något är fel.

Koden dokumenterar sig själv

add(a: number, b: number): number säger vad funktionen tar och ger, utan att du läser koden.

Mer att skriva

Typer för parametrar, objekt och data utifrån. Men TypeScript räknar ut mycket själv.

Ett steg till

Koden måste kontrolleras och byggas. Med Vite märks det knappt.

Ingen garanti när koden körs

Typerna finns bara medan du skriver. Data från ett API kan fortfarande vara fel. Det tar vi i morgon och nästa vecka.

tsc

TypeScript-kompilatorn. Kontrollerar typerna. I Vite-mallen bygger den ingenting (noEmit).

Vite

Tar bort typerna och bygger JavaScript. npm run dev kontrollerar inga typer.

ESLint

Hittar dålig kod, till exempel any och oanvända variabler. Med typescript-eslint förstår den TypeScript.

tsconfig.json

{
  "compilerOptions": {
    "target": "es2023",
    "lib": ["ES2023", "DOM"],
    "moduleResolution": "bundler",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  },
  "include": ["src"]
}

Var är strict?

Det står ingenstans. Sedan TypeScript 6 är strict på som standard. Då kontrolleras bland annat null och undefined, och en parameter utan typ blir ett fel i stället för any.

TypeScript räknar ut typen

const cafe = 'Kaféet'; // 'Kaféet'
let guests = 12;      // number

Du skriver typen

let rating: number;
const isOpen: boolean = true;

Primitiver

string   // 'hej', ''
number   // 0, 39, -4.5
boolean  // true, false

Inget värde

null
undefined

let note: string | null = null;

Stäng av

any
// allt är tillåtet,
// inget kontrolleras

Härledd

const prices = [39, 49, 29]; // number[]
prices.push('gratis');
// Argument of type 'string' is not
// assignable to parameter of type 'number'.

Tom array: skriv typen

const names: string[] = [];
names.push('Ada', 'Grace');

Parametrarna måste typas

const sum = (numbers: number[]): number =>
  numbers.reduce((total, n) => total + n, 0);

Returtypen kan du skriva

TypeScript räknar ut den, men skriver du den hamnar felet i funktionen och inte där den anropas.

const logPrice = (price: number): void => {
  console.log(price);
};

Valfri med ?

const greet = (name: string, greeting?: string) =>
  `${greeting ?? 'Hej'}, ${name}!`;
// greeting: string | undefined

Standardvärde

const greet = (name: string, greeting = 'Hej') =>
  `${greeting}, ${name}!`;
// greeting: string

type

type Product = {
  readonly id: string;
  name: string;
  price: number;
  category?: string;
};

Användningen

const bun: Product = {
  id: 'bulle',
  name: 'Kanelbulle',
  price: 35,
};
bun.id = 'bulle2';
// Cannot assign to 'id' because
// it is a read-only property.

interface och extends

interface Customer {
  name: string;
  email: string;
}

interface Member extends Customer {
  memberSince: number;
}

type eller interface?

För objekt gör de nästan samma sak. interface kan utökas med extends. type kan också beskriva unions, som vi tar i morgon. Välj ett och var konsekvent i projektet.

Koden

const formatProduct = (product: Product): string =>
  `${product.name}: ${product.price} kr`;

En egenskap för mycket

formatProduct({ id: 'te', name: 'Te',
  price: 29, color: 'grön' });
// Object literal may only specify known
// properties, and 'color' does not exist
// in type 'Product'.