Let's Learn Typescript (Javascript Devs) | Getting Started 01

List Of Content

ADS Area (CARBON)

ADS Area (CARBON)

 

Getting Started 

Typescript is a superset language of javascript that compiles down to plain javascript code, it is open source developed by Microsoft open-source team which basically adds strict typing into the javascript code base, which a lot of developers take it as (Javascript with Superpowers).

The power of using typescript on your next project instead of javascript is that it gives you where the error are on your code so you can easilly fix bugs, errors and structure your code base the way it should.

You will understand the power of it once you try it, so please stay calm since first we need to setup the development environment in order to be able to use it correctly.

Here is typescript's official website for more information.

For compiling typescript code into javascript we are going to need the typescript compiler alongside Webpack which basically allow us to use this compiler in order to produce the final ready javascript code which then can run on our browser or on node.js.

Node.js and NPM are required for this tutorial (make sure that they are installed on your machine).

First, make sure to setup a Node.js project which has a package.json by initializing it.

npm init 
# then type in the required info

Then, Install required dependencies.

npm install webpack webpack-cli typescript awesome-typescript-loader --save-dev 

We are going to use the awesome typescript compiler module to load typescript code and compile down to javascript.

Here is the project structure we are going to work on.

--dist/
--src/
--app.ts
--package.json 
--tsconfig.json
--webpack.config.js

Typescript Config

For using typescript and being able to tell the compiler how to compile down our code we need to provide it with a specific configuration, so in the root dir of the project create a new file tsconfig.json.

{
  "compilerOptions": {
    "outDir": "/dist/",
    "noImplicitAny": true,
    "module": "commonJs",
    "target": "es5",
    "jsx": "react"
  }
}

So we are basically telling the compiler to put the final javascript code into the dist/ folder and we target ECMAScript 5 (ES5) with JSX support (since we will use react later on this series).

We also set noImplicitAny to true since we want to have a strict typing (which will give us errors whenever there are).

Webpack Config

Alongside Typescript configuration we also need to configure webpack in order to make them fully compatible with each other using the typescript loader.

Typescript has (.ts) extension for normal typescript code and (.tsx) for typescript with react the same as (.jsx).

//The Entry point is where the compilation will start 
module.exports = {
    entry: __dirname + "/app.ts",
    mode: "development",
    output: {
        filename: "app.js",
        path: __dirname + "/dist"
    },

    module: {
        rules: [{
            test: /.tsx?$/,
            use: "awesome-typescript-loader"
        }]
    }
}

In order to use the loader, we first have to check if the file extension is right (which means that we are about to compile a typescript source file) then we tell it to use the awesome typescript loader for linking the compiler and source code together and eventually output the full plain javascript code to the dist/ folder.

Also, make sure to set the mode to development to be able to debug and see your code in action when developing an application using webpack.

The last thing is to make sure to add the watch script to the package.json (so we can compile our code afterward).

"scripts": {
...
    "watch": "webpack --watch"
...
},

 

Working with Typescript

Now, since we have linked webpack to start the compilation process from the app.ts file that means this is the main entry file that we have either to import other files to or we could just simply put our code there.

try to put there a very simple string variable but this time using typescript instead of old javascript code.

let me : string = "Hello World, This is typescript  :)";
//Remember that typescript uses strict typing so you specify which is the type of the variable 

In this case, the variable we create is simply a string so we specify this by putting a clone then the type of the variable after the variable name.

Now you can run the watch script and see if you can actually compile the typescript code.

#Watch Script 
npm run watch 

Brilliant!

What's Next

As you can see we can start working with typescript already, so hopefully, you have been able to compile your code into javascript since this is just the getting started tutorial where we only covered the basics of typescript and how we can setup our project in order to be able to work with more complicated stuff afterwards.

In the next tutorials, we will go in depth of the super powers of typescript language and why you should consider using it instead of normal javascript code.

 

Share Tutorial

Made With By

Ipenywis Founder, Game/Web Developer, Love Play Games