TypeScript: essentie van de taal, strikte typering en React Native

Wat is TypeScript?

TypeScript — een programmeertaal van Microsoft (2012), ontwikkeld door Anders Hejlsberg (maker van C# en Turbo Pascal). TypeScript breidt JavaScript uit met een statisch typesysteem, interfaces, generics, enumeraties en decorators. TS-code wordt gecompileerd naar pure JavaScript (transpilatie) met de compiler tsc of Babel — de output is standaard JS die in elke omgeving werkt.

De motivatie voor TypeScript — de beperkingen van JavaScript in grote projecten. De dynamische typering van JS leidt tot fouten die pas in runtime worden ontdekt: undefined is not a function, Cannot read property of null. TypeScript verplaatst typecontrole naar de compilatiefase en voorkomt deze fouten voordat de code wordt uitgevoerd. Hoe groter het project, hoe significanter de voordelen van TS: in een codebase van 100.000+ regels voorkomt TS honderden potentiële bugs.

Het belangrijkste kenmerk van TypeScript — strikte typering met de optionele vlag strict: true in tsconfig.json. In strikte modus worden alle controles ingeschakeld: strictNullChecks (null/undefined zijn incompatibel met andere types), noImplicitAny (verbiedt impliciete any), strictFunctionTypes (contravariantie van functieparameters). Standaard wordt strict: true aanbevolen voor alle nieuwe projecten.

TypeScript vs JavaScript

TypeScript verschilt alleen in de ontwikkelfase van JavaScript. Na compilatie worden de types gewist — de runtime voert gewone JS uit zonder prestatieverlies. Dit is een compromis: ontwikkeling vereist een extra compilatiestap, maar biedt autocomplete in IDE, refactoring met hernoemen van symbolen en typedocumentatie direct in de code.

TypeScript-typesysteem

Het TypeScript-typesysteem — structureel (structural typing), niet nominatief: twee types zijn compatibel als hun structuur overeenkomt, ongeacht de naam. Dit verschilt van Java/C#, waar compatibiliteit wordt bepaald door de klassenaam of interfacenaam. Structurele typering vereenvoudigt integratie met bestaande JS-code — u hoeft geen implements voor elk type te declareren.

Basis- en geavanceerde types

TypeScript ondersteunt de primitieve types van JS plus: any (uitschakelen van controle), unknown (veilige any — vereist controle vóór gebruik), never (keert nooit terug), void (geen return), tuple (tuple met vaste lengte), enum (enumeratie), union (string | number), intersection (A & B), literal ('red' | 'blue'), index signature ([key: string]: number).

// Basis TypeScript-typesysteem
// Primitieve types
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// Union en Literal types
type Platform = 'ios' | 'android' | 'web';
type Status = 'idle' | 'loading' | 'success' | 'error';

function getSDKVersion(platform: Platform): number {
  switch (platform) {
    case 'ios': return 17;
    case 'android': return 34;
    case 'web': return 2025;
  }
}

// Tuple — tuple met vaste lengte
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — enumeratie met auto-increment
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — veilig alternatief voor any
function parseJSON(json: string): unknown {
  return JSON.parse(json);
}

const data = parseJSON('{"name":"TS"}');
if (typeof data === 'object' && data !== null) {
  console.log((data as Record<string, unknown>).name);
}

Het type Platform — een union van stringliterals die de waarden beperkt tot drie varianten. Als 'windows' wordt doorgegeven, geeft TypeScript een foutmelding. De tuple Coordinate garandeert exact twee getallen — handig voor coördinaten of RGB-kleuren. Enum AppState compileert naar een object met reverse mapping. Unknown dwingt typecontrole af vóór gebruik — in tegenstelling tot any is unknown standaard veilig.

Interfaces en type-aliassen

Interfaces (interface) en type-aliassen (type) beschrijven in TypeScript de vorm van objecten. Interfaces kunnen worden samengevoegd (declaration merging — herhaalde declaratie voegt velden toe) en uitgebreid (extends). Type-aliassen kunnen union, intersection, tuple en conditionele types beschrijven, maar ondersteunen geen declaration merging. Regel: gebruik interface voor API-objecten, type — voor al het andere.

// Interfaces en types voor React Native
// Interface met optionele velden
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // optioneel veld
  readonly createdAt: Date; // alleen-lezen
}

// Interface-uitbreiding (extends)
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

// Type voor API-gegevens
type ApiResponse<T> = {
  data: T;
  status: Status;
  error?: string;
};

// Utility types — Partial maakt alle velden optioneel
type PartialUser = Partial<User>;

// Pick — selecteert opgegeven velden
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — woordenboek met getypeerde sleutels
type UserMap = Record<string, User>;

Interface User met ? (optioneel veld) en readonly (alleen-lezen). ApiResponse<T> — generic-interface voor API-antwoorden. Partial<User> — utility-type dat alle velden optioneel maakt (nuttig voor bewerkingsformulieren). Pick<User, 'id' | 'name'> selecteert alleen de opgegeven velden — handig voor voorbeeldcomponenten. Record<string, User> — woordenboek van gebruikers op ID.

Generics en utility-types

Generics — een van de belangrijkste functies van TypeScript, waarmee componenten kunnen worden gemaakt die met elk type werken zonder typeveiligheid te verliezen. Een generieke functie wordt gedefinieerd met een typeparameter in punthaken: function identity<T>(arg: T): T. Type T wordt automatisch afgeleid uit het argument of expliciet opgegeven: identity<string>('hello').

Utility-types — ingebouwde generics voor typetransformatie: Partial<T> (alle velden optioneel), Required<T> (alle velden verplicht), Readonly<T> (alle velden alleen-lezen), Pick<T, K> (veldselectie), Omit<T, K> (velden uitsluiten), Record<K, T> (woordenboek), Exclude<T, U> (union uitsluiten), Extract<T, U> (union extraheren), NonNullable<T> (null/undefined uitsluiten).

// Generics in TypeScript
// Generieke functie voor werken met API
async function fetchData<T>(url: string): Promise<T> {
  const response = await fetch(url);

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return response.json() as Promise<T>;
}

// Gebruik met concreet type
interface Product {
  id: number;
  title: string;
  price: number;
}

const products = await fetchData<Product[]>('/api/products');

// Generieke klasse voor statebeheer
class StateManager<S> {
  private state: S;

  constructor(initial: S) {
    this.state = initial;
  }

  getState(): S {
    return this.state;
  }

  updateState(partial: Partial<S>): void {
    this.state = { ...this.state, ...partial };
  }
}

// Getypeerd werken met Redux Reducer
type Action<T, P> = {
  type: T;
  payload: P;
};

type UserAction =
  | Action<'SET_USER', User>
  | Action<'CLEAR_USER', undefined>
  | Action<'UPDATE_USER', Partial<User>>;

De functie fetchData<T> — een getypeerde wrapper rond fetch. Parameter T bepaalt de vorm van het antwoord: bij aanroep fetchData<Product[]> weet TypeScript dat de geretourneerde array Product-objecten bevat. De klasse StateManager<S> beheert de state van elk type — Partial<S> voor gedeeltelijke updates. Action<T, P> — discriminated union voor Redux-actions met automatische typevernauwing in switch.

TypeScript in React Native

TypeScript in React Native zorgt voor strikte typering van props en state van componenten. React Native CLI maakt een template met .tsx-extensie en tsconfig.json. PropTypes (JS) worden vervangen door TypeScript-interfaces — controle gebeurt tijdens compilatie, niet in runtime. styled-components en React Navigation hebben volledige types.

Typering van componenten

React.FC<Props> — het type van een functionele component met props. Kinderen (children) worden automatisch getypeerd. useRef<T> — verwijzing naar een native component. useState<S> — state met type-afleiding. useNavigation<T> — getypeerde navigatie. useCallback, useMemo — met automatische type-afleiding. Alle React hooks zijn volledig getypeerd.

// Getypeerde React Native-component
import React, { useState, useCallback } from 'react';
import {
  View, Text, FlatList, TouchableOpacity,
  StyleSheet
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';

// Types voor navigatie en gegevens
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

type NavigationProp =
  NativeStackNavigationProp<RootStackParamList, 'Home'>;

// Interface voor props
interface ProductListProps {
  products: Product[];
  onSelect: (id: number) => void;
}

// Getypeerde functionele component
const ProductList: React.FC<ProductListProps> = ({
  products,
  onSelect
}) => {
  const navigation = useNavigation<NavigationProp>();
  const [selectedId, setSelectedId] = useState<number | null>(null);

  const handlePress = useCallback((id: number) => {
    setSelectedId(id);
    onSelect(id);
    navigation.navigate('Profile', { userId: String(id) });
  }, [onSelect, navigation]);

  const renderItem = useCallback(({ item }: { item: Product }) => (
    <TouchableOpacity onPress={() => handlePress(item.id)}>
      <Text>{item.title}</Text>
      <Text>${item.price.toFixed(2)}</Text>
    </TouchableOpacity>
  ), [handlePress]);

  return (
    <FlatList
      data={products}
      renderItem={renderItem}
      keyExtractor={(item) => String(item.id)}
    />
  );
};

Het type RootStackParamList — een woordenboek van routes met hun parameters. NavigationProp — getypeerde navigatie: navigation.navigate('Profile', { userId }) controleert dat Profile userId accepteert. useCallback met getypeerde parameters voorkomt onnodige herrenders. FlatList wordt getypeerd via een generic: — data en renderItem krijgen automatisch types.

TypeScript-ontwikkeltools

TypeScript-tools omvatten de compiler tsc, tsconfig.json, IDE-ondersteuning in VS Code, ESLint met @typescript-eslint, Prettier en DefinitelyTyped (@types/*). tsc — compiler die .ts omzet naar .js. tsconfig.json — configuratie: target (ES2020), module (ESNext), strict: true, outDir (uitvoermap). sourceMap — debuggen van TS in de browser via code maps.

DefinitelyTyped — een repository met typeringen voor bibliotheken zonder ingebouwde types. Installatie: npm install @types/react @types/react-native --save-dev. .d.ts-bestanden — typedecaraties. Moderne bibliotheken (React, React Native, Angular) bevatten ingebouwde types en hebben geen @types/ nodig. Voor oude JS-bibliotheken is DefinitelyTyped de enige bron van types.

// tsconfig.json — minimale configuratie
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noEmit": true // alleen controle, zonder JS-generatie
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

De optie strict: true schakelt alle typecontroles in — aanbevolen voor alle projecten. jsx: 'react-native' behoudt JSX zonder transformatie (React Native verwerkt JSX via Babel). moduleResolution: 'node' — modulezoekopdracht zoals in Node.js. esModuleInterop — compatibiliteit met CommonJS-modules. noEmit: true — alleen controle zonder JS-bestanden te genereren (Babel of Metro genereren JS).