TypeScript Basics

Getting started with TypeScript.

Sep 23, 2024

Introduction

TypeScript is a superset of JavaScript, providing type safety and static type checking. It is a statically-typed language.

In statically typed languages, the data type of a variable is known at compile time, while in dynamically typed languages, the data type is assigned during runtime by the interpreter, depending on its value.

Usage

TypeScript is primarily a development tool, where the project still runs JavaScript.

Syntax

let variableName: type = value;

Running TypeScript

To run a .ts program, follow these steps:

tsc fileName.ts
node fileName.js

The first step involves transpiling, where the TypeScript compiler transpiles the TypeScript code to JavaScript. Transpiling is the process of converting the source code from one programming language to another. It is often used in web development, especially with languages like TypeScript and JSX, which are not directly supported by web browsers.

Primitive Types

In TypeScript, primitive types such as string, number, and boolean are used to represent basic data types.

Note: JavaScript does not have a special runtime value for TypeScript types, so there's no equivalent to "int" or "float" - everything is simply number.

let userId: number = 334455;
console.log(userId);

However, it's not always necessary to explicitly specify types. In some cases, TypeScript can infer types based on the assigned values. Overusing types can make the code verbose and less readable.

let userId = 334455;
console.log(userId);

any

In situations where TypeScript cannot determine or is unsure about the type of a value, it marks the variable as any. However, using any is discouraged as it disables type checking. It's recommended to specify types explicitly or use the compiler flag noImplicitAny to flag implicit any types as errors.

Functions

Type annotations for functions are strong and recommended.

Syntax

function myFunc(param: type): returnType {
  // Function logic
}

Arrow Functions

Arrow functions provide a concise syntax for writing functions.

const myFunc = (param: type): returnType => {
  // Function logic
};

Default Value

function signUp(name: string, email: string, hasPaid: boolean = false) {
  return {
    name,
    email,
    hasPaid,
  };
}
const user = signUp("MyName", "test@gmail.com");

Return Type

function getName(name: string): string {
  return name;
}

never

Some functions never return a value. The never type represents values that are never observed. In a return type, this means that the function throws an exception or terminates execution of the program.

const fail = (message: string): never => {
  throw new Error(message);
};
 
fail("There was an error!");

Objects

Assigning type to an object

let myObj: { name: string; age: number } = {
  name: "John",
  age: 22,
};
 
console.log(myObj);

Bad behaviour of objects

When a function is called with an optional parameter, it throws an error. However, if an object with an optional property is created and assigned to a variable, calling the function with that variable does not result in an error.

function createUser({ name, isPaid }: { name: string; isPaid: boolean }) {
  console.log(name);
  console.log(isPaid);
}
 
// Throws an error
createUser({ name: "AAA", isPaid: true, email: "test@gmail.com" });
 
// No error
let newUser = { name: "John Doe", isPaid: true, email: "hello@gmail.com" };
createUser(newUser);

Type Aliases

Type Aliase is a name for any type. This is convenient, but it's common to want to use the same type more than once and refer to it by a single name.

// Defining a type:
type Point = {
  x: number;
  y: number;
};
 
// Using the type
function printCoord(pt: Point) {
  console.log(`The value of X coordinate is: ${pt.x}.`);
  console.log(`The value of y coordinate is: ${pt.y}.`);
}
 
printCoord({ x: 100, y: 100 });

Combining types

type cardNumber = {
  cardumber: string;
};
 
type cardDate = {
  carddate: Date;
};
 
// Combination of the above two types
type cardDetails = cardNumber & cardDate;

readonly & "?"(optional)

readonly is used to make a property unchangeable, the value cannot be changed after it is set. ? marks the property as optional.

type User = {
  readonly _id: string;
  name: string;
  email: string;
  creditDetails?: cardDetails;
};
 
let user1: User = {
  _id: "1",
  name: "John",
  email: "john@gmail.com",
  // Since creditDetails is optional we choose not to include it.
};
 
console.log(user1);
 
let user2: User = {
  _id: "2",
  name: "Doe",
  email: "doe@gmail.com",
  creditDetails: {
    cardumber: "123",
    carddate: new Date(),
  },
};
 
console.log(user2);

Arrays

To specify the type of an array like [1,2,3], you can use the syntax number[], this works for any type (e.g. string[]).

let list1: number[] = [1, 2, 3];
console.log(list1);
 
// Another syntax:
const list2: Array<Number> = [4, 5, 6];
console.log(list2);
 
// Array of objects
type User = {
  name: string;
  age: number;
};
 
const allUsers: User[] = [];
 
allUsers.push(
  {
    name: "John",
    age: 22,
  },
  {
    name: "Doe",
    age: 23,
  }
);
console.log(allUsers);
 
// 2D arrays
const matrix: number[][] = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
];
console.log(matrix);

Union Type

Union types are used when a value can be more than a single type. We use the vertical bar (|) to separate each type.

type item = "🍔" | "🍕" | "🌭" | "🥪";
type addons = "🍟" | "🥤";
 
let myItems: { item: item; addon: addons } = { item: "🍔", addon: "🍟" };
console.log(`MyItems: ${myItems.item} + ${myItems.addon}`);
 
const numbers: (string | number)[] = [1, 2, "3"];
console.log(numbers);

Note: Direct manipulation on individual types is not allowed because TS treats the union type as a new data type.

function getId(id: number | string) {
  //not allowed
  //id.toUpperCase();
 
  if (typeof id === "string") {
    return id.toLowerCase();
  }
 
  return id;
}
 
console.log(getId("1234"));
console.log(getId(1234));

Tuples

Tuples are typed arrays of pre-defined length and types for each index. The order of data type in each index should be maintained.

const rgb: [number, number, number] = [255, 255, 255];
console.log(rgb);
 
const user2: [string, number] = ["john doe", 22];
console.log(user2);

Array methods are allowed on tuples that violate type safety, so a good practice would be to make a tuple "readonly".

//strangely this is allowed:
user2.push(344);
 
const user3: readonly [string, number] = ["john doe", 22];
// this will now throw an error:
user3.push(344);

Enums

A special class that represents a group of constants, can be string or numeric.

enum MEMBER_ROLE {
  ADMIN = "admin",
  MODERATOR = "moderator",
  GUEST = "guest",
}
 
const memberRole = MEMBER_ROLE.GUEST;
console.log(memberRole);

First value is initialised to 0 by default then 1 is added to each additional value.

const enum ZERO_ONE {
  ZERO,
  ONE,
}
 
const zero = ZERO_ONE.ZERO;
console.log(zero);
 
const one = ZERO_ONE.ONE;
console.log(one);

We can also set the value and have it auto increment from that.

const enum TWO_THREE {
  TWO = 2,
  THREE,
}
 
const two = TWO_THREE.TWO;
console.log(two);
 
const three = TWO_THREE.THREE;
console.log(three);

Or we can initialise all the values.

const enum HUNDREDS {
  ONE = 100,
  TWO = 200,
  THREE = 300,
}
 
const oneHundred = HUNDREDS.ONE;
console.log(oneHundred);

Interfaces

Used to define shape/structure of objects. Interfaces are similar to type aliases, except they only apply to object types.

interface rectangle {
  height: number;
  width: number;
  area?(): number;
}
 
//rect1 adheres to interface rectangle.
const rect1: rectangle = {
  height: 1.5,
  width: 2.5,
};
console.log(rect1);
 
const rect2: rectangle = {
  height: 2,
  width: 4,
  area: function () {
    return this.height * this.width;
  },
};
 
const areaOfRectangle = rect2.area ? rect2.area() : "Area cannot be computed";
console.log(areaOfRectangle);

Interfaces can extend each other's definition. Extending simply means you are creating a new interface with same properties as that of the original interface, plus something new.

interface coloredRectangle extends rectangle {
  color: string;
}
 
const coloredRect: coloredRectangle = {
  height: 2.5,
  width: 4.5,
  color: "green",
};
console.log(coloredRect);

Interfaces vs Types

Declaration Syntax

Type: Types can be used to define simple types, union types, intersection types, and more.

type MyType = number | string;

Interface: Interfaces are typically used for defining object shapes.

interface MyInterface {
  prop1: number;
  prop2: string;
}

Extending/Implementing

Type: Types can be used to create union or intersection types, but they cannot be extended or implemented.

type A = { prop: number };
type B = { prop: string };
 
type C = A & B; // Intersection type

Interface: Interfaces can extend other interfaces and can be implemented by classes.

interface A {
  prop1: number;
}
 
interface B {
  prop2: string;
}
 
interface C extends A, B {} // Extending interfaces

Declaration Merging

Type: Types don't support declaration merging.

type MyType = { prop1: number };
type MyType = { prop2: string }; // Error: Duplicate identifier 'MyType'.

Interface: Interfaces support declaration merging, which means you can declare an interface multiple times, and their members will be merged.

interface MyInterface {
  prop1: number;
}
 
interface MyInterface {
  prop2: string;
}
 
const MyObj: MyInterface = { prop1: 1, prop2: "1" }; // Valid

Setting up TypeScript for projects (Node.js)

Create tsconfig.json file

tsc --init

tsconfig.json is a configuration file used by the TypeScript compiler (tsc) to specify compiler options and project settings for a TypeScript project. This file allows developers to define various settings such as compilation target, module system, output directory, and more.

Initialise Node Package Manager

npm init -y

Create dist and src folders.
Create index.html file and make it point to index.js in the dist folder by adding a script tag.
Create index.ts in the src folder.
Specify output directory in tsconfig.json

"outDir": "./dist"

All TypeScript files will be transpiled to JavaScript files with the same name as the TypeScript files and stored in the dist directory.

Add content to your .ts file.
Compile and run .ts file.

tsc -w

This command runs TypeScript files in "watch mode", allowing the compiler to detect changes and recompile automatically.

Classes

TypeScript offers full support for the class keyword introduced in ES2015.

Here’s the most basic class - an empty one:

class Empty {}

Fields

A field declaration creates a public writeable property on a class.

class Point {
  x = 0;
  y = 0;
}
 
const pt = new Point();
console.log(pt);
 
class User {
  //All fields are marked 'public' by default
  email: string;
  name: string;
  age: number;
 
  readonly role: string = "GUEST";
 
  constructor(email: string, name: string = "Username", age: number) {
    this.email = email;
    this.name = name;
    this.age = age;
  }
}
 
const user1 = new User("test@gmail.com", "John Doe", 22);
console.log(user1);

Getters & Setters

A getter method returns the property’s value. A getter is also called an accessor.
A setter method updates the property’s value. A setter is also known as a mutator.
A getter method starts with the keyword get and a setter method starts with the keyword set.

Note: A set accessor cannot have a return type annotation.

class Rectangle {
  height: number;
  width: number;
 
  private color: string = "";
 
  constructor(height: number, width: number) {
    this.height = height;
    this.width = width;
  }
 
  get area(): number {
    return Number((this.height * this.width).toFixed(2));
  }
 
  get rectColor(): string {
    return this.color;
  }
 
  set rectColor(color: string) {
    if (color === "black" || color === "white") {
      throw new Error("Color not valid.");
    }
    this.color = color;
  }
}
 
const rectangle = new Rectangle(2.2, 4.2);
 
rectangle.rectColor = "green";
 
console.log("Area: " + rectangle.area + ".");
console.log("Color: " + rectangle.rectColor + ".");
 
console.log(rectangle);

Interfaces can be implemented by classes.

interface TakePhoto {
  photoMode: string;
  filter: string;
}
 
class Instagram implements TakePhoto {
  photoMode: string;
  filter: string;
  constructor(photoMode: string, filter: string) {
    this.photoMode = photoMode;
    this.filter = filter;
  }
}
 
const instaPhoto = new Instagram("Manual mode", "Black and White");
console.log(instaPhoto);

Inheritance

It is the mechanism in which one class derives the properties of another class. In TypeScript a base class inherits a parent class using the extends keyword.

private keyword: private access modifier makes the field only accesssible inside a class.
protected keyword: protected members are only visible to subclasses of the class they’re declared in.
super keyword: It allows us to invoke constructor of parent class, call parent class methods within a subclass. The super keyword is useful for overriding and extending the behavior of methods defined in a parent class, especially when those methods are not declared as private.

Note: Constructors for derived class must contain a super call. Super must be called before accessing this in the constructor of a derived class.

class Family {
  public name: string;
  protected role: string | undefined;
  private access: boolean | undefined;
 
  constructor(name: string) {
    this.name = name;
  }
 
  protected setAccess() {
    if (this.role === "parent") {
      this.access = true;
    } else {
      this.access = false;
    }
  }
 
  family(): void {
    console.log("I belong to this family.");
  }
}
 
class Parent extends Family {
  constructor(name: string) {
    super(name);
    this.role = "parent";
    this.setAccess();
  }
 
  family(): void {
    super.family();
    console.log("I am a Parent and I have access.");
  }
}
 
const parent1 = new Parent("John");
parent1.family();
console.log(parent1);
 
class Child extends Family {
  constructor(name: string) {
    super(name);
    this.role = "child";
    this.setAccess();
  }
 
  family(): void {
    super.family();
    console.log("I am a Child and I don't have access.");
  }
}
 
const child1 = new Child("Doe");
child1.family();
console.log(child1);

Abstract classes

Define an abstract class in Typescript using the abstract keyword. Abstract classes are mainly for inheritance where other classes may derive from them. We cannot create an instance of an abstract class.

An abstract class typically includes one or more abstract methods or property declarations. The class which extends the abstract class must define all the abstract methods.

abstract class Animal {
  type: string;
  constructor(type: string) {
    this.type = type;
  }
 
  //regular method -> has to be implemented when declared.
  animalType(): void {
    console.log(`${this.type}.`);
  }
 
  //abstract method -> can be only implemented in the child class.
  abstract animalSound(): string;
}
 
class Dog extends Animal {
  breed: string;
  constructor(type: string, breed: string) {
    super(type);
    this.breed = breed;
  }
 
  animalSound(): string {
    return "Woof! Woof!";
  }
}
 
const dog = new Dog("Mammal", "Husky");
const dogSound = dog.animalSound();
dog.animalType();
console.log(dog);
console.log(dogSound);

Generics

Generics allow creating 'type variables' which can be used to create classes, functions & type aliases that don't need to explicitly define the types that they use.

They allow you to create reusable components (such as functions, classes, or interfaces) that can work with any data type while still providing type safety.

function identityAny(val: any): any {
  return val;
}
console.log(identityAny(2));
 
function identityGeneric<Type>(val: Type): Type {
  return val;
}
console.log(identityGeneric(2));

While using any is certainly generic in that it will cause the function to accept any and all types for the type of arg, we actually are losing the information about what that type was when the function returns. If we passed in a number, the only information we have is that any type could be returned.

Instead, we need a way of capturing the type of the argument in such a way that we can also use it to denote what is being returned. Here, we will use a type variable, a special kind of variable that works on types rather than values.

Custom generic interface

interface Pair<T, U> {
  first: T;
  second: U;
}
 
function logPair<T, U>(pair: Pair<T, U>): void {
  console.log(`First: ${pair.first}, Second: ${pair.second}`);
}
 
const stringNumberPair: Pair<string, number> = { first: "Hello", second: 123 };
logPair(stringNumberPair);
 
const booleanObjectPair: Pair<boolean, { name: string }> = {
  first: true,
  second: { name: "John" },
};
logPair(booleanObjectPair);

In the above example, when you define a generic type or interface like Pair<T, U>, T and U are placeholders for the actual types that will be used when instances of Pair are created. This allows you to create instances of Pair with different types for the first and second properties without having to define a separate interface for each combination of types.

Passing an array and using arrow functions

//use either T[] or Array<T>
function getArray<T>(list: Array<T>): Array<T> {
  return list;
}
console.log(getArray(["1", "2", "3"]));

const getArrayFirst = <T>(list: T[]): T => {
  return list[0];
};
console.log(getArrayFirst(["1", "2", "3"]));

Extending a generic type

interface database {
  name: string;
  email: string;
  age: number;
}
 
function getUser<T extends database, U extends database>(
  user1: T,
  user2: U
): object {
  return {
    user1,
    user2,
  };
}
 
const user1 = {
  name: "John",
  email: "john@gmail.com",
  age: 22,
};
 
const user2 = {
  name: "Doe",
  email: "doe@gmail.com",
  age: 24,
};
 
console.log(getUser(user1, user2));

Generic class

interface Mobile {
  model: string;
  screenSize: number;
  color: string;
  brand: string;
  operatingSystem: string;
}
 
interface Shirt {
  style: string;
  size: string;
  color: string;
}
 
class ECommerce<T extends Mobile | Shirt> {
  cart: T[] = [];
 
  addToCart(product: T) {
    this.cart.push(product);
  }
}
 
const order = new ECommerce();
 
order.addToCart({
  model: "iPhone 15 pro",
  screenSize: 6.12,
  color: "Black Titanium",
  brand: "Apple",
  operatingSystem: "ios 17",
});
 
order.addToCart({
  style: "Checked",
  size: "medium",
  color: "Navy Blue",
});
 
console.log("\n" + "MyCart:");
console.log(order.cart);

Type Narrowing

Type narrowing in TypeScript refers to the process of refining the type of a variable within a certain block of code based on certain conditions. This helps TypeScript infer more specific types, improving type safety and enabling better code optimization.

function printAll(strs: string | string[] | null) {
  if (strs) {
    if (typeof strs === "object") {
      for (const s of strs) {
        console.log(s);
      }
    } else if (typeof strs === "string") {
      console.log(strs);
    }
  }
}
 
printAll("John Doe");
printAll(["John", "Doe"]);

While it might not look like much, there’s actually a lot going on under the covers here. Much like how TypeScript analyzes runtime values using static types, it overlays type analysis on JavaScript’s runtime control flow constructs like if/else, conditional ternaries, loops, truthiness checks, etc., which can all affect those types.

`in` operator

The in operator is used for type narrowing, which means it helps narrow down the type of an object, based on wether a property exists within it. It's particularly useful when working with union or discriminated types.

interface Square {
  kind: "square";
  size: number;
}
 
interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}
 
type Shape = Square | Rectangle;
 
function calculateArea(shape: Shape): number {
  if ("size" in shape) {
    // 'shape' is of type 'Square' here
    return shape.size * shape.size;
  } else {
    // 'shape' is of type 'Rectangle' here
    return shape.width * shape.height;
  }
}
 
const square: Square = { kind: "square", size: 5 };
const rectangle: Rectangle = { kind: "rectangle", width: 6, height: 4 };
console.log(calculateArea(square));
console.log(calculateArea(rectangle));

`instanceof` operator

The instanceof keyword is used to check whether an object is an instance of a particular class or constructor function. It returns true if the object is an instance of the specified class or its subclasses; otherwise, it returns false.

function logValue(x: Date | string) {
  if (x instanceof Date) {
    console.log(x.toUTCString());
  } else {
    console.log(x.toUpperCase());
  }
}
 
logValue("Sunday, 25th Dec");
logValue(new Date());

Type predicate

A type predicate is a way to assert the type of a variable within a conditional statement. It allows you to narrow down the type of a variable within a certain block of code, based on some condition.

type Fish = { swim: () => void };
type Bird = { fly: () => void };
 
function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}
 
function feedPet(pet: Fish | Bird) {
  if (isFish(pet)) {
    pet.swim();
    console.log("Fish food");
  } else {
    pet.fly();
    console.log("Bird food");
  }
}
 
const myFish: Fish = { swim: () => console.log("Fish is swimming") };
const myBird: Bird = { fly: () => console.log("Bird is flying") };
 
feedPet(myFish);
feedPet(myBird);

In the isFish function, we define a type predicate pet is Fish, indicating that if the condition (pet as Fish).swim !== undefined is true, then pet is indeed a Fish. Within the feedPet function, when we call isFish(pet), TypeScript narrows down the type of pet to Fish if the condition is met, allowing us to safely call pet.swim() without TypeScript throwing errors.

Discriminated Union & Exhaustive Checking

A discriminated union is a union type that utilizes a common property in each of its constituent types to allow for more precise type checking. This common property, typically called a "discriminant" or "tag", is used to discriminate between the different possible shapes within the union. (kind in this case)

Exhaustive checking refers to ensuring that all possible cases of the discriminated union are handled within a switch statement or if-else chain. This helps TypeScript catch errors where you might forget to handle a specific case, ensuring that your code is more robust.

The never type is used to indicate that a value should never occur. When used in the context of exhaustive checking with discriminated unions, it helps TypeScript ensure that all possible cases are handled, leaving no room for unexpected values.

interface Circle {
  kind: "circle";
  radius: number;
}
 
interface Square {
  kind: "square";
  side: number;
}
 
type Shape = Circle | Square;
 
function getShape(shape: Shape): string {
  if (shape.kind === "circle") {
    return "Circle";
  }
  return "Square";
}
 
function getArea(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.side * shape.side;
    default:
      const _defaultShape: never = shape;
      return _defaultShape;
  }
}
 
const circle: Circle = {
  kind: "circle",
  radius: 2,
};
 
const square: Square = {
  kind: "square",
  side: 5,
};
 
console.log(getShape(circle));
console.log(getShape(square));
console.log(Number(getArea(circle).toFixed(2)));
console.log(Number(getArea(square).toFixed(2)));

Code

Feel free to browse the repository, raise issues, share your feedback, and contribute to the project.

Connect

If you're looking for a developer or just want to connect, reach out on any of my socials.

TypeScript Basics

Syntax

Arrow Functions

Default Value

Return Type

never

Assigning type to an object

Bad behaviour of objects

Combining types

readonly & "?"(optional)

Declaration Syntax

Extending/Implementing

Declaration Merging

Here’s the most basic class - an empty one:

Fields

Getters & Setters

Interfaces can be implemented by classes.

Inheritance

Abstract classes

Custom generic interface

Passing an array and using arrow functions

Extending a generic type

Generic class

in operator

instanceof operator

Type predicate

Discriminated Union & Exhaustive Checking

Connect

`in` operator

`instanceof` operator