¡Typescript for dummies!

TypeScript is a programming language that builds on top of JavaScript by adding static typing and other useful features. In this article, I will explain some of the key concepts of TypeScript that I use in my projects.

To start, static typing means that we assign types to our variables, functions, and components. For example, instead of this:

let age = 28; 
age = '28';

I can replace it with strict typing using TypeScript in the following way:

let age: number = 28; 
age = '28'; // Error, age is of type number

Here, age has been assigned the type number, so we cannot reassign it to a string. This detects errors early and makes the code more robust.

Another key concept in TypeScript is interfaces. Interfaces define contracts (shapes) that data must comply with. For example, you could have a User interface:

interface User { 
  name: string; 
  age: number; 
}

Now, any variable that implements this interface must have name and age, which are of type string and number respectively.

let julian: User = { 
  name: 'Julian', 
  age: 28 
}

If I try to do this:

let julian: User = { 
  name: 'Julian', 
  age: '28' // Error, age must be a number
}

I get an error because I didn’t fulfill the contract established in the interface. Interfaces give me type safety and make the code more secure!

In addition to the User interface, I often use interfaces to define contracts for functions. For example:

interface NewFunction { 
  (num1: number, num2: number): number; 
} 

let add: NewFunction = (n1, n2) => n1 + n2;

Here, I’m saying that add should be a function that takes two numbers and returns a number. If I were to try to do this:

let add: NewFunction = (n1, n2) => n1 + n2 + '1'; // Error, should return a number

I would get an error. Function interfaces are very useful for defining clear contracts in my applications, which is why I recommend them.

One last key concept in TypeScript that I use a lot is typing object properties. I can define the shape that an object should have by specifying its properties and types:

let user: {name: string, age: number} = { name: 'Julian', age: 28 }

Here, I gave the {name: string, age: number} type to the user object, which means it must have properties name and age of type string and number respectively.

In the next section, I will talk about TypeScript with a focus on React.js and briefly explain how it can improve development by reducing the number of errors and allowing for more agile code writing.

React.js routes, for example, get type safety with TypeScript, which means I get autocompletion and validation for my route names. Event handlers also get types, so I know I’m receiving a Request and Response object, along with their types. Finally, Redux reducers get powerful types, so I can dispatch typed action objects and return a typed state from my reducers.

Finally, TypeScript adds some very useful features to JavaScript that I use to build more organized and secure applications. I give it a big thumbs up and recommend it to any JavaScript developer who hasn’t yet decided to migrate!

I hope this article has given you a good insight into some key concepts and I’ll see you in the next article.

That your code be as perfect as a summer breeze! Best wishes!