Basic Types
let isDone: boolean = false;
let age: number = 32;
let name: string = "Alex";
let list: number[] = [1, 2, 3];
let listGeneric: Array<number> = [1, 2, 3];
let tuple: [string, number] = ["hello", 10];
Enums
enum Color {
Red,
Green,
Blue,
}
let c: Color = Color.Green;
Any
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean
Void
function warnUser(): void {
console.log("This is my warning message");
}
Null and Undefined
let u: undefined = undefined;
let n: null = null;
Never
function error(message: string): never {
throw new Error(message);
}
function fail() {
return error("Something failed");
}
function infiniteLoop(): never {
while (true) {}
}
Object
declare function create(o: object | null): void;
create({ prop: 0 });
create(null);
Type Assertions
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
Functions
function add(x: number, y: number): number {
return x + y;
}
let myAdd = function (x: number, y: number): number {
return x + y;
};
Optional and Default Parameters
function buildName(firstName: string, lastName?: string) {
return firstName + " " + (lastName || "");
}
function buildNameWithDefault(firstName: string, lastName = "Smith") {
return firstName + " " + lastName;
}
Rest Parameters
function buildNameWithRest(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
Interfaces
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Jane", lastName: "User" };
Classes
class Animal {
private name: string;
constructor(name: string) {
this.name = name;
}
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
class Dog extends Animal {
bark() {
console.log("Woof! Woof!");
}
}
let dog = new Dog("Rex");
dog.bark();
dog.move(10);
Access Modifiers
class Person {
private name: string;
protected age: number;
public constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
class Employee extends Person {
private department: string;
constructor(name: string, age: number, department: string) {
super(name, age);
this.department = department;
}
public getDetails() {
return `${this.name} works in ${this.department}`;
}
}
let employee = new Employee("John", 30, "HR");
console.log(employee.getDetails());
Readonly Properties
class Octopus {
readonly name: string;
readonly numberOfLegs: number = 8;
constructor(name: string) {
this.name = name;
}
}
let dad = new Octopus("Man with the 8 strong legs");
// dad.name = "Man with the 3-piece suit"; // Error
Static Properties
class Grid {
static origin = { x: 0, y: 0 };
calculateDistanceFromOrigin(point: { x: number; y: number }) {
let xDist = point.x - Grid.origin.x;
let yDist = point.y - Grid.origin.y;
return Math.sqrt(xDist * xDist + yDist * yDist);
}
}
let grid1 = new Grid();
console.log(grid1.calculateDistanceFromOrigin({ x: 10, y: 10 }));
Generics
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("myString"); // type of output will be 'string'
let output2 = identity<number>(100); // type of output2 will be 'number'
Generic Classes
class GenericNumber<T> {
zeroValue: T;
add: (x: T, y: T) => T;
}
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x, y) {
return x + y;
};
Type Aliases
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
if (typeof n === "string") {
return n;
} else {
return n();
}
}
Union Types
function padLeft(value: string, padding: number | string) {
if (typeof padding === "number") {
return Array(padding + 1).join(" ") + value;
}
if (typeof padding === "string") {
return padding + value;
}
throw new Error(`Expected string or number, got '${padding}'.`);
}
Intersection Types
interface ErrorHandling {
success: boolean;
error?: { message: string };
}
interface ArtworksData {
artworks: { title: string }[];
}
type ArtworksResponse = ArtworksData & ErrorHandling;
const response: ArtworksResponse = {
success: true,
artworks: [{ title: "Mona Lisa" }],
};
Type Guards and Type Assertions
function isNumber(x: any): x is number {
return typeof x === "number";
}
function isString(x: any): x is string {
return typeof x === "string";
}
function padLeftExample(value: string, padding: number | string) {
if (isNumber(padding)) {
return Array(padding + 1).join(" ") + value;
}
if (isString(padding)) {
return padding + value;
}
throw new Error(`Expected string or number, got '${padding}'.`);
}
Mapped Types
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
type Partial<T> = {
[P in keyof T]?: T[P];
};
type PersonPartial = Partial<Person>;
type ReadonlyPerson = Readonly<Person>;
Conditional Types
type MessageOf<T extends { message: unknown }> = T["message"];
type Email = {
message: string;
};
type EmailMessageContents = MessageOf<Email>;
Utility Types
interface Person {
name: string;
age: number;
}
type PartialPerson = Partial<Person>;
type ReadonlyPerson = Readonly<Person>;
type PickName = Pick<Person, "name">;
type RecordProps = Record<string, number>;
Modules
// math.ts
export function add(a: number, b: number): number {
return a + b;
}
// app.ts
import { add } from "./math";
console.log(add(2, 3));
Namespaces
namespace Validation {
export interface StringValidator {
isAcceptable(s: string): boolean;
}
const lettersRegexp = /^[A-Za-z]+$/;
export class LettersOnlyValidator implements StringValidator {
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}
}
let validator = new Validation.LettersOnlyValidator();
console.log(validator.isAcceptable("Hello"));
Decorators
function sealed(constructor: Function) {
Object.seal(constructor);
Object.seal(constructor.prototype);
}
@sealed
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
Decorator Factories
function color(value: string) {
// this is the decorator factory
return function (target: any) {
// this is the decorator
target.prototype.color = value;
};
}
@color("blue")
class Car {}
let car = new Car();
console.log(car.color); // blue
function format(target: any, propertyKey: string) {
let value: string;
const getter = () => value;
const setter = (newVal: string) => {
value = newVal.toUpperCase();
};
Object.defineProperty(target, propertyKey, {
get: getter,
set: setter,
enumerable: true,
configurable: true,
});
}
class Greeter {
@format
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return `Hello, ${this.greeting}`;
}
}
let greeter = new Greeter("world");
console.log(greeter.greet()); // Hello, WORLD