TypeScript - project setup

Hi, recently I discovered TypeScript. It’s very important for me to have types protection since it removes a lot of common errors/bugs from the project written in dynamically typed language.

Today I want to describe how to setup a basic TypeScript project.

Let’s start.

First of all you need to install TypeScript.

npm install -g typescript

You need NPM of course but I don’t think it’s an issue for you. Next step is this command:

tsc --init

This command will create **tsconfig.json** file for you. This file is basically configuration for your TypeScript compiler and kind of indicator where your project’s root is.

Here is the content:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": false
  },
  "exclude": [
    "node_modules"
  ]
}

And, let’s forget about it for a while.

Project structure

This one is pretty personal and I just want to show you how I do it.

├── out
├── src
│   ├── classes
│   │   ├── another_namespace_folder
│   │   ├── reports
│   │   │   ├── CoolReport.ts
│   │   │   └── NotCoolReport.ts
│   │   └── users
│   │       ├── Admin.ts
│   │       └── User.ts
│   ├── interfaces
│   │   └── users
│   │       └── BillableInterface.ts
│   └── main.js
└── tsconfig.json

**out** - this directory is for output javascript file(s)

**src** - this directory contains all the TypeScript files

If you need an **assets** directory you can create it in root of project also.

**main.js** is absolutely not important here. You can give any name to such file or you can even remove it. I just use it as starting point of the project.

Ok, let’s back to our tsconfig.json Let’s update it to look like this.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": false,
    "outFile": "./out/include.js",
    "sourceRoot": "./src/",
    "rootDir": "./src/",
    "removeComments": true
  },
  "exclude": [
    "node_modules"
  ]
}

**outFile** - path to the JavaScript file that will be generated after compilation of *.ts files

**sourceRoot** - directory that contains all *.ts files. Compiler will take all the files from here and compile them

**removeComments** - we no need comments in generated JS file

So, now we ask TSC to search all ***.ts** files inside **src** directory and compile all of them into one include.js file.

At the moment if you run TSC command in the root of project

tsc

it will check the **tsconfig.json** and will compile all ***.ts** files inside src directory.

After this you can see **include.js** file inside your **out** directory. Awesome!

Checkout

tsconfig.json documentation

for more info.

Why I actually prefer TypeScript over any other supersets of JS

Here is some points:

Type secure

As I said at top of this post it's very important for me since I think it reduce amount of bugs that produced by dynamically typed langauges. Honestly it is not a language's fault but developer's one. But anyway dynamicly typed languages are encourage this. I usually write in PHP and it also have type hints but TypeScript different for the better since it is really compileable and all miss-types can be found when at the same time PHP's type issues will be found only when bad code will be executed

Looks good in OOP terms

Don't get me wrong, JavaScript's prototype-based system is pretty interesting but in daily work it's hard to switch from usual OOP way to JS one, at least for me. I don't think it is an issue for people that use Node.JS for backends and JS for front. But it's not about me. I like TypeScript because it looks like usual OOP langauge with constructors, public/private/protected methods and usual inheritance and interfaces.

You can use it as usual Javascript.

Since TypeScript is superset of JS it means we can actually write JS with no issues. It's awesome if you use third-party lib or testign framework that was not planned to use for TypeScript.

types types types

YES! Again. I really love it! :D

-- Response ended

-- Page fetched on Sun May 12 07:51:41 2024