So What Exactly is TypeScript?

Hello there, I'm glad you visited the link to this article. I recently came across a project that requires TypeScript skills so I've embarked on a journey to learn the tool. As a believer in project-based learning, I am getting my hands dirty pretty quickly and instantly applying any newly found knowledge that I discover.

If I were to describe TypeScript to a 5-year-old, I would define it as "a tool to help people with naming things." Essentially, TypeScript is a developer tool and a version of JavaScript that is statically typed as opposed to dynamically typed. It is a superset of JavaScript with design-time support for type safety and tooling. To demonstrate the difference between statically typed and dynamically typed programming languages, consider the example below:

JavaScript:

var car = 'BMW';
var age = 50;
var country = 'Zimbabwe';

The code snippet above shows how variables are declared in JavaScript. The example below demonstrates how variables can be declared in TypeScript:

let car: string = 'BMW';
let age: number = 50;
let country: string = 'Zimbabwe';

The difference between the two is that with JavaScript you can't write the data type when declaring a variable whereas with TypeScript you can declare the specific data type of a variable. This helps with debugging errors associated with data types otherwise known as type errors. I'd like to believe that is why it is called TypeScript. A common example to understand this concept is the one shown below:

JavaScript/TypeScript code block:

    let a = 25
    let b = '5'
    console.log(a / b);

The example above will output the number 5 when executed as a JavaScript file. However, the TypeScript compiler will give an error saying "error TS2363: The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type." The reason for this is a string cannot be used for arithmetic operations in TypeScript. The JavaScript compiler, however, can perform this calculation with ease. TypeScript files have a .ts file extension.

Installation

In order to enable TypeScript features on your system, you will need to install it by entering the npm i typescript command in your terminal. You can use the optional -g flag to install it globally. Note that this requires you to have Node.js installed on your system. The latest version as of this article is 5.1.6, however the latest stable version is 4.9.3

Create a folder and open it in the IDE of your choice, then create a TypeScript source file and name it anything, just ensure that it has a .ts file extension. Use the tsc main.ts command to compile your TypeScript file. The TypeScript file name (main.ts) comes after the tsc command followed by the .ts file extension. Writing this command can become a tedious task so you can use tsc main.ts -w to enable the watch feature. This ensures that you don't have to repetitively enter the same command to compile your TypeScript file. All these commands are only available when you install TypeScript on the system.

Next, while in your project folder, typing tsc --init will activate the configuration file for TypeScript. A file called tsconfig.json will be automatically created and added to the root of the project folder. This folder contains many lines of commented-out code. Uncomment a line to activate the TypeScript feature. Every feature has a description at the end of the line. One other thing you can do is open a terminal such as Windows PowerShell and navigate to a different path from your project repository. If TypeScript is installed, typing tsc will display a long list of all the configuration settings listed in the tsconfig.json file. Developers have the added option to change TypeScript configuration settings from the terminal.

Use Cases

TypeScript is a popular option for many modern-day web development projects. Developers who are well-versed in JavaScript have an easy time migrating to using TypeScript. Frameworks such as Angular use TypeScript and require it to be installed in the project repository. One huge difference between JavaScript and TypeScript is that TypeScript needs to be installed using a package manager such as npm whereas JavaScript comes pre-installed and is compilable on many platforms such as web browsers.

Signing Off...

If you enjoyed this article, you are welcome to let me know what you think via the contact section. You can also navigate to the home page to view a list of my other articles. Thank you for reading my blog and happy coding!✌️