What Is Typescript and How It Works

What is typescript?

The short answer is, typescript is a strong type language that is built on javascript. When writing typescript, it feels like writing 90% javascript, plus 10% extra. This 10% extra, as suggested by the name “Typescript”, is the type part.

Have you ever run into problems like this:

const add = (num1, num2) => {console.log(num1 + num2)}

Both num1 and num2 are the user input from the website. When the user puts 12 and 13, for example, you expect the return of the add function is 25. However, you may get 1213, because by default javascript reads user input as a string, not a number. So what actually happened behind the scene when the user put 12 and 13, is

"12" + "13" = "1213"

Two strings are concatenated into a longer string rather than adding the two numbers together.

Then will typescript fix this, you may ask. The answer is actually no. Typescript won’t fix this for you and return you 25 instead of “1213”. What typescript can do is throwing an error at you before you compile and see “1213” on your screen. The error reads like this, “The arguments function ‘add’ takes should be 2 numbers, but what it actually gets are 2 strings. This is an error.” The number and string, along with many other types, are the 10% extra on top of normal javascript.

So, How to use Typescript?

To install, run in the command line

npm i -g typescript

Then, in your project folder, create file index.ts. This is going to be the file we spend most of our time working on for this practice. However, browsers can’t read .ts files directly. We need to compile .ts file into a javascript file first, and then have the browser read that javascript file created by the typescript file.

To actually doing what we explained, run

tsc index.ts

in your terminal, and this should create a javascript file for you “index.js” which doesn’t include anything yet. If you then edit on your index.ts, for example

console.log("Hello World!")

Then you run tsc index.ts again in your terminal. You should see your index.js is updated with the exact same code “console.log("Hello World!")” This is the fundamental way to compile a typescript file in a project. Every time you write something new, run tsc index.ts to update the javascript file. There will be easier ways, but for now, just repeat this routine so we can focus on the fundamentals.

In typescript, you can specify the type of every variable. For example, the same function “add” in typescript would look like

const add = (num1: number, num2: number) => {console.log(num1 + num2)}

So now, we tell our function add that you can only take arguments who are numbers. So if you run

add("12", "13")

Normal javascript would not throw you an error where it should, but typescript would give you the error you wish to see. “Argument of type ‘12’ and ‘13’ are not assignable to parameter of type number”. “12” and “13” are not numbers, fix it.

Types in Typescript

There are 11 basic types in typescript. Let’s take a look at each of them.

1. Number Types

const myLuckyNumber: number = 10

In typescript, there is no distinguish between integers and floats. They are all numbers

2. String Types

const greet: string = "Hello"

3. Boolean Types

const isOn: boolean = true

4. Enum Types

This is a special type that typescript has but javascript doesn’t. Enumerated data types (enums) are a set of numeric values with more friendly names. For example:

enum Room { bathroom, kitchen, livingRoom }
let firstRoom: Room = 0

Here we set the firstRoom equal to the bathroom, without explicitly put word “bathroom” as the input. Later on you decide your firstRoom would instead be a kitchen, you can reassign the value like this:

firstRoom = 1

5. Void Types

This type is used for a function that will never have a return value.

const showConsoleLog = () :void => { console.log("hoho") }

6. Null Types

You can declare a variable and decide never to assign a value to it.

let cursedVar:null = null

7. Undefined Types

Similar to null, you You can declare a variable and decide to leave it undefined.

let cursedVar2: undefined = null

8. Any Types

Any types, as its name suggests, would take any input and will never throw an error at you. Using any type is basically throwing away the purpose of existence of typescript because you simply go back to normal javascript. Try to avoid using any types as much as you can.

let tempVar: any = "hmm"
tempVar = 100;
tempVar = true;

9. Array Types

In typescript, when you define an array, you can specify the type of elements this array includes. For example, if you want an array of only numbers:

let numArr: number [] = [1, 4, 5]

If you want an array of a mix of numbers and strings

let mixArr: (number | string) [] = [1, 4, 5, "a"]

The “|” is called a Union in typescript. Use it when you expect to have more than one type.

10. Tuple Types

Back to the previous array example. If you not only want an array to include numbers and strings, but specifically, you want to make sure the first element is always a number, and the second element is always a string. You want to use Tuple.

let friend1: [string, number] = ["James", 2020];

It will give you an error if you try to switch the sequence

friend1 = [2020, "James"] #=> this will give you an error

11. Never Types

The never type is newly introduced type to typescript which indicates the values that will never occur. For example,

function throwError(errorMsg: string): never { 
            throw new Error(errorMsg); 
}

That’s it

I hope you enjoy this guide, and have fun with typescript.