These notes were compiled from the TypeScript Crash Course by Travesy Media.

What is TypeScript

  • A Superset(it's got all the regular functionality of a language, but with added functionality) of JavaScript developed by Microsoft.
  • TypeScript gets compiled/transpiled to vanilla JavaScript for browsers to understand via TypeScript Compiler(TSC - can be installed via NPM/YARN)

Benefits of TypeScript

  • Static Type Checking
  • Class Based Objects
  • Streamlines Modular workflows
  • Syntax closer to higher level languages like Java

Static Type Checking

  • Check and assign types for variables, parameters and functions.
  • Optional
  • Prevents bugs and future issues from happing
  • Makes code more legible and descriptive

Types available;

  • String
  • Number
  • Boolean
  • Array
  • Any
  • Void(no type returned)
  • Null
  • Undefined
  • Tuple(fixed-length array)
  • Enum
  • Generics(specifies type of constraint)

Class based objects

  • OOP in JS, no more Prototypes
  • Provides Encapsulation(keeps functionality modular)
  • Allows for the use of Inheritance
  • Allows for the use of modifiers like Private, Public, Protected, ect

Defining variable types

let myString: string;

let myArryString: string[]; 
/* OR! */ 
let myArryStringTwo: Array<string>; 
let myArryStringTuple: [string,number]; 

let myNum: number;
let myVar: any;

myString = `${name} ${surname}`;
myArryStringTuple = ["hello",4]
myArryString = ["one","two","three"];
myNum = 2
myVar="one" + 2;

/* --- */
let myVoid: void;
myVoid = null;
/* OR! */ 
let myVoid: void = null;

Functions

function getSum(num1:number, num2:number):number {
	return num1+num2;
}

getSum(2,4);

function getSumAdvanced(num1:number, num2?:number):number {
	const returnVal:number = num2!==undefined ? num1+num2 : num1;
    return returnVal;
}

getSumAdvanced(2);

function returnNothing():void {

}

Interfaces

Interface enable TypeScript to confirm that the shape of the object values used conform to certain characteristics. This is sometimes called “duck typing” or “structural subtyping”.

You basically create your own type by defining a model.

function showTodo(todo:{Title:string,Text:string}) {
	console.log(todo.Title+" "+todo.Text);
}

const todo = {Title:"Test Todo",Text:"Todo Text here"};

showTodo(todo);

/* Can be rewritten as... */

interface Todo {
	Title: string;
    Text: string;
}

function showTodo(todo:Todo) {
	console.log(todo.Title+" "+todo.Text);
}

const todo = {Title:"Test Todo",Text:"Todo Text here"};

showTodo(todo);

Classes

Classes can have properties and functions.

class User {
	public name: string; // Referred to as this.name
	private email: string;
	protected age: number;
    
	constructor(name: string,email: string,age: number) {
		this.name = name;
		this.email = email;
		this.age = age;
	}
    
    register() {
	console.log("Registered!");
    }
    
    payInvoice() {
    	console.log("Paid!");
    }
}

const Jon = new User("Jon Doe","email@test.com","32");

console.log(Jon.name); // Prints "Jon Doe"
console.log(Jon.email); // TypeScript refuses, can only acces in class.
Jon.register(); // Prints "Registered!"

// Inheritance

class Member extends User {
	id: number;
	constructor(id: number, name: string,email: string,age: number) {
		super(name,email,age); // Props of parent
		this.id = id;
	}
    
    pay() {
    	super.payInvoice();
    }
}

Const Mike:User = new Member(1, "Mike", "Mike@kite.com",22);
Mike.pay(); // Prints "Paid!"


We can also use Interfaces for the class as follows;

interface UserInterface {
	name: string;
	email: string;
	age: number;
	register();
	payInvoice();
}

class User implements UserInterface {
	public name: string; // Referred to as this.name
	private email: string;
	protected age: number;
    
	constructor(name: string,email: string,age: number) {
		this.name = name;
		this.email = email;
		this.age = age;
	}
    
    register() {
	console.log("Registered!");
    }
    
    payInvoice() {
    	console.log("Paid!");
    }
}

const Jon = new User("Jon Doe","email@test.com","32");

console.log(Jon.name); // Prints "Jon Doe"
console.log(Jon.email); // TypeScript refuses, can only acces in class.
Jon.register(); // Prints "Registered!"

// Inheritance

class Member extends User {
	id: number;
	constructor(id: number, name: string,email: string,age: number) {
		super(name,email,age); // Props of parent
		this.id = id;
	}
    
    pay() {
    	super.payInvoice();
    }
}

Const Mike:User = new Member(1, "Mike", "Mike@kite.com",22);
Mike.pay(); // Prints "Paid!"