TypeScript

Cheat Sheet Type Key points Full name is “type alias” and are used
to provide names to type literals
Supports more rich type-system
features than interfaces.
These features are great for building libraries, describing existing
JavaScript code and you may find you rarely reach for them in
mostly TypeScript applications.

Object Literal Syntax Mapped Types

Type vs Interface
^ Interfaces can only describe
object shapel Acts like a map statement for the type system, allowing
^ Interfaces can be extended by type JSONResponse = {
an input type to change the structure of the new type.
declaring it multiple times
version: number;
// Field
type Artist = { name: string, bio: string }

^ s
interface comparison checks /** In bytes */
// Attached docs
Loop through each field
Sets type as a function with
can be faster. payloadSize: number;
//
in the type generic type Subscriber<Type> = {
original type as param
outOfStock?: boolean;
// Optional
parameter “Type”
[Property in keyof Type]:

Think of Types Like Variables update: (retryTimes: number) => void;

// Arrow func field
(newValue: Type[Property]) => void

Much like how you can create update(retryTimes: number): void;

// Function
}

variables with the same name in (): JSONResponse

// Type is callable
type ArtistSub = Subscriber<Artist>

different scopes, a type has [key: string]: number;

// Accepts any index
// { name: (nv: string) => void,

similar semantics.
new (s: string): JSONResponse;
// Newable
// bio: (nv: string) => void }
Build with Utility Types readonly body: string;
// Readonly property

TypeScript includes a lot of

global types which will help you
}
Conditional Types
Terser for saving space, see Interface Cheat Sheet for
do common tasks in the type more info, everything but ‘static’ matches. Acts as “if statements” inside the type system. Created
system. Check the site for them. via generics, and then commonly used to reduce the
number of options in a type union.

Primitive Type Union Type Type from Value type HasFourLegs<Animal> =

Animal extends { legs: 4 } ? Animal

Useful for documentation mainly Describes a type which is one of many options, Re-use the type from an existing JavaScript : never

for example a list of known strings. runtime value via thetypeof operator.
type SanitizedInput = string;

type Size =
const data = { ... }
type Animals = Bird | Dog | Ant | Wolf;

type MissingNo = 404;

"small" | "medium" | "large" type Data = typeof data type FourLegs = HasFourLegs<Animals>

Object Literal Type // Dog | Wolf

Intersection Types Type from Func Return
type Location = {

x: number;
A way to merge/extend types Re-use the return value from a
Template Union Types
y: number;
type Location =

function as a type. A template string can be used to combine and

}; { x: number } & { y: number }
const createFixtures = () => { ... }
manipulate text inside the type system.
type Fixtures =
type SupportedLangs = "en" | "pt" | "zh";

// { x: number, y: number }
Tuple Type ReturnType<typeof createFixtures>

type FooterLocaleIDs = "header" | "footer";

A tuple is a special-cased array with known

Type Indexing function test(fixture: Fixtures) {}

type AllLocaleIDs =

types at specific indexes. A way to extract and name from

type Data = [
a subset of a type. Type from Module `${SupportedLangs}_${FooterLocaleIDs}_id`;

// "en_header_id" | "en_footer_id"

location: Location,
type Response = { data: { ... } }

| "pt_header_id" | "pt_footer_id"

const data: import("./data").data

timestamp: string
| "zh_header_id" | "zh_footer_id"

]; type Data = Response["data"]

// { ... }