Setting Up a Vanilla TypeScript Project

So you've just finished your JavaScript tutorial, and now you're hearing that there's a better way to write JavaScript - TypeScript. Depending on your previous programming experience, you may or may not be familiar with typing and type safety, which is what TypeScript adds to the already awesome JavaScript. TypeScript makes writing JavaScript easier and prevents a lot of common and unnecessary errors. In this article, you'll learn how to set up a vanilla TypeScript project.

Prerequisites

Before you proceed with this article, the following are assumed:

1. You know JavaScript (obviously lol)
2. The latest version of Node.js is installed on your system.
3. You are familiar with npm.

Step 1 - Initialise the TypeScript Project

First, you have to create a directory for your new project. Open the command line and type the following commands:

mkdir my-awesome-typescript-project
cd my-awesome-typescript-project

Once you're in the new directory, go ahead and install TypeScript:

npm i typescript --save-dev

The --save-dev flag saves TypeScript as a devDependency, so you know that TypeScript is needed for development.

After TypeScript is installed, initialise the project by using the following command:

npx tsc --init

The command above uses npx (a tool that allows you to execute any JavaScript package available on the NPM registry without even installing it) to run the command that initializes a TypeScript project.

Running this command creates a new tsconfig.json file, which defines how TypeScript and the tsc compiler should interact (what JavaScript version to produce, what files to compile, what directory to compile files to, amongst others). You can learn more about the tsconfig.json file in the official TypeScript handbook.

Go ahead and open the tsconfig.json file in any code editor of your choice. When you open it, you will notice a lot of defaults (mostly commented out), which may be overwhelming. But with time, you'll get to know which ones to modify to suit your use case.

Replace the entire tsconfig.json file with the following:

{
  "compilerOptions": {
    "lib": ["ES2015”],
    "module": "commonjs",
    "outDir": "dist",
    "strict": true,
    "target": "ES2015”,
  }
  "include": ["src"]
}

The above configuration specifies the following:

1. Lib: Specify which APIs TSC should assume exists in the target runtime environment
2. Module: Specify the module system tic should use to compile your code (commonJS,ES2015 etc)
3. OutDir: Specify an output folder for all emitted files.
4. Strict: Enable all strict type-checking options.
5. Target: Set the JavaScript language version for emitted JavaScript and include compatible library declarations.
6. Include: Specify which folders TSC should look in to find your TypeScript files

Once that is done, proceed to coding and compiling your typescript app

Step 2 - Code and compile your typescript project

Now that you have successfully setup your typescript project, the next step is to write your code and compile it.

From the tsconfig.json file above, we told the typescript compiler to compile code from the src folder so let us go ahead and create our first typescript file.
In our projects directory, let’s create a new src directory where all our typescript files will be written and Lets go into the directory

mkdir src
cd src

Create a typescript file

Touch index.ts

Now open the newly created file in your preferred code editor and add the following code

let isWorldSaved: boolean = false;

export function saveTheWorld(): string {
  if (isWorldSaved) {
    return `Too late, world has already been saved`;
  } else {
    isWorldSaved = true;
    return `Hurray, you just saved the world`;
  }
}

Once you’ve written this typescript code, go ahead and run the typescript compiler

npx tsc

Once you run this, you’d notice that a new index.js file will be added to the dist folder just like we want and it should look like this

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.saveTheWorld = void 0;
let isWorldSaved = false;
function saveTheWorld() {
    if (isWorldSaved) {
        return `Too late, world has already been saved`;
    }
    else {
        isWorldSaved = true;
        return `Hurray, you just saved the world`;
    }
}
exports.saveTheWorld = saveTheWorld;

You can also run the typescript compiler in watch mode so you don’t have to run the npx tsc command each time you make a change. Do this by running the following command

npx tsc -w

That’s it!! You’ve learnt how to setup and run your typescript project and now you can use typescript to avoid all the surprises and headache that comes with writing vanilla javascript. You can use this project to practice and learn more about typescript