TypeScript

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

Object Literal Syntax

Type vs Interface
Mapped Types
^ 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 mutliple timesi
^ In performance critical types
version: number;
// Field
type Artist = { name: string, bio: string }

interface comparison checks /** In bytes */

// Attached docs
Loop through each field
payloadSize: number;
//
in the type generic Sets type as a function with
can be faster.
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
} Conditional Types
TypeScript includes a lot of
global types which will help you 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 the typeof operator.
type SanitizedInput = string;

type MissingNo = 404; type Size =

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

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

Object Literal Type // Dog | Wolf

Intersection Types Type from Func Return

type Location = {
Template Union Types
x: number;
A way to merge/extend types Re-use the return value from a
function as a type.
y: number;
type Location =
A template string can be used to combine and

}; { x: number } & { y: number }

const createFixtures = () => { ... }

manipulate text inside the type system.

// { x: number, y: number }
type Fixtures =
type SupportedLangs = "en" | "pt" | "zh";

ReturnType<typeof createFixtures>

type FooterLocaleIDs = "header" | "footer";

Tuple Type
Type Indexing

A tuple is a special-cased array with known

function test(fixture: Fixtures) {} type AllLocaleIDs =

types at specific indexes.

A way to extract and name from
`${SupportedLangs}_${FooterLocaleIDs}_id`;

type Data = [
a subset of a type. Type from Module // "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"]

// { ... }