Frontend Academy · leksjon

Primitive typer, unioner og typealiaser

Annoter variabler med string, number, boolean og arrayer. Opprett union-typer med | og gi dem lesbare navn med typealiaser.

Leksjon 2 av 413 trinn

Primitive typer, unioner og typealiaser er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Annotere variabler

Legg til typeannotasjoner med et kolon etter variabelnavnet. TypeScript utleder typer når det er mulig – legg til eksplisitte annotasjoner når inferensen er uklar, eller for dokumentasjon.

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 tilsvarer JavaScripts primitiver: string, number (uten forskjell på heltall og flyttall), boolean, null, undefined, symbol og bigint.

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

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

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

Matriser

Angi typen til en matrise med Type[] eller den generiske typen Array<Type>. Begge er ekvivalente.

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'];

Union-typer: |

Union-typer lar en variabel inneholde én av flere typer. Bruk pipe-operatoren |. TypeScript snevrer inn typen i betingede uttrykk.

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
}

Literal-typer

Du kan bruke bokstavelige streng-, tall- eller boolske verdier som typer. Kombinert med unioner oppretter de et fast sett med tillatte verdier – omtrent som 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økkelordet type oppretter et typealias – et gjenbrukbart navn for en hvilken som helst 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. Marker egenskaper som valgfrie med ? og som 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()
};

Snitt-typer: &

Kombiner flere typer med operatoren &. Resultatet har alle egenskapene fra begge typene. Dette er nyttig når typer skal utvides.

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

Typen any – nødløsningen

any deaktiverer typesjekking for en verdi. Det sprer seg videre – verdier som stammer fra any, får også typen any. Bruk dette som siste utvei under migrering, aldri som en langsiktig 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 trygt alternativ til any

unknown er det typesikre motstykket til any. Du kan ikke bruke en unknown-verdi uten først å snevre inn typen. Dette tvinger Deg til å validere eksterne data.

Tupler – matriser med fast lengde

En tuppel er en matrise med fast lengde, der hver posisjon har en kjent 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);

Hurtigsjekk

Hvilken TypeScript-funksjon lar en funksjon ta imot enten en streng eller et tall?

Besvar den i den interaktive leksjonen

Oppsummering: Primitive typer, unioner og aliaser

Primitive typer: string, number, boolean, null og undefined. Matriser: Type[]. Union-typer: A | B. Literal-typer for faste verdisett. Typealiaser for gjenbrukbare typenavn. Valgfrie egenskaper med ?. readonly for uforanderlige egenskaper. Foretrekk unknown fremfor any for eksterne data.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Primitive typer, unioner og typealiaser» gratis?

Ja – hele teksten i «Primitive typer, unioner og typealiaser» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Primitive typer, unioner og typealiaser»?

Annoter variabler med string, number, boolean og arrayer. Opprett union-typer med | og gi dem lesbare navn med typealiaser. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Primitive typer, unioner og typealiaser»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?

Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Hvorfor TypeScript: typer fanger feil ved kompilering
Primitive typer, unioner og typealiaser
Grensesnitt og objekttyper
Kompilere TS og tsconfig.json

← Tilbake til Frontend Academy