A simple guide to switching to Typescript for Javascript Developers

Introduction

Introduction

Throughout my programming career, I’ve always been a fan of Javascript because I consider it to be a fun and versatile programming language. If you want to quickly become a full-stack software engineer and build products for both frontend and backend, then Javascript is your best bet at achieving this quickly.

However, like all good this in the world, Javascript has its flaws and limitations, most of which are related to types and variables. For instance, one of the flaws of Javascript is the null type error that dates as far back as 1995 when Javascript was created. You can view the error by typing the following lines of code in your console:

var nullval = null    
console.log(typeof nullval);

The error makes Javascript to consider a variable with a value of null as an object, which is definitely wrong. Errors like these are what led to the birth of Typescript – a less error-prone derivative of Javascript.

What is Typescript?

Typescript is a strongly-typed version of Javascript in which you are required to declare the type of every variable used. It is worth noting that Typescript is strongly-typed and not statically-typed because even though there are restrictions to type conversion, these conversions can still occur – compared to statically-typed languages like Golang in which a type of a variable cannot be changed after declaration.

Summarily, what Typescript offers is an extra layer of security to enable Javascript developers to write less error-prone codes and reduce bugs related to Type errors.

Tips for Javascript developers who want to pick up Typescript.

As Typescript is just Javascript with just a bit of finesse (ergo a superset of Javascript), it is quite simple for Javascript developers to pick up Typescript. Here are a few tips to help you get started:

Tip 1: Always remember to declare a type

The type system in Typescript is the major difference between it and Javascript. To validate the supplied values before the program stores or manipulates them, type systems are used in all programming languages. By doing this, the program is shielded from any unexpected behaviours and the code is guaranteed to behave as planned. In TypeScript, you can do the following to assign types to a defined variable:

   let myName: string = "Tobi Ojuolape";

Note that I had to write the variable’s type as “string” before proceeding to assigning it a value. Another way of doing this is by using interfaces and I would be sharing that in the next tip.

Tip 2: Declare types using Interfaces

Interfaces are usually used to declare the types of keys of an object before assigning values to each key in the object. Consider the following lines of code:

interface Shape {
    color: string;
    area: number;
  }


  let square :Shape = {
    color: "blue",
    area: 10,
  }

In this code, I first declare the interface type of shape with properties of color and area. Afterwards, I define a variable square and then set the values using the interface type Shape.

An interface can also be used to specify properties of a Class by using the Implements keyword like this:

interface UserInterface {
    name: string;
    age: number;
    occupation: string;
  }


 class Car implements UserInterface {
    name: string;
     age: number;
     occupation:string;
    constructor(name: string, age: number) {
      this.name = name;
      this.age = age;
    }
  }

A typescript interface, like a class, can extend another interface. This allows you to reuse interface members by copying them from one interface to another. This gives you a lot more freedom. For example:

interface FoodInterface {
    name: string;  
  }
  interface BreakfastInterface extends FoodInterface {
    ingredients: string[];
  }
  interface LunchInterface extends FoodInterface {
    ingredients: string[];
  }
  class Breakfast implements BreakfastInterface {
    name: string = 'Strawberry pie';
    ingredients: string[] = ['flour','sugar','cream','milk'];
  }

  class Lunch implements LunchInterface {
    name: string = 'Jollof rice';
    ingredients: string[] = ['rice','tomato','gravvy'];
  }

Tip 3: If you want your Typescript code to be exactly like Javascript, use Any

Declaring the Any type allows for any data type to be set for a variable. This is typically the type declaration used by vanilla Javascript as a variable can be dynamically set to any variable type at any point. An example implementation of the Any type can be seen below:

   // this will still run fine even though the type was changed
  let age :any = "24"
  age = 24

Conclusion

There’s so much more to learn if you want to become a pro at Typescript, but these tips should be enough to get you off to a good start. For most Javascript developers like me, I consider Typescript stressful as it requires me to write more lines of code than I need to. However, the tradeoff on speed is worth it eventually as at the end the day, writing with Typescript gives you a cleaner, better, and more reliable codebase.