PricingLoginStart free
Frontend Academy · Les

Primitieve types unions en type aliases

Voorzie variabelen van annotaties met string, number, boolean en arrays. Maak union types met | en geef ze leesbare namen met type aliases.

Les 2 van 413 stappen

Primitieve types unions en type aliases is een gratis Frontend Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.

Variabelen annoteren

Voeg type-annotaties toe met een dubbele punt na de variabelenaam. TypeScript leidt typen af wanneer dat mogelijk is — voeg expliciete annotaties toe wanneer inferentie onduidelijk is of voor documentatie.

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

Primitieve typen

De primitieve typen van TypeScript komen overeen met de primitieven van JavaScript: string, number (geen onderscheid tussen gehele getallen en kommagetallen), boolean, null, undefined, symbol en 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

Geef een array een type met Type[] of het generieke type Array<Type>. Beide zijn gelijkwaardig.

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

Unietypen: |

Met unietypen kan een variabele een van meerdere typen bevatten. Gebruik de pipe-operator |. TypeScript beperkt het type binnen voorwaardelijke blokken.

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
}

Letterlijke typen

Je kunt letterlijke waarden van het type tekenreeks, getal of booleaan als typen gebruiken. In combinatie met unies maken ze een vaste verzameling toegestane waarden, vergelijkbaar met een 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

Type-aliases: type

Het sleutelwoord type maakt een type-alias — een herbruikbare naam voor elk type. Aliases werken voor primitieve typen, unies, objecten, tupels en complex samengestelde typen.

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);

Objecttypen met type

Beschrijf de vorm van objecten met type-aliases. Markeer eigenschappen als optioneel met ? en als alleen-lezen met 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()
};

Intersectietypen: &

Combineer meerdere typen met de operator &. Het resulterende type heeft alle eigenschappen van beide typen. Dit is handig om typen uit te breiden.

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

Het type any — uitweg

Met any schakel je typecontrole uit voor een waarde. Dat werkt aanstekelijk: waarden die van any worden afgeleid, zijn ook any. Gebruik dit als laatste redmiddel tijdens een migratie, nooit als langetermijnoplossing.

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
}

Het type unknown — veilig alternatief voor any

unknown is het typeveilige equivalent van any. Je kunt een waarde van het type unknown niet gebruiken zonder eerst het type ervan te beperken. Zo word je gedwongen externe gegevens te valideren.

Tupels — arrays met vaste lengte

Een tupel is een array met een vaste lengte waarbij elke positie een bekend type heeft.

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);

Korte controle

Met welke functie van TypeScript kan een functie zowel een tekenreeks als een getal accepteren?

Beantwoord dit in de interactieve les

Samenvatting: primitieve typen, unies en aliases

Primitieve typen: string, number, boolean, null en undefined. Arrays: Type[]. Unietypen: A | B. Letterlijke typen voor vaste waardeverzamelingen. Een type-alias voor herbruikbare typennamen. Optionele eigenschappen met ?. readonly voor onveranderlijke eigenschappen. Gebruik voor externe gegevens bij voorkeur unknown in plaats van any.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen
41
Lessen
163
Gratis beginnen met lerenBekijk de volledige cursus

Veelgestelde vragen

Is de les “Primitieve types unions en type aliases” gratis?

Ja — de volledige tekst van “Primitieve types unions en type aliases” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.

Wat leer ik in “Primitieve types unions en type aliases”?

Voorzie variabelen van annotaties met string, number, boolean en arrays. Maak union types met | en geef ze leesbare namen met type aliases. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Frontend Academy te beginnen?

Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Primitieve types unions en type aliases”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?

Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

  1. Waarom TypeScript: types vangen fouten tijdens het compileren
  2. Primitieve types unions en type aliases
  3. Interfaces en objecttypes
  4. TS compileren en tsconfig.json
← Terug naar Frontend Academy