Introduction to Typescript

Abdulrahman Yusuf — Sun, 10 Jan 2021 14:40:33 +0000

Typescript has been around for a while now, and I'm sure you must have heard developers around you talk about it. According to the latest StackOverflow survey, Typescript is the second most loved programming language after Rust. In this article, I would be introducing what Typescript is, its benefits in today's world, and how to set up your Typescript development environment.

Prerequisites

In order to have a seamless experience while following this article, ensure you have the following catered for:

Basic knowledge of Javascript
A Text Editor e.g VS Code
Node installed on your machine
Basic Knowledge of using the terminal
Yarn Installed (optional)

What is Typescript?

TypeScript is a programming language created and maintained by Microsoft. It is a strict syntactical superset of Javascript and adds optional static typing and true Object-Oriented Programming (OOP) capabilities to the language. If you're familiar with other programming languages like C# or Java, it is impossible to declare a variable without stating the datatype it would hold. So, Typescript enables us to replicate this feature in Javascript in order to reduce runtime errors or bugs which developers face while coding. It also increases developer productivity. Since TypeScript is a superset of JavaScript, existing JavaScript programs are also valid TypeScript programs. Also, few people also consider Typescript as Javascript with superpowers😎.

Benefits of Using Typescript

Statically Typed System: Javascript is a dynamically typed language, hence it has no support for using and creating types during development. Developers can easily make an error like missing a letter in a function/variable, referencing an undeclared function/variable etc. But with Typescript, we can create a typed system that will enforce the type and properties for any given variables, functions, or object that's declared which in turn enables the developer to create more robust and scalable code.
Code Readability: Code written in Typescript is very easy to read due to the types which have been created for it. Anyone can easily understand the developer's intent who originally wrote the code as most code blocks are self-explanatory.
Browser Compatibility: Typescript is transpiled to Javascript that is compatible on all browsers. Developers also have the option of choosing what version of javascript they would like their code to be transpiled to among the ES Versions of Javascript.
Code Completion and Intellisense: Using Typescript enables developers to enjoy code auto-completion and suggestion while coding which speeds up development thereby increasing productivity gains.
Discipline: Developers who code in Typescript are disciplined because it forces them to fix any bugs they run into during the course of development. Also, the types which are created act as preventive measures that will help the developer enforce the expected properties or parameters for an object or function created.

Setting up a Typescript Development Environment

Typescript can be installed on a local machine using either of the following commands:

npm install -g typescript

yarn global add typescript

This would install Typescript globally on our machine. Once the installation is completed, we now have access to the tsc command. The tsc command stands for Typescript Compiler which we would be using for most of our operations with Typescript. You can confirm if the installation was successful by using the command:

tsc -v

You should get a version number outputted after entering that command in your terminal.

Now, create a folder called ts-intro then create a file called app.ts within it. Typescript files are usually identified with a .ts extension. Paste the following code in our app.ts file:

console.log("Hello World");

Then run the Typescript compiler in order to compile our code to Javascript:

tsc app.ts

You should find a new file app.js created automatically in your project root. That's the javascript file which our Typescript code was compiled into.

Now, imagine we have more than one Typescript file within our project, running the tsc command for each one of them would be counter-productive, we need a more efficient method for compiling all our Typescript file. We can achieve that using the tsconfig.json file that would be created in our project root. Run the command below to do that:

tsc --init

A new file named tsconfig.json should be in your project root after running that command. This file is very similar to what our package.json file does in most projects. It contains the rules and configurations Typescript will be needing in order to work seamlessly on our machine.

Looking at our newly created tsconfig.json file, we would find a considerable amount of configurations which we need not worry ourselves about now. The only thing we might need to change is our target option. This tells us what version of javascript our Typescript code would be compiled into. The default selected option is ES5, we can change it to ES6 if we would like our javascript code to use the latest features of javascript or any other version we wish to use. Also, comments have been created alongside each property to tell us what they are for.

{
  "compilerOptions": {
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "strict": true,                           /* Enable all strict type-checking options. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. */
    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
  }
}

So, create another file called main.ts and paste in the following code:

const user = {
  firstName: "Brian",
  lastName: "Smith",
  role: "Doctor"
}

console.log(`Hello ${user.role} ${user.firstName} ${user.lastName}`)

Running our tsc command would compile all files ending with the Typescript extension in our project root. A new file called main.js would be created. If we inspect it, you'll notice we have javascript code that's in ES5 version.

"use strict";
var user = {
    firstName: "Brian",
    lastName: "Smith",
    role: "Doctor"
};
console.log("Hello " + user.role + " " + user.firstName + " " + user.lastName);

Now, we can use the tsc command to compile any Typescript file we have in our project.

Conclusion

In this article, we learnt what Typescript is, the benefits of Typescript in today's world, and how to set it up in your development environment. This article is just an introduction to Typescript, there's still so much about Typescript we obviously can't discuss in a single post. I hope this article has convinced you why you might need Typescript in that next project you plan to work on. In my upcoming post, I would be showing you how you can convert a project originally built with Javascript to Typescript.