Types

Types can be inferred from values, but only at the variable declaration.

Variable types cannot change afterwards.

Primitive Types

Type being inferred from the value:

let str = "This is a string"; // string

A variable declared with no type will by default be of any type.

let str; // any

Built-in primitive types includes:

• boolean

• string

• number: Representing integers and floats.

• undefined

• null

• any

• unknown

• never

• void

• bigint

• symbol

Common built-in JS Objects:

• Date

• Error

• Array or []

• Map

• Set

• Regexp

• Promise

Type Literals:

• Object: { field: number }

• Function: (arg: number) => number

• Arrays: Array<number> or number[]

• Tuple: [number, number]

any

Very flexible and can accept any type.

Despite it's flexibility, it is discouraged to use it, since it may break your code's type enforcement and thus the use of Typescript.

If you don't know the type, preffer using unkonwn.

Variable of any type may also receive different types values at any point.

str = "This is string";
str = 10;

unknown

Represents any value and while it is similar to any type, it is much safer because it's not legal to do anything with an unknown value.

function a(arg: any) {
    arg.b() // OK
}

function a(arg: unkonwn) {
    arg.b() // Gives compilation error
}

This is useful when describing function types because you can describe functions that accept any value without having any values in your function body.

never

It is a return type, meaning that it never returns a value.

This should mean that the function either throws an exception or terminates execution of the program.

function init(): never {
    while (true) {}
}

// or

function init(): never {
    throw new Error("");
}

void

Represents the return value of functions which don't return a value.

function a() {}

// Or

function a() {
    return;
}

Tuples

Are not a "type" per say, but it is a way to use the [] type, enforcing a size and adding values change constrains.

let point: [number, numer] = [10, 10];

type

• Used for type definitions, usually to reduce repetition.

• It can be amost the same as interface, but it cannot be extendend.

• They may not be extended but types can be merged.

type Entity = {
    id: number;
};

type Person = {
    name: string;
    age: number;
};

type PersonEntity = Person & Entity;

// or

type PersonEntity = Person & { somethingelse: boolean };

interface

Types interface comparison checks can be faster.

• Can be extended by declaring it multiple times, or merged with other interfaces.

• Used to describe object shapes.

• Can have function definitions. (Great to describe classes or contracts)

// Optionally take properties from existing `interface` or `type` with `extends`.
interface JSONResponse extends Response, HTTPAble {
    // By default is a public access, always existent and writable property.
    version: number;
    
    /*
        This is a optional property, so it can be `undefined` or even
        un-existent in JSONResponse.
    */
    detail?: string;
    
    // This can also be undefined, but will always exist in JSONReponse.
    name: undefined | string;
    
    /*
        This is a readonly property.
        (It only complains at compilation time, but there are ways to
        change it's value if wanted)
    */
    readonly body: string;
    
    // Functions may be described in two ways.
    update: (param: number) => void;
    update(param: number): void;
    
    // Make the object this interface describes callable. (like jsonResponse())
    (): string;
    
    // A callable interface can have multiple definitions for different parameters.
    (param: string): string;
    (param: number): number;
    
    // You can use `new` on the object this interface describes.
    new(param: string): string;
    
    // Defining properties with unknown or variable names.
    [key: string]: number;
    
    /*
        Getter and Setter.
        usage:
            - `jsonResponse.size`, will automatically call the getter.
            - `jsonResponse.size = 10`, will automatically call the setter.
    */
    get size(): number;
    set size(value: number);
}

You can merge different interface into a type:

interface Entity {
    id: number;
}

interface Person {
    name: string;
    age: number;
}

type PersonEntity = Entity & Person;

Extend it with extends:

interface Entity {
    id: number;
}

interface Person extends Entity {
    name: string;
    age: number;
}

It is also possible to extend via merging when the interfaces have the same name:

interface Person {
    id: number;
}

interface Person {
    name: string;
    age: number;
}

You can ensure a class conforms to an interface via implements.

interface Syncable { ... }
class Account implements Syncable { ... }

Enum

Are a feature which allows for describing a value which could be one of a set of possible named constants.

It is NOT a type-level addition, but something added to the language and runtime.

Function Type

A way to declare the Function structure types (parameters and return).

You can generically say a variable is a function.

let f: Function;

Or you can explicitly define it's params and return types.

let f: (param: string) => void;

Union Type

Describes a type which is one of many options. (These options are may be types or values)

Great for reducing and restricting the variable value options.

// `person` is either a string or undefined.
const person: undefined | string;

// In this case `options` can hold only 3 different values, and it cannot be undefined.
let options: 1 | 2 | 3 = 1;

Template Union Types

A template string can be used to combine and manipulate text inside the type system.

type SupportedLangs = 'en' | 'pt';
type FooterLocaleIDs = "header" | "footer";

type AllLocaleIDs = `${SupportedLangs}_${FooterLocaleIDs}_ID`;

Intersection Types

A way to merge/extend types. (&), as seen above.

type PersonEntity = Person & Entity;

Utility Types

Partial

Constructs a type with all properties of Type set to optional. This utility will return a type that represents all subsets of a given type. (So that you dont have to use ?:)

type Todo = {
    priority: number;
    description: string;
    done: boolean;
};

const todo: Partial<Todo> = {
    description: "Todo 1",
    done: false,
};

Required

Constructs a type consisting of all properties of Type set to required.

interface Car {
    brand: string;
    model?: string;
}

// This will raise an error because 'model' is missing, even though it is 'optional'
const car: Required<Car> = {
    brand: "Fiat",
};

Pick

Constructs a type by picking the set of properties Keys (string literal or union of string literals) from Type.

const obj: Pick<Todo, "price" | "obs"> = { price: 0, obs: "" }

type Book = {
    title: string;
    description: string;
    price: number;
}

const book: Book = {
    title: 'Book 1',
    description: 'Some description',
    price: 30
}

// This would raise an error, because updatedProperties dont have all the Book properties
const updateBook = (updatedProperties: Book) => {
    return { ...book, ...updatedProperties };
}

// So you can resolve with picking
const updateBook = (updatedProperties: Pick<Book, "price">) => {
    return { ...book, ...updatedProperties };
}

updateBook({ price: 60 });

Omit

Constructs a type by picking all properties from Type and then removing Keys (String literal or union of string literals).

const updateBook = (updatedProperties: Omit<Book, "title" | "description">) => {
    return { ...book, ...updatedProperties };
}

Conditional Types

Acts as if statements inside the type system. Created via generics, and then commonly used to reduce the number of options in a Type Union.

type HasFourLegs<Animal> = Animal extends { legs: 4 } ? Animal : never;

type Animals = Bird | Dog | Ant | Wolf;
type FourLegs = HasFourLegs<Animals>;

Generic Types

Are types that will hold a generic type, so that this type can change at runtime.

Will be the name inside <>, this name can be anything. (Conventionally it is used as T or R)

// `Response` is the generic type, which is basically not known at compilation time
interface APICall<Response> {
    data: Response
}

// Or

interface APICall<T> {
    data: T
}

You can specify one or more generic types.

interface HTTPRequest<T, A> {
    body?: T;
    headers?: A;
}

You may specify a default type for the generic if nothing was informed. (Otherwise Typescript will require you to specify a type)

// `T` will be required
// `A` is optional and if not informed will use the default type
interface HTTPRequest<T, A = { [key: string]: string }> {
    body?: T;
    headers?: A;
}

You can constrain what types are accepted into the generic parameter with the extends keyword.

// Only types with a `status` property can be used
interface APICall<Response extends { status: number }> {
    data: Response
}

type A = {
    name: string;
}

type B = {
    name: string;
    status: number;
}

const api: APICall<A> = ...; // Will fail
const api: APICall<B> = ...; // Will work

Mapped Types

Acts like a map statement for the type system, allowing an input type to change the structure of the new type.

type Artist = { name: string, bio: string };

// Will loop through each field in the generic `Type`, and instead of the original `Type`
// type it will overwrite with `(newValue: ... ) => void`
type Subscriber<Type> = {
    [Property in keyof Type]: (newValue: Type[Property]) => void
}

type ArtistSub = Subscriber<Artist>;
/*
    {
        name: (newValue: string) => void,
        bio: (newValue: string) => void
    }
*/

Type Assertions

When you have information about the type of a value that Typescript can't know about.

Are removed by the compiler and don't affect the runtime behaviour of the code.

const myCanvas = document.getElementById("canvas") as HTMLCanvasElement;

Sometimes this rule can be too conservative and will disallow more complex coercions that might be valid.

If this happens you can use two assertions, first to any or unkonwn then to the desired type.

const a = expre as any as T;