Union med |

type Id = string | number;

const showId = (id: Id) => `Id: ${id}`;
showId('kaffe'); // ok
showId(42);      // ok
showId(true);
// Argument of type 'boolean' is not
// assignable to parameter of type 'Id'.

Ni har redan sett en

let note: string | null = null;

Koden

type Size = 'small' | 'medium' | 'large';

const size: Size = 'medium';
const huge: Size = 'huge';
// Type '"huge"' is not assignable
// to type 'Size'.

Editorn vet

Skriv ett citattecken efter const size: Size = så föreslår VS Code de tre värdena. Ett stavfel blir ett typfel, inte en bugg.

Tre booleans: 8 kombinationer

type OrderFlags = {
  isPaid: boolean;
  isShipped: boolean;
  isCancelled: boolean;
};
// skickad, obetald och avbruten?

Ett läge: bara de som finns

type OrderStatus =
  | 'new'
  | 'paid'
  | 'shipped'
  | 'cancelled';

Utan kontroll

const format = (amount: string | number) =>
  amount.toFixed(2);
// Property 'toFixed' does not exist
// on type 'string'.

Med kontroll

const format = (amount: string | number) => {
  if (typeof amount === 'number') {
    return `${amount.toFixed(2)} kr`; // number
  }
  return amount; // string
};

typeof

För primitiver: 'string', 'number', 'boolean', 'object'.

Truthiness

if (name) tar bort null och undefined. Men också '' och 0, så se upp.

in

if ('temperature' in item): finns egenskapen i objektet?

instanceof

För klasser: if (error instanceof Error). Samma klasser som i v46.

Typerna

type Card = { kind: 'card'; last4: string };
type Swish = { kind: 'swish'; phone: string };
type Invoice = {
  kind: 'invoice';
  email: string;
  dueDays: number;
};

type Payment = Card | Swish | Invoice;

Diskriminanten

kind är en literal type i varje del. Kontrollerar du kind vet TypeScript exakt vilken del det är, och vilka fält som finns.

describePayment

const describePayment = (payment: Payment): string => {
  switch (payment.kind) {
    case 'card':
      return `Kort ${payment.last4}`;    // Card
    case 'swish':
      return `Swish ${payment.phone}`;   // Swish
    case 'invoice':
      return `Faktura ${payment.email}`; // Invoice
    default:
      return assertNever(payment);
  }
};

Funktionen

const assertNever = (value: never): never => {
  throw new Error(
    `Ohanterat fall: ${JSON.stringify(value)}`,
  );
};

Lägg till presentkort

type GiftCard = { kind: 'giftcard'; code: string };
type Payment = Card | Swish | Invoice | GiftCard;

// i default:
// Argument of type 'GiftCard' is not
// assignable to parameter of type 'never'.

&

type Product = { name: string; price: number };
type WithId = { id: string };
type WithTimestamps = {
  createdAt: Date;
  updatedAt: Date;
};

type SavedProduct =
  Product & WithId & WithTimestamps;

Union eller intersection?

A | B: ett värde som är antingen A eller B. A & B: ett värde som har allt från både A och B. Med interface blir det extends.

any: allt är tillåtet

const lines = JSON.parse(saved); // any
lines[1].quantity.toFixed(0);
// inget typfel
// TypeError när koden körs

unknown: inget är tillåtet

const data: unknown = JSON.parse(saved);
data[0];
// 'data' is of type 'unknown'.

value is CartLine

type CartLine = {
  productId: string;
  quantity: number;
};

const isCartLine = (
  value: unknown,
): value is CartLine =>
  typeof value === 'object' &&
  value !== null &&
  'productId' in value &&
  typeof value.productId === 'string' &&
  'quantity' in value &&
  typeof value.quantity === 'number';

Användningen

const valid: CartLine[] =
  Array.isArray(data)
    ? data.filter(isCartLine)
    : [];