Abel Emmanuel

Posted on Dec 21

How I start typescript.

#typescript #javascript #beginners

Hey there,

If you're reading this particular post, I want to appreciate you specially by finding your way to my first technical writing blog post.

The Chinese proverb says "The journey of a thousand miles begun with a step".

Firstly, my name is Abel Emmanuel and I'm a software developer, open source contributor and advocate. I will like to wish my humble self happy birthday.

Today, being 20th December 2024, I started learning Typescript and technical writing. I've known Typescript for quite sometimes but I never saw the important, usefulness, rich features and how it'll help me write better code.

Ideally, I refused to learn Typescript earlier at the times I knew about it. I concluded there is no usefulness of learning Typescript since it has the same syntax and everything with JavaScript not until I got a job that required Typescript.

This is how I started learning Typescript properly, if not I have zeroed my mind on Typescript.

Today, I want to share the basic of Typescript and how important it is and how it can help you reduce the errors you write in your code.

JavaScript from birth is not a typed language like C, C++, C#, Rust and other low-level programming language.

In typed languages, variables and values have a types.

This is what it means by typed-language using C programming language as a practical illustration.

For example in JavaScript to defined a variable:

let x = 5
typeof x    //number

In JavaScript, x can be reassign to a string value.

x = "Emmanuel"
typeof x    //string

Compare with low-level language like C programming language that you have to let the variable aware of the value data type. For instance:

init x =  5
float y = 0.5

If you attempt to reassign variable x and y it throw an error. However, JavaScript is a loosely typed language which can cause plenty of bugs in your code.

To avoid this, you need a super-set of JavaScript called Typescript. Typescript is a static type checker that help check an error in a program before running the program.

Let get started
Install Typescript globally or locally into your project.
npm install -g typescript

Create a folder and name it typescript.

Right-click on the folder (typescript), open with visual studio code and create a file test.ts.

After you've done that, the next step is to start writing your typescript.

Inside your test.ts file copy and paste code inside the file and run it.

console.log("Hello world");

To run typescript file. Open your Command Line Interface (CLI) and tsc test.ts. The command will run the typescript file.

Note: If you do not install typescript you won't access tsc in the CLI.

After you run it, you'll notice that nothing spectacular happen in the CLI but however, you'll note a new file test.js in the folder.

Open the test.js file you will note the command you run will output everything in test.ts to test.js.

Let include types in our code. Let see how it look like in Javascript.

function meet(name, id){
    console.log(`Hello ${name}, your unique ID is ${id}.`)
}

meet("Abel Emmanuel", 7)
// Hello Abel Emmanuel, your unique ID is 7.

Run tsc test.ts. Nothing special happened.
However, assuming the function call meet() get a one argument like meet(7).

Typescript will indicate a an error.

Expected 2 arguments, but got 1.ts(2554)
test.ts(1, 21): An argument for 'id' was not provided.

Normally, in JavaScript world the code is cool but that isn't what we wanted. So even though it doesn't throw an error at runtime. Typescript has help us identify a problem before hand. This is the cooool part of typescript. It help you write a less buggy codes.

Let examine this code.

function meet(name: string, id: number){
    console.log(`Hello ${name}, your unique ID is ${id}.`)
}

meet("Abel Emmanuel", 7)
// Hello 7, your unique ID is undefined.

Note function meet(name: string, id: number), the additional :string and :number. this tell us that we are expecting a argument string and a number. If you do the otherwise your code will trigger an error.

Function return a type
We can allow our function to return a particular typed.

function meet(name: string, id: number): string{
    return `Hello ${name}, your unique ID is ${id}.`
}

meet("Abel Emmanuel", 7)
// Hello Abel Emmanuel, your unique ID is 7.

Object Typed

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

function meet(person: Person): string{
    return `Hello ${name}, your unique ID is ${id}.`
}

meet("Abel Emmanuel", 20)
// Hello Abel Emmanuel, your unique ID is 7.

Other primitive typed Annotation.

let x: string = "Abel Emmanuel"
let y: number = 20

Array Typed Annotation
type Pesron = Array[]

Generic Typed Annotation
type StringGeneric = Array<string>
type NumberGeneric = Array<number>
type ObjectNumberWithGeneric = Array<{number}>

In conclusion, Typescript is a typed language that help you write a better JavaScript and lesser bugs. Read more on Typescript Official website: Typescript.

Let me know if you find this post helpful and if there's a better way to improve I will be glad to learn from you. Thanks for reading my first post.

Follow me on Twitter where I share great content.