Generics,
utility types
och moduler

En per typ

const firstNumber = (items: number[]) =>
  items[0];
const firstString = (items: string[]) =>
  items[0];
// och så vidare...

any

const first = (items: any[]) => items[0];

const x = first([10, 20]);
// x: any
x.toUpperCase(); // inget fel, kraschar

Funktionen

const first = <T>(items: readonly T[])
  : T | undefined => items[0];

Användningen

first([10, 20, 30]);
// T = number, ger number | undefined

first(['Ada', 'Grace']);
// T = string

first<string>([]);
// T skriven för hand

Array<T>

const prices: Array<number>
  = [39, 49];
// samma som number[]

Map<K, V>

const stock =
  new Map<string, number>();
stock.set('kaffe', 12);

Promise<T>

const load = async ()
  : Promise<string> => {
  return 'klart';
};

Typen

type Pair<A, B> = {
  first: A;
  second: B;
};

Användningen

const price: Pair<string, number> = {
  first: 'kaffe',
  second: 39,
};

Utan begränsning

const longest = <T>(a: T, b: T) =>
  a.length >= b.length ? a : b;
// Fel: Property 'length' does
// not exist on type 'T'

Med extends

const longest = <T extends { length: number }>(
  a: T,
  b: T,
): T => (a.length >= b.length ? a : b);

longest('kaffe', 'te');   // 'kaffe'
longest([1, 2], [1, 2, 3]);
longest(10, 20);          // Fel

Funktionen

type HasId = { id: string };

const findById = <T extends HasId>(
  items: readonly T[],
  id: string,
): T | undefined =>
  items.find((item) => item.id === id);

Fungerar för allt med ett id

findById(products, 'bulle')?.price;
findById(users, 'u1')?.email;
// TypeScript vet att det är en
// produkt respektive en användare

Utan typparameter

const findById = (
  items: readonly HasId[],
  id: string,
): HasId | undefined => ...;

findById(products, 'bulle')?.price;
// Fel: Property 'price' does not
// exist on type 'HasId'

Skillnaden

Utan T kommer bara HasId ut, och resten av produkten är borta för TypeScript. Med T följer hela typen med, och extends garanterar bara att id finns.

En produkt

type Product = {
  id: string;
  name: string;
  price: number;
  category: 'dryck' | 'bröd' | 'mat';
  description: string;
};

Behoven

En uppdatering har bara några fält. Ett kort visar bara namn och pris. En ny produkt har inget id än. Ska vi skriva fyra typer för hand?

Partial<T>

Alla fält valfria.

const update = (
  p: Product,
  changes: Partial<Product>,
): Product =>
  ({ ...p, ...changes });

Pick<T, K>

Bara några fält.

type ProductCard = Pick<
  Product,
  'name' | 'price'
>;

Omit<T, K>

Allt utom några fält.

type NewProduct =
  Omit<Product, 'id'>;

Record<K, V>

type Category = Product['category'];

const labels: Record<Category, string> = {
  dryck: 'Drycker',
  bröd: 'Bröd och bullar',
  mat: 'Mat',
};
// saknas en kategori blir det fel

Readonly<T>

const frozen: Readonly<Product> = latte;
frozen.price = 10;
// Fel: Cannot assign to 'price'
// because it is a read-only property

Typen

type ProductUpdate =
  Partial<Omit<Product, 'id'>>;

Läs inifrån och ut

Ta Product, ta bort id, och gör resten valfritt. Ändras Product följer ProductUpdate med.

Tid

15 min

Mål

Du kan skapa nya typer ur en befintlig typ i stället för att skriva dem för hand.

types.ts

export type Category = 'dryck' | 'bröd' | 'mat';

export type Product = {
  id: string;
  name: string;
  price: number;
  category: Category;
};

Andra filer

import type { Product } from './types';
import { products } from './products';

const cheap: Product[] = products
  .filter((p) => p.price < 40);

Vad det gör

Importerar bara typen. Raden finns inte kvar i den byggda JavaScript-koden, eftersom typer inte finns när koden körs.

verbatimModuleSyntax

Med den i tsconfig.json är det ett fel att importera en typ utan type. Då ser man direkt vad som är typ och vad som är kod.

import { Product } from './types';
// Fel: 'Product' is a type and must
// be imported using a type-only import