TypeScript Notes

My personal study and practice notes.

TypeScript (TS) adds

1. types
2. next-gen JavaScript (JS) features (compiled down for older browsers)
3. non-JS features (like Interfaces or Generics)
4. meta-programming features (like Decorators)
5. rich configuration options
6. modern tooling that helps even in non-TS projects

Types in TypeScript

Core types (JS knows, TS supports)

• number
• string
• boolean

core primitive types in TS are all lowercase.

type differences between JS and TS

• JS uses dynamic types (resolved at runtime)
• TS uses static types (set during development)

type inference

suitable:

let result = "Result is";

TS will infer the type

redundant:

let result: string = "Result is";

explicit type assignment

objects in TS

• object types: describing objects
• give details about an object

const person: {       // object types
    name: string;
    age: number;
} = {
    name: 'Alaz',
    age: 36
}

• nested object’s object types:

const product = {
    id:  'abc123',
   price: 12.99,
    tags: ['great-offer', 'new'],
    details: {
        title: 'Red carpet',
        desc: 'A great carpet in red'
    }
}

// type is:
{
    id: string;
    price: number;
    tags: string[],
    details: {
        title: string;
        desc: string;
    }
}

array in TS

• explicitely added types:

let favoriteActivities: string[];
favoriteActivities = ['Sport'];

// below is not a good practice
let favoriteActivities: any[];
favoriteActivities = ['Sport', 1, true];

tuple

• it is a fixed-length array

const person: {
    // other types
    role: [number, string];  // tuple type
} = {
    // other object properties
    role: [2, 'author']
};
person.role[1] = 10; // not allowed
person.role = [10, 'admin', 'user']; // not allowed
person.role.push('sth'); // works! be careful with push method

enum

• gives enumerated list, global constant identifiers

enum Role { ADMIN, READ_ONLY, AUTHOR };
const person = {
    // other properties
    role: Role.ADMIN
};

any

• flexible type
• TS never complains
• should avoid using

union

• if more than one possible type considered

function combine(input1: number | string, input2: number | string) {
    return input1 + input2;
}
const combinedAges = combine(30, 26); // gives 56
const combinedNames = combine('A', 'B'); // gives 'AB'

literal

function combine(
    input1: number | string,
    input2: number | string,
    resultConversion: 'as-number' | 'as-text'  // input as a literal 
) {
    // function definition
}

type aliases / custom types

type Combinable = number | string;
type ConversionDescriptor = 'as-number' | 'as-text';
function combine(
    input1: Combinable,
    input2: Combinable,
    resultConversion: ConversionDescriptor
) {
    // function definition
} 

type aliases & object types

type User = {
    name: string,
    age: number
};
const u1: User = {
    name: 'Max',
    age: 30
};

function return types & void

function add(n1: number, n2: number): number {
    return n1 + n2;
}
function fn(...): void{...}; // undefined is returned in JS

functions as types

let combineValues: (a: number, b: number) => number;
                                       input types                return type

let combineValues: Function; // this is also possible but not useful

function types & callbacks

function addAndHandle(
    n1: number,
    n2: number,
    cb: (num: number) => void
) {
    // some code here
    cb(result);
};

unknown type

let userInput: unknown;

• difference between unknown & any:

let userInput: any;
let userName: string;
useName = userInput;
// above will not throw an error

let userInput: unknown;
let userName: string;
userName = userInput;
// above will throw an error, it is a safer way to handle user input

never type

function generateError(
    message: string,
    code: number
): never {
    throw { msn: message, cd: code}
};

• above function never returns a value, it always crashes

compiler

using watch mode

tsc <fileName> -w | --watch    // compiles only one file
tsc --init    // project-wide compilation, creates tsconfig.json file
tsc -w       // compiles and watches project-wide .ts files