Typescript Typing like a pro(part1)

Introduction

In the previous article I’ve written about typescript environment declaration which is one the main tenets of this beautiful language, in today’s article I’ll be covering typescript typing like a pro.

Most of wrote down tutorial don’t show you in depth the vary of typescript typing offered to you.

Here we go:

Mapped Types

To reduce the amount of effort required to create similar types that differ only in optionality, or readability,
mapped types allow you to create variations of an existing type in a single expression. Mapped types use the
keyof keyword, which is an index type query that gathers a list of permitted property names for a type in
your program.

interface Options {
material: string;
backlight: boolean;
}

// Manually created readonly interface
interface ManualReadonlyOptions {
readonly material: string;
readonly backlight: boolean;
}

// Manually created optional interface
interface ManualOptionalOptions {
material?: string;
backlight?: string;
}

// Manually created nullable interface
interface ManualNullableOptions {
material: string | null;
backlight: string | null;
}

interface Options {
material: string;
backlight: boolean;
}
// Mapped types
type ReadOnly<T> = { readonly [k in keyof T]: T[k]; }
type Optional<T> = {[k in keyof T]?: T[k]; }
type Nullable<T> = {[k in keyof T]: T[k] | null; }

Dictionary Types

You can represent dictionaries in TypeScript using an index type,
specifies the key and its type in square brackets, and the type of the value afterwards as a type annotation.
The cephalopod dictionary is an object with dynamic keys, but TypeScript will ensure the types of the keys and values are correct.

interface Cephalopod {
hasInk: boolean;
arms: number;
tentacles: number;
}
interface CephalopodDictionary {
[index: string]: Cephalopod;
}

let dictionary: CephalopodDictionary = {};
dictionary[‘octopus vulgaris’] = { hasInk: true, arms: 8, tentacles: 0 };
dictionary[‘loligo vulgaris’] = { hasInk: true, arms: 8, tentacles: 2 };
// Error. Not assignable to type ‘Cephalopod’
dictionary[0] = { hasInk: true };
const octopus = dictionary[‘octopus vulgaris’];

Type Assertions

In cases in which TypeScript determines that an assignment is invalid, but you know that you are dealing
with a special case, you can override the type using a type assertion. When you use a type assertion, you are
taking responsibility from the compiler and must ensure that the assignment is valid. Your program may
not work correctly if you make a mistake.
The property variable could be a house or a mansion, so a subsequent assignment to a variable declared
as Mansion would fail. Because we know that the variable is compatible with the Mansion interface (it has all
three properties required to satisfy the interface), the type assertion <Mansion> confirms this to the compiler.

interface House {
bedrooms: number;
bathrooms: number;
}

interface Mansion {
bedrooms: number;
bathrooms: number;
butlers: number;
}

function getProperty() : House | Mansion {
// …
}
const property = getProperty();
// OK as the property is on both House and Mansion
const bedroomCount = property.bedrooms;
// Errors: Property ‘butlers’ does not exist on type ‘House | Mansion’
const butlerCount = property.butlers;
// OK with type assertion
const workingButlerCount = (<Mansion>property).butlers;