Typescript: It’s just Better

Table of Contents

• Getting Started
• TypeScript Fundamentals

What is TypeScript

TypeScript is JavaScript with extra syntax for better coding experience.

Basically, writing more code makes you find error less. Because the IDE knows more about what you’re doing and make stupid errors appear less in the final code.

Getting Started

If you already know JavaScript, this will be pretty easy. Extra syntax also means that any valid JavaScript code is also a valid TypeScript code.

I’ll assume that you already know JavaScript and installed NodeJS so we won’t be talking about it here.

To start writing TypeScript. I recommend and personally use tsc. You can install it by running this command on your project

npm install typescript --save

then, create a file ending in .ts for example index.ts

try writing this code on the file

console.log("Hello World")

then run it by using tsc

tsc index.ts

You’ll see that there’s a index.js file created. Then you might ask “why not just use JavaScript?”. Which brings us to the fundamentals of TypeScript.

Fundamentals

Types

With TypeScript you can assign a type to your variable when you first created it. For example, giving the greetings variable a string type.

This would eliminate an error that I often face which is I use the wrong type of variable in my code.

let greetings: string = "Hello World"

if you try to assign a different type of variable to it, your code editor will give you an error.

you can also assign an array type to a variable

let ages: number[] = [12, 13, 14, 17]

you can see what types are available here

if you don’t know what Type the variable would be. You can always use the any type like this

let monkey: any;

You can also assign multiple types to one variable

let NumberOrWord: string | number;

Interface

Interfaces define the properties of an Object.

Kind of like classes in other Programming Languages.

An easy way to explain this is interfaces are multiple types in a variable.

interface Human{
    name: string;
    age: number;
    height: number;
    friends: string[];
}

let john: Human = {
    name: "John",
    age: 30,
    height: 1.75,
    friends: ["Mary", "Mark"]
}

console.log(john)

the output for this example would be

{ name: 'John', age: 30, height: 1.75, friends: [ 'Mary', 'Mark' ] }

sometimes you don’t always want to input a property. With that you can have a property optional.

interface Cat{
    name: string;
    // age is optional to input
    age?: number;
}

let john: Cat = {name: "John"} // you can just not input it here
let jeff: Cat = {name: "Jeff", age: 12}

Classes

Classes are very similar to Interfaces but with initializers.

Initializers are the starting value of a field.

class Dog {
    name = "Dog";
    age = 1
}

const sam = new Dog();

Initializers also define the type of the field of that class, so you won’t be able to change them.

For more in depth info for classes on TypeScript you can read the documentation here

Modules

Importing

If you have used JavaScript to build any project. You’ve probably used a library module before by importing it.

This is the same but TypeScript has different syntax.

normally you would use require() in JavaScript. But in TypeScript you use import.

import monkey from './monkey.js'
// this is just an example

you can also rename the import by using the as word.

import monkey as john from './monkey.js'

if there are multiple imports from a module you can surround them by using {}

import { monkey, gorilla, ape } from './monkey.js'

now that you know how to import basic modules.

We can talk about how we can import in other different ways.

if you want to import the entire module into a single variable. Use * and as.

import * as everyMonkeys from './monkey.js'
// this will import the entire module into a single variable

some modules does not have an export. But is just there for you to import for the side effects.

For that we can just import it without storing it in a variable.

import './monkey-effect.js'

Exporting

Now that you know how to import modules.

Here’s how you can export your own modules to use elsewhere in your code.

export let age = 13;
export class Monkey;
export function add(num1: number, num2: number){
      return num1 + num2;
}

Default Exports

There can only be one default export in a module or file. Typically they are the main thing on that module.

To use default export we add in the keyword default after the export.

export default let name = "Monkey"

Remember, there can only be one default export per file.

Using TypeScript in your code

You can use types and interfaces anywhere like it’s a variable for example. Using it in a function.

Here we are defining the parameters that we’ll be using in our function

function defineCat(cat: {name: string, age: number}){
    console.log("Your Cat's name is " + cat.name + " and it is " + cat.age + " years old.");
}

defineCat({name: "Johnny", age: 1});

As you can see this would better if we use Interface.

So let’s change the code a bit.

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

function defineCat(cat: Cat){
    console.log("Your Cat's name is " + cat.name + " and it is " + cat.age + " years old.");
}
defineCat({name: "Johnny", age: 1});

as you can see interfaces also work like types in the function. So you can basically use them anywhere like a variable.

Summary

Now that you have learned about TypeScript which is an extension to JavaScript. You might also find blogs about JavaScript useful. Click this link to take you to blogs about JavaScript.