TypeScript: språkets essens, strikt typning och React Native

Vad är TypeScript?

TypeScript — ett programmeringsspråk från Microsoft (2012), utvecklat av Anders Hejlsberg (skaparen av C# och Turbo Pascal). TypeScript utökar JavaScript med ett statiskt typsystem, gränssnitt, generics, uppräkningar och dekoratorer. TS-kod kompileras till ren JavaScript (transpilering) med hjälp av kompilatorn tsc eller Babel — utmatningen är standard JS som fungerar i vilken miljö som helst.

Motivationen för att skapa TypeScript — begränsningarna hos JavaScript i stora projekt. JS dynamiska typning leder till fel som bara upptäcks vid runtime: undefined is not a function, Cannot read property of null. TypeScript flyttar typkontrollen till kompileringsfasen och förhindrar dessa fel innan koden exekveras. Ju större projektet är, desto mer betydelsefulla är TS fördelar: i en kodbas med 100 000+ rader förhindrar TS hundratals potentiella buggar.

Nyckelfunktionen hos TypeScript — strikt typning med den valfria flaggan strict: true i tsconfig.json. I strikt läge aktiveras alla kontroller: strictNullChecks (null/undefined är inkompatibla med andra typer), noImplicitAny (förbjuder implicit any), strictFunctionTypes (kontravarians av funktionsparametrar). Som standard rekommenderas strict: true för alla nya projekt.

TypeScript vs JavaScript

TypeScript skiljer sig från JavaScript endast i utvecklingsfasen. Efter kompilering raderas typerna — runtime kör vanlig JS utan prestandaförlust. Detta är en kompromiss: utveckling kräver ett extra kompileringssteg, men ger autocomplete i IDE, refaktorering med omdöpning av symboler och typdokumentation direkt i koden.

TypeScripts typsystem

TypeScripts typsystem — strukturellt (structural typing), inte nominativt: två typer är kompatibla om deras struktur matchar, oavsett namn. Detta skiljer sig från Java/C#, där kompatibilitet bestäms av klass- eller gränssnittsnamnet. Strukturell typning förenklar integration med befintlig JS-kod — man behöver inte deklarera implements för varje typ.

Grundläggande och avancerade typer

TypeScript stöder JS primitiva typer plus: any (avaktivering av kontroll), unknown (säker any — kräver kontroll före användning), never (returnerar aldrig), void (ingen retur), tuple (tupel med fast längd), enum (uppräkning), union (string | number), intersection (A & B), literal ('red' | 'blue'), index signature ([key: string]: number).

// Grundläggande TypeScript-typsystem
// Primitiva typer
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// Union- och Literal-typer
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 — tupel med fast längd
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — uppräkning med autoinkrement
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — säkert alternativ till 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);
}

Typen Platform — en union av strängliteraler som begränsar värdena till tre varianter. Om 'windows' skickas ger TypeScript ett fel. Tupeln Coordinate garanterar exakt två tal — detta är bekvämt för koordinater eller RGB-färger. Enum AppState kompileras till ett objekt med omvänd mappning. Unknown tvingar fram typkontroll före användning — till skillnad från any är unknown som standard säker.

Gränssnitt och typalias

Gränssnitt (interface) och typalias (type) i TypeScript beskriver formen på objekt. Gränssnitt kan slås samman (declaration merging — omdeklaration lägger till fält) och utökas (extends). Typalias kan beskriva union, intersection, tuple och villkorliga typer, men stöder inte declaration merging. Regel: använd interface för API-objekt, type — för allt annat.

// Gränssnitt och typer för React Native
// Gränssnitt med valfria fält
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // valfritt fält
  readonly createdAt: Date; // skrivskyddat
}

// Utökning av gränssnitt (extends)
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

// Typ för API-data
type ApiResponse<T> = {
  data: T;
  status: Status;
  error?: string;
};

// Utility types — Partial gör alla fält valfria
type PartialUser = Partial<User>;

// Pick — väljer angivna fält
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — ordbok med typade nycklar
type UserMap = Record<string, User>;

Gränssnitt User med ? (valfritt fält) och readonly (skrivskyddat). ApiResponse<T> — generiskt gränssnitt för API-svar. Partial<User> — verktygstyp som gör alla fält valfria (användbart för redigeringsformulär). Pick<User, 'id' | 'name'> väljer endast angivna fält — bekvämt för förhandsgranskningskomponenter. Record<string, User> — ordbok över användare efter ID.

Generics och verktygstyper

Generics — en av de viktigaste funktionerna i TypeScript, som gör det möjligt att skapa komponenter som fungerar med alla typer utan att förlora typsäkerhet. En generisk funktion definieras med en typparameter i vinkelparenteser: function identity<T>(arg: T): T. Typen T härleds automatiskt från argumentet eller anges explicit: identity<string>('hello').

Verktygstyper — inbyggda generics för typtransformering: Partial<T> (alla fält valfria), Required<T> (alla fält obligatoriska), Readonly<T> (alla fält skrivskyddade), Pick<T, K> (fältval), Omit<T, K> (fältexkludering), Record<K, T> (ordbok), Exclude<T, U> (unions exkludering), Extract<T, U> (unions extrahering), NonNullable<T> (exkludering av null/undefined).

// Generics i TypeScript
// Generisk funktion för arbete med 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>;
}

// Användning med konkret typ
interface Product {
  id: number;
  title: string;
  price: number;
}

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

// Generisk klass för tillståndshantering
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 };
  }
}

// Typat arbete med 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>>;

Funktionen fetchData<T> — ett typat omslag kring fetch. Parametern T bestämmer formen på svaret: vid anrop fetchData<Product[]> vet TypeScript att den returnerade arrayen innehåller Product-objekt. Klassen StateManager<S> hanterar tillståndet för alla typer — Partial<S> för partiell uppdatering. Action<T, P> — discriminated union för Redux-åtgärder med automatisk typinskränkning i switch.

TypeScript i React Native

TypeScript i React Native säkerställer strikt typning av props och tillstånd för komponenter. React Native CLI skapar en mall med .tsx-tillägg och tsconfig.json. PropTypes (JS) ersätts med TypeScript-gränssnitt — kontroll sker i kompileringsfasen, inte vid runtime. styled-components och React Navigation har fullständiga typer.

Typning av komponent

React.FC<Props> — typen av en funktionell komponent med props. Barn (children) typas automatiskt. useRef<T> — referens till en inbyggd komponent. useState<S> — tillstånd med typinferens. useNavigation<T> — typad navigering. useCallback, useMemo — med automatisk typinferens. Alla React hooks är fullständigt typade.

// Typad React Native-komponent
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';

// Typer för navigering och data
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

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

// Gränssnitt för props
interface ProductListProps {
  products: Product[];
  onSelect: (id: number) => void;
}

// Typad funktionell komponent
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)}
    />
  );
};

Typen RootStackParamList — ordbok över rutter med deras parametrar. NavigationProp — typad navigering: navigation.navigate('Profile', { userId }) kontrollerar att Profile accepterar userId. useCallback med typade parametrar förhindrar onödiga omrenderingar. FlatList typas via en generic: — data och renderItem får typer automatiskt.

TypeScript-utvecklarverktyg

TypeScript-verktyg inkluderar kompilatorn tsc, tsconfig.json, IDE-stöd i VS Code, ESLint med @typescript-eslint, Prettier och DefinitelyTyped (@types/*). tsc — kompilator som omvandlar .ts till .js. tsconfig.json — konfiguration: target (ES2020), module (ESNext), strict: true, outDir (utmatningsmapp). sourceMap — felsökning av TS i webbläsaren via kodkartor.

DefinitelyTyped — ett arkiv med typningar för bibliotek utan inbyggda typer. Installation: npm install @types/react @types/react-native --save-dev. .d.ts-filer — typdeklarationer. Moderna bibliotek (React, React Native, Angular) innehåller inbyggda typer och kräver inte @types/. För gamla JS-bibliotek är DefinitelyTyped den enda källan till typer.

// tsconfig.json — minimal konfiguration
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noEmit": true // endast kontroll, utan JS-generering
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

Alternativet strict: true aktiverar alla typkontroller — rekommenderas för alla projekt. jsx: 'react-native' behåller JSX utan transformation (React Native bearbetar JSX via Babel). moduleResolution: 'node' — modulsökning som i Node.js. esModuleInterop — kompatibilitet med CommonJS-moduler. noEmit: true — endast kontroll utan generering av JS-filer (Babel eller Metro genererar JS).