henrik1

<div vocab="https://schema.org/" typeof="Actor">
  <span property="name">Millie Bobby Brown</span> starred in
  <span property="movie" typeof="Movie" href="https://www.imdb.com/title/tt4574334">
    <span property="name">Stranger Things</span>.
  </span>
</div>

henrik1

@media (prefers-reduced-motion: no-preference) {
  button {
    transition: all 300ms ease-in-out;
    border: 2px solid rgba(255,255,255, 0.4);
    transform: scale(1);
    
    &:hover {
      transform: scale(1.1);  
      border: 2px solid rgba(255,255,255, 1);
    }

henrik1

type Article = {
  title: string;
  body: string;
  image: string;
}

type ArticlePreview = Pick<Article, 'title' | 'body'>

henrik1

type Article = {
  title: string;
  body: string;
  image: string;
}

type ArticlePreview = Omit<Article, 'image'>;

henrik1

type User = {
  id: string;
  email: string;
  name?: string;
}

type AdminUser = Required<User>;
  
const admin: AdminUser = { 
  id: "1", 

henrik1

type Person = {
  id: string;
  name: string;
}

const updateDetails = (person: Person, fieldsToUpdate: Partial<Person>) => ({
  ...person,
  ...fieldsToUpdate
});

henrik1

// Intersection types
type Office = { name: string } & Location;

// Mapped type
type Artist = { name: string, bio: string };
type Subscriber = { 
  [Property in keyof Type]: (val: Type[Property]) => void;
}
type ArtistSub = Subscriber<Artist>

henrik1

// Object literal 
type User {
  name: string; // allow only string
  readonly email: string // email is also a string, but its immutable and cannot be changed

  new: () => User;
  new(): User;

  [key: string]: string | number;
}

henrik1

interface Ruler {
  get size(): number;
  set size(value: number | string): 
}

const r:Ruler = ...
r.size = 100;
r.size = "100";

henrik1

const sortBy = function<T extends SomeType> ((a, b): boolean, list: T[]): T[] {
  return ...
};