1. TypeScript¶

A typed superset of JavaScript

let message: string = "Hello World";
console.log(message);

To compile code type tsc helloworld.ts this compiles it into JavaScript file To run node helloworld.js

1.1. tsconfig.json¶

Can specify to the compiler how to compile the code tsc --init will create the config with options and their explanations

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "rootDir": "./src", // src files
        "outDir": "./dist" // generated js code
    }
}

1.2. Types¶

JavaScript:

number
string
boolean
null
undefined
object

TypeScript adds:

any
unknown
never
enum
tuple

1.2.1. Boolean¶

let isDone: boolean = false;

1.2.2. Number¶

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;

1.2.3. String¶

let color: string = "blue";
color = "red";

template names

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.

I'll be ${age + 1} years old next month.`;

1.2.4. Array¶

let list: number[] = [1, 2, 3];
// or using generic type
let list: Array<number> = [1, 2, 3];

1.2.5. Tuple¶

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ["hello", 10]; // OK
// Initialize it incorrectly
x = [10, "hello"]; // Error
Type 'number' is not assignable to type 'string'.
Type 'string' is not assignable to type 'number'.

accessing it

// OK
console.log(x[0].substring(1));

console.log(x[1].substring(1));
Property 'substring' does not exist on type 'number'.

1.2.6. Enum¶

enum Color {
    Red,
    Green,
    Blue,
}
let c: Color = Color.Green;

by default enums begin numbering their members starting at 0, you can manually change this

enum Color {
    Red = 1,
    Green,
    Blue,
}
let c: Color = Color.Green;
let colorName: string = Color[2];

// Displays 'Green'
console.log(colorName);

// or change all values

enum Color {
    Red = 1,
    Green = 2,
    Blue = 4,
}
let c: Color = Color.Green;

1.2.7. Unknown¶

let notSure: unknown = 4;
notSure = "maybe a string instead";

// OK, definitely a boolean
notSure = false;

1.2.8. Any¶

Should be avoided as it defeats the whole point of TS

let lever; // if variable is initialised but not assigned, the compiler assumes it's any

declare function getValue(key: string): any;
// OK, return value of 'getValue' is not checked
const str: string = getValue("myString");

1.2.9. Void¶

function warnUser(): void {
    console.log("This is my warning message");
}

1.2.10. Null and Undefined¶

// Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;

1.2.11. Never¶

// Function returning never must not have a reachable end point
function error(message: string): never {
    throw new Error(message);
}

// Inferred return type is never
function fail() {
    return error("Something failed");
}

// Function returning never must not have a reachable end point
function infiniteLoop(): never {
    while (true) {}
}

1.2.12. Object¶

declare function create(o: object | null): void;

// OK
create({ prop: 0 });
create(null);

create(42);
Argument of type '42' is not assignable to parameter of type 'object | null'.

create("string");
Argument of type '"string"' is not assignable to parameter of type 'object | null'.

create(false);
Argument of type 'false' is not assignable to parameter of type 'object | null'.

create(undefined);
Argument of type 'undefined' is not assignable to parameter of type 'object | null'.

1.3. Interface and Fields¶

TypeScript interfaces are one of the most powerful construct of the language. Interfaces help in sharing "models" across you application so that any developer can pick that shape and conform to it when writing code.

interface Link {
    url: string;
}

function filterByTerm(input: Array<Link>, searchTerm: string) {
    if (!searchTerm) throw Error("searchTerm cannot be empty");
    if (!input.length) throw Error("input cannot be empty");
    const regex = new RegExp(searchTerm, "i");
    return input.filter(function (arrayElement) {
        return arrayElement.url.match(regex);
    });
}

filterByTerm(
    [{ url: "string1" }, { url: "string2" }, { url: "string3" }],
    "java",
);

Simple interface can be defined like this

interface Link {
    url: string;
}

More fields can also be added

interface Link {
    description: string;
    id: number;
    url: string;
}

Any objects of type Link must implement those fields

You can make those fields optional by adding a question mark

interface Link {
    description?: string;
    id?: number;
    url: string;
}

1.4. Extending Interfaces¶

Let's say we need new entity called TranslatedLink, it will have a very similar fields to Link

id, number
url, string
description, string
language, string

Lets inherit those fields

interface Link {
    description?: string;
    id?: number;
    url: string;
}

interface TranslatedLink extends Link {
    language: string;
}

const link1: TranslatedLink = {
    description:
        "TypeScript tutorial for beginners is a tutorial for all the JavaScript developers ...",
    id: 1,
    url: "www.valentinog.com/typescript/",
    language: "en",
};

1.5. Type Aliases¶

type Employee {
    readonly id: number,
    name: string,
    retire: (date: Date) => void
}

let employee: Employee = {
    id:1,
    name: 'Roman',
    retire: (date: Date) => {
        console.log(date);
    }
}

1.6. Union Types¶

function kgToLbs(weight: number | string) {
    // Narrowing
    if (typeof weight === "number") {
        return weight * 2.2;
    } else {
        return parseInt(weight) * 2.2;
    }
}

kgToLbs(10);
kgToLbs("10kg");

1.7. Intersection Types¶

type Draggable = {
    drag: () => void
};

type Resizable = {
    resize: () => void
};

type UIWidget = Draggable & Resizable:

let textBox: UIWidget = {
    drag: () => {},
    resize: () => {}
}

1.8. Literal Types¶

// can either be 50 or 100
// Can type it with Literal (exact, specific)

type Quantity = 50 | 100;
let quantity: Quantity = 50;

1.9. Nullable Types¶

function greet(name: string | null | undefined) {
    if (name) {
        console.log(name.toUpperCase());
    }
}

greet(null);

1.10. Optional Chaining¶

type Customer = {
    birthday: Date;
};

function getCustomer(id: number): Customer | null | undefined {
    return id === 0 ? null : { birthday: new Date() };
}

let customer = getCustomer(0);
// Optional Property access operator
console.log(customer?.birthday); //costumer could possibly be null

?. only executes if not null or undefined

// Optional element access operator

let log: any = null;
log?.("a");