The TypeScript CheatSheet
A short personal summary of all things important or notable in TypeScript
Caveat: I am a strong believer in creating personal cheat sheets and reference notes. The following sheet is by no means a comprehensive one; it simply encompasses all areas I might want to refer to later. Having said that, I hope you find something useful in here too :)
[TOC]
Variable Declarations
There are three ways you can declare a variable in TS: var
, let
and const
.
var
- is global-scoped or function-scoped.
- is hoisted to the top of its scope, and initialized to
undefined
.// The following code is valid because // the "var x" declaration will be hoisted to the top x = 10 var x;
console.log(x); // this will print undefined var x = 100;
The above snippet is equivalent to
var x = undefined; // hoisted console.log(x); // x is undefined at this point x = 100;
- can be redeclared
var x = 10; var x = 100;
let
- is block-scoped (between curly braces
{
and}
) - is hoisted to the top of its scope, but uninitialized. Usage will result in a
ReferenceError
- cannot be redeclared in the same scope, may be redeclared in a more nested scope
const
const
is block-scoped (between curly braces{
and}
)- hoisted to the top of its scope, but uninitialized. Usage will result in a
ReferenceError
- MUST be initialized at declaration time.
- cannot be redeclared in the same scope, may be redeclared in a more nested scope
Types
Reference: The TypeScript Handbook: Everyday Types
// Basic Types
const num: number = 42;
const str: string = "life, the universe and everything"
const b: boolean = false;
// Arrays:
const list: number[] = [1, 2, 3];
const otherList: Array<number> = [1, 2, 3];
// Tuples
const day: [string, number] = ['Monday', 1];
console.log(day[0]) // 'Monday'
console.log(day[2]) // error
// Enums
enum Beverage {
TEA, // numeric value is 0
COFFEE // numeric value is 1
}
// Enums with explicit values
enum PowerLevel {
WEAK = -100,
NORMAL = 100,
STRONG = 5001
}
// void is no type at all
function setX(x: number): void {}
// any is literally any type at all, skips type checking
const x: any = 10;
// can access arbitrary properties
x.hello();
// unknown is similar to any, but performs type checks via type narrowing
const y: unknown = 1000;
if (typeof y === number) {
// okay, y must be number, y/10 allowed
console.log(y/10);
// not allowed, y cannot be string
// y.substring(5);
}
// null and undefined literally have their type as null and undefined
const n: null = null;
const ud: undefined = undefined;
// By default null and undefined are subtypes of all other types
const nullNumber: number = null;
// object is a non-primitive type
const o: object = {'name': 'Douglas'};
Arrays
let numArr: number[] = [1, 2, 3]
let strArr: string[] = ["hello", "bye"]
strArr.join(); // "hello, bye"
strArr.join(""); // "hellobye"
let arrLen = strArr.length; // length is a property on Arrays.prototype
Jargon
Temporal Dead Zone
All the points between a let
/const
’s hoisted declaration and their usage. Consider
console.log("Hello");
function noop() {
console.log("I don't do anything");
}
let x = 10;
After hoisting, this looks like:
let x;
// temporal dead zone of x starts
console.log("Hello");
function noop() {
console.log("I don't do anything");
}
// temporal dead zone of x ends
x = 10;
Usage of this let
/const
will result in an error
IIFE: Immediately Invoked Function Expression
Typically used to capture the current value of a variable that may change when the inner function is actually invoked.
// This will actually print "10" 10 times
// since the moment at which the anonymous function passed to setTimeout is invoked
// i is already 10
for (var i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 100 * i);
}
// Solution:
for (var i = 0; i < 10; i++) {
// capture the current state of 'i'
// by invoking a function with its current value
(function (x) {
setTimeout(function () {
console.log(x);
}, 100 * x);
})(i);
}
Reference: The TypeScript Handbook: Variable Capturing Quirks