Types

Intersection Types

• Person & Serializable & Loggable is a Person and Serializable and Loggable. That means an object of this type will have all members of all three types.
• You will mostly see intersection types used for mixins and other concepts that don’t fit in the classic object-oriented mold.

Union Types

• A union type describes a value that can be one of several types. We use the vertical bar (|) to separate each type, so number | string | boolean is the type of a value that can be a number or a string or a boolean.
• If we have a value that has a union type, we can only access members that are common to all types in the union.

Type Aliases

• Type aliases create a new name for a type. Type aliases are sometimes similar to interfaces, but can name primitives, unions, tuples, and any other types that you’d otherwise have to write by hand.
• Aliasing doesn’t actually create a new type - it creates a new name to refer to that type.

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
  if (typeof n === "string") {
    return n;
  } else {
    return n();
  }
}

• Because an ideal property of software is being open to extension, you should always use an interface over a type alias if possible.
• On the other hand, if you can’t express some shape with an interface and you need to use a union or tuple type, type aliases are usually the way to go.

Literal Types

• Essentially enums

String Literal Types

type Easing = "ease-in" | "ease-out" | "ease-in-out";

• String literal types allow you to specify the exact value a string must have. In practice string literal types combine nicely with union types, type guards, and type aliases. You can use these features together to get enum-like behavior with strings.

Index types

• With index types, you can get the compiler to check code that uses dynamic property names.
• keyof is the index type query operator. For any type T, keyof T is the union of known, public property names of T.

interface Car {
  manufacturer: string;
  model: string;
  year: number;
}
let carProps: keyof Car; // the union of ('manufacturer' | 'model' | 'year')

Keyword

readonly vs const

1. The readonly modifier is part of TypeScript's type system. It's only used by the compiler to check for illegal property assignments. Once the TypeScript code has been compiled to JavaScript, all notions of readonly are gone. Because readonly is only a compile-time artifact, there's no protection against property assignments at runtime whatsoever.
2. A const variable cannot be re-assigned too. However, from ES 6 onwards, const is a supported JavaScript keyword, which also works in runtime.
3. In the case of objects, including collections, readonly and const only ensures the pointer immutability.

Open Questions

1. Error:(47, 5) TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'ButtonStatus'. No index signature with a parameter of type 'string' was found on type 'ButtonStatus'.

   How do I prevent the error “Index signature of object type implicitly has an 'any' type” when compiling typescript with noImplicitAny flag enabled? (opens in a new tab)

Reference

• React+TypeScript Cheatsheets (opens in a new tab)
• Ultimate React Component Patterns with Typescript 2.8 (opens in a new tab)