Author:

Last Updated: 26 December, 2021

Types
Variable Types
Function Types
Custom Types
Union Types
Interfaces
Public vs Private
Why is TS cool?

TypeScript is the sister language to JavaScript building off of the language’s ability to prototype quickly while making the code you write more robust and readable. All TypeScript code is transpiled into JavaScript meaning all JS code can be written and executed inside a .ts file without any difficulties, and all TS code is compiled into JavaScript too.

Types

In its namesake, TypeScript allows the addition of a type system into JavaScript code. In JS a variable can store all different types, but it’s not always the case in TS. Both variables and functions returns, and function parameters can have types using a colon :.

Variable Types

Denoted in the form of let variableName : [Type] = [Value]

// Declaring a variable with a string type
let str : string = "Hello, World!" 

// Declaring a variable with a number type
let num : number = 1234
let num2 : number = 1.2

// Declaring a variable with a boolean type
let bool : boolean = true

// The "any" type means the variable can have any kind of value
let v : any = 1234
v = "foo bar"

// Types can even be a certain function
// In this case func has to be a function with an argument that returns a number
let func: ((arg1) => number) = (arg1) => { return arg1 * 2 }

Function Types

Just as variables can have types so too can functions in both a function’s return type and the type of it’s parameters.

// Example of a function return type
function func(arg1, arg2, arg3) : number {
//...
}

// Example of function arguments having different types
function func2(arg1 : string, arg2 : number) {
//...
}

Custom Types

In TypeScript you aren’t just bound to primitive types either. You can create custom types through complex objects. Custom types can also be defined to be used later on.

// Using a class as a complex type
class Student { /*...*/ }

let s : Student = new Student();

// Defining a custom type
let Person = {
	name : string
  phoneNumber: number
	address: string
}

let p: Person = { /*...*/ }

Custom types like Person above can describe the structure of an object safeguarding how it can be used and the fields it has from changing throughout a program.

Union Types

Another kind of complex data, union types are the combination of multiple different types (both complex and primitive). You may run into cases where a variable might be undefined for a while or depending on certain conditions a variable / function return might be some kind of string

// Union types can be defined and reused
let unionType = string | number

let strOrNum = "foo bar"
strOrNum = 1

// Union types can also be declared directly in the type statement
let v: string | number = 1234

// Demonstrating union types on a function
function func(): undefined | string { /*...*/ }

Interfaces

Defining the structure of objects and types aren’t all that TypeScript can do. Interfaces allow you to define the functions inside a class outlining what can be accessed after a class has been initialized. Classes can use an interface with the implementse keyword.

interface Person {
	
	setName(newName : string) : void
	getName() : string

}

class Student implements Person {

	name : string
	id : number
	onCoop : boolean
	
	setName(newName : string) : void {
		this.name = newName
	}

	getName() : string {
		return this.name
	}

	//...
}

Public vs Private

With classes you can also label fields and functions as public or private. These labels control how information in a class is accessed.

class Student {
	private name : string
	private year : number
	private onCoop : boolean

	public getName() : string { /*...*/ }
	//..
}

Why is TS cool?

What makes JavaScript so popular is its versatility and fast prototyping at the cost of robustness. Between types, interfaces, public & private developers have the ability to write code that is more readable and less error-prone.