PricingLoginStart free
Frontend Academy · Lektion

Primitive typer, unioner og typealiaser

Annotér variabler med string, number, boolean og arrays. Opret union-typer med |, og giv dem læsbare navne med typealiaser.

Lektion 2 af 413 trin

Primitive typer, unioner og typealiaser er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Annotering af variabler

Tilføj typeannoteringer med et kolon efter variabelnavnet. TypeScript udleder typer, når det er muligt – tilføj eksplicitte annoteringer, når inferensen er uklar, eller når du vil dokumentere typen.

let score: number = 0;
const greeting: string = 'Hello';
let active: boolean = true;
let data: null = null;
let placeholder: undefined;

// Inferred (no annotation needed):
const pi = 3.14;  // TypeScript knows this is number

Primitive typer

TypeScripts primitive typer svarer til JavaScripts primitiver: string, number (ingen forskel på heltal og kommatal), boolean, null, undefined, symbol, bigint.

function greet(name: string): string {
  return `Hello, ${name}`;
}

function double(n: number): number {
  return n * 2;
}

function toggle(active: boolean): boolean {
  return !active;
}

Arrays

Angiv typen for et array med Type[] eller den generiske type Array<Type>. De to former er ækvivalente.

const names: string[] = ['Alice', 'Bob'];
const scores: number[] = [98, 87, 72];
const flags: boolean[] = [true, false, true];

// Generic syntax:
const items: Array<string> = ['a', 'b'];

Unionstyper: |

Unionstyper lader en variabel indeholde én blandt flere typer. Brug pipe-operatoren |. TypeScript indsnævrer typen inde i betingelser.

function formatId(id: number | string): string {
  if (typeof id === 'number') {
    return `#${id.toString().padStart(6, '0')}`; // id is narrowed to number
  }
  return id.toUpperCase(); // id is narrowed to string
}

Literaltyper

Du kan bruge bogstavelige streng-, tal- eller boolske værdier som typer. Kombineret med unioner kan de oprette et fast sæt tilladte værdier – ligesom en enum.

type Direction = 'north' | 'south' | 'east' | 'west';
type Status = 'pending' | 'active' | 'cancelled';
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

function move(dir: Direction) { /* ... */ }
move('north'); // OK
move('up');    // Error: Argument not assignable

Typealiaser: type

Nøgleordet type opretter et typealias – et genanvendeligt navn for enhver type. Aliaser fungerer for primitiver, unioner, objekter, tupler og komplekse sammensatte typer.

type UserId = string | number;
type RGB = [number, number, number]; // tuple
type Callback = (event: MouseEvent) => void;

const userId: UserId = 42;
const red: RGB = [255, 0, 0];
const handler: Callback = (e) => console.log(e.type);

Objekttyper med type

Beskriv objekters struktur med typealiaser. Markér egenskaber som valgfrie med ? og skrivebeskyttede med readonly.

type User = {
  id: number;
  name: string;
  email: string;
  role?: 'admin' | 'user'; // optional
  readonly createdAt: Date; // can't reassign
};

const user: User = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com',
  createdAt: new Date()
};

Snitstyper: &

Kombinér flere typer med operatoren &. Den resulterende type har alle egenskaber fra begge typer. Det er nyttigt, når du vil udvide typer.

type Timestamped = {
  createdAt: Date;
  updatedAt: Date;
};
type UserWithTimestamp = User & Timestamped;
// Has all User properties AND createdAt/updatedAt

Typen any – en nødløsning

any fravælger typekontrol for en værdi. Det smitter – værdier, der er afledt af any, er også any. Brug det som sidste udvej under en migrering, aldrig som en langsigtet løsning.

let data: any = fetch('/api/data'); // no type checking
data.foo.bar.baz; // no error — and no protection

// Better: use 'unknown' and narrow it:
let raw: unknown = getExternalData();
if (typeof raw === 'string') {
  console.log(raw.toUpperCase()); // narrowed
}

Typen unknown – et sikkert alternativ til any

unknown er det typesikre modstykke til any. Du kan ikke bruge en unknown-værdi, før du først har indsnævret dens type. Det tvinger dig til at validere eksterne data.

Tupler – arrays med fast længde

En tupel er et array med fast længde, hvor hver position har en kendt type.

type Point = [number, number];
const origin: Point = [0, 0];
const p: Point = [3, 4];

// React useState returns a tuple:
const [count, setCount] = useState<number>(0);

Hurtigt tjek

Hvilken TypeScript-funktion lader en funktion acceptere enten en streng eller et tal?

Besvar den i den interaktive lektion

Opsummering: primitive typer, unioner og aliaser

Primitive typer: string, number, boolean, null, undefined. Arrays: Type[]. Unionstyper: A | B. Literaltyper til faste værdisæt. Typealiaser til genanvendelige typenavne. Valgfrie egenskaber med ?. readonly til uforanderlige egenskaber. Foretræk unknown frem for any til eksterne data.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
41
Lektioner
163
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Primitive typer, unioner og typealiaser” gratis?

Ja — hele teksten til “Primitive typer, unioner og typealiaser” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Primitive typer, unioner og typealiaser”?

Annotér variabler med string, number, boolean og arrays. Opret union-typer med |, og giv dem læsbare navne med typealiaser. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Primitive typer, unioner og typealiaser”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Hvorfor TypeScript: Typer fanger fejl ved kompilering
  2. Primitive typer, unioner og typealiaser
  3. Interfaces og objekttyper
  4. Kompilering af TS og tsconfig.json
← Tilbage til Frontend Academy