TypeScript Cheat Sheet

const ide = 'VSCode'; // It's "VSCode"
let browser = 'Brave'; // It's string
if (browser === 'Brave') {/* here */} // It's "Brave"
const theme = { name: 'Material' } // theme.name is string

boolean, string, number, number[], [string, number],
unknown, any, void, null, undefined, never

let layout: unknown = 'qwertz'; // layout is unknown
let length: number = (layout as string).length; // layout is string

type Person = {
  fullname: string;
};

interface Person {
  fullname: string;
};

type Person = {
  name: string; // mandatory
  age?: number; // optional
  prefer: 'cat' | 'dog'; // narrower
  readonly birthdate: string; // read only
  getName(): string; // function returns
}

const add = (x: number, y: number): number => x + y;

type Add = (base: number, increment: number) => number;
const add: Add = (x, y) => x + y;

const joinList = (...items: string[]) => items.join(' ');

const fetchItems = (query: string): <Promise<string[]>> => {
  return fetch('items?q=' + query);
};

function printValue(this: HTMLElement): void {
  console.log(this.target.value);
}

export type Cat = { name: string };
import type { Cat } from './my-types';

import React, { useState } from 'react';

type Props = {
  open: boolean;
  onOpen(open: boolean): void;
}

const Accordion = ({ open, onOpen }: Props): JSX.Element => {
  const [active, setActive] = useState<number | null>(null);
  return (/* ... */);
};

export default Accordion;

type Artwork = { title: string }

type Movie = Artwork & { duration: number; kind: 'movie' }
type Photograph = Artwork & { iso: number; kind: 'photograph' }

type PortfolioItem = Movie | Photograph;

type ArtKind = PortfolioItem['kind']; // 'movie' | 'photograph'

type GroupedItem = {
  [Kind in ArtKind]: PortfolioItem[];
};
// Is equal to
type GroupedItem = {
  movie: PortfolioItem[];
  photograph: PortfolioItem[];
};

type MovieProperties = keyof Movie; // 'title' | 'duration' | 'kind'

type PortfolioItem<Kind extends Kinds> = {
  title: string;
  kind: Kind;
};
const myArtWork: PortfolioItem<'movie'> = {/*...*/};

const identity = <T>(arg: T): T => arg; // not very usefull ^^'
// Takes a type T, arg is a type of T and returns a type T
identity('Hello'); // OK
identity(42); // OK
identity(true); // OK

// Partial type
const changeTitle = (movie: Movie, newTitle: Partial<Movie>) => {
  return { ...movie, title: newTitle };
};

// Readonly type
const sw: Readonly<Movie> = { title: 'Star Wars', duration: 121 };
sw.title = 'Star Trek'; // Error!

// Record, like an object description <key, type>
const library: Record<string, Movie> = {
  starWars: { title: 'Star Wars', duration: 121 }
};

// Pick certains attributes
const titleOnly: Pick<Movie, 'title'> = { title: 'Her' };

// Omit certains attributes
const noTitle: Omit<Movie, 'title'> = { duration: 90 };

type Library<Item extends PortfolioItem> =
  Item extends Movie ? Movie[] :
  Item extends Photograph ? Photograph[] : never;

type SelectItem<Item, Kin> =
  Item extends { kind: Kin } ? Item : never;

// With infer keyword
type GetReturnType = T extends (...args: never[]) =>
  infer U ? U : never;