How to Typescripting (Part 1)

Abiyogaaron
3 min readSep 4, 2021

--

Beginner guide with no experience in coding to start coding with typescript

Typescript Introduction

First of all, what is typescript anyway ? Typescript is a programming languange developed and maintained by microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language.

Why Typescript ?

Typescript simplified the javascript code, make your life easier to read the code and debug it. Typescript is an Open source and it’s provide you highly productive development tool, it’s make your code more easier to read and understand.

typescript transpiling into javascript
Transpiling from ts to js

The Advantages of Typescript

  1. Early spotted bugs

Researchers found that TypeScript detects 15 percent of common bugs at the compile stage. Although it’s far from 100 percent, this amount is still significant enough to save developers time and let them focus on correcting mistakes in the logic. It means Typescript is safe typing, so we are able to spot bug before any buggy code get into a production environment.

2. Predictability

When we declare a variable as a string or a boolean, everytime we want to reassign the variable, we know that the variable will be always as a string or a boolean no matter what happen in the code.

let name: string = "John" // its always string
let isActive: boolean = true // its always boolean

3. Readability

Due to the strict types and others utilities, the code will be more expressive, which means if this logic runs, it’s more clear what will happen next or what will be the value of a variable after some code run through. You can see the design intent of developers / engineers who originally wrote the code. A code that speaks for itself can offset the lack of direct communication between team members.

When we use Typescript or Javascript ?

It depends on the scale of your projects, if your project is a simple code or a simple program, you can use javascript better. But if your project is more complex and more prone to error, I would like to recommend you using typescript.

The Typescript Trends

most of wanted specific language developer stackoverflow 2021
Most wanted Language 2021
most of loved language 2021 stackoverflow survey
Most loved Language 2021

Beginner guide for no Experience in Coding

You can check this video: https://biteable.com/watch/3211035/b160704017f4b348e742fc39c1329354

Steps:

  1. Download and install https://code.visualstudio.com/ , choose between 64 bit or 32 bit if you are using windows.
  2. Download and install https://nodejs.org/en/ , I recommend the LTS version, choose between 64 bit or 32 bit if you are using windows.
  3. Download https://cmder.net/ and extract it on your D:\ *windows users only
  4. Open your terminal / cmder and type this:
> npm install -g typescript
// wait until its done
> npm install -g ts-node
// wait until its done

5. Open your visual studio code (already installed)

6. Try to code with simple hello world

make sure your terminal in the same folder of your code

7. Compile and execute it with

tsc your_file_name.ts
node your_file_name.js

tsc is used for transpiling your typescript file to a javascript file (converting), because your node ( NodeJs ) can’t execute or compile a typescript file.

In addition, we use node to compile your javascript code so you can see the results on your console.

💡Notes:

  1. Make sure Typescript, NodeJS and Npm are already installed on your device.
  2. Open your terminal and type this
> tsc -v
> Version 4.0.2 //example version
> node -v
> v10.16.3 //example version
> npm -v
> 6.9.0 //example version"

💡 I would like to recommend you to search more about the detail of typescript, it is important for you to understand the concept first, before you start to code with typescript.

--

--

Abiyogaaron

I’m a Software Engineer in one of Indonesia E-Commerce. A Tech enthusiast and a Programming teacher