# Typescript for JS developers: Setting up the environment on Node

Typescript is becoming more and more of a big deal. I wanted to learn it because people thought that it helps to prevent bugs and has so many features. And although it is to some extent, it doesn’t mean that it is easy to start within a real environment.


# Initialize the project
To quickly initialize the project just do:
```bash
npm init -y
```
Or if you want a more personalized project just do:
```bash
npm init
```
There it will ask you the following questions:
- Name of the package
- Version
- Description
- Entry point
- Test command
- A git repository
- Keywords
- The name of the author
- And the type of license

# Installing the dependencies
All the dependencies we’ll use are *typescript, nodemon, ts-node, tsconfig-paths* and *tsc-alias* as the main ones for development with typescript.
- **typescript**: is the language compiler.
- **nodemon**: it listens to any change on the project and restarts it to run that change.
- **ts-node**: It helps to listen to the changes on a typescript project.
- **tsconfig-paths**: typescript has a feature that allows custom path names to the folders to avoid nested relative paths such as `”../../../../../../someFile.ts”`.
- **tsc-alias**: it will interpret those custom paths to relative routes on the compilation for production.

One of the core features of Typescript is the **type check**. These are defined on the language, whether they are `strings`, `number` or `boolean` just to name a few, that makes sure that the code doesn’t use types of values that it wasn’t assigned to.

Considering the abode, we'll install an additional dependency for the code editor to understand the **intellisense** (code completion) part of the development in node to understand typescript as well: *@types/node*.
```bash
npm install typescript nodemon ts-node tsconfig-paths @types/node --save-dev
```
Remember that `--save-dev` (`-D` for short) it’s used for dependencies that are **only require in development**. As a side note, I recommend **add** `--save-exact` (`-E` for short) to `npm install` command, this will install the exact dependencies each time that the `package.json` file is used.
```bash
npm install typescript nodemon ts-node tsconfig-paths tsc-alias @types/node -ED
```
This is because, by default, npm install dependencies as “*from this version upwards*” and you can distinguish them with the `^` symbol at the beginning of each version.
```json
"devDependencies": {
    "@types/node": "^16.11.7",
    "nodemon": "^2.0.15",
    "ts-node": "^10.4.0",
    "tsc-alias": "^1.4.0",
    "tsconfig-paths": "^3.11.0",
    "typescript": "^4.4.4"
  }
```
As opposed to:
```json
"devDependencies": {
    "@types/node": "16.11.7",
    "nodemon": "2.0.15",
    "ts-node": "10.4.0",
    "tsc-alias": "1.4.0",
    "tsconfig-paths": "3.11.0",
    "typescript": "4.4.4"
  }
```

# Setting typescript
Typescript has a way to configure it to the project at hand. Use the following command to start from scratch:
```bash
npx tsc --init
```
This will generate a `tsconfig.json` file. This `json` has all the parameters that typescript accepts for configuration, in this case, most of them are *commented*. We’ll get there, for now, create a folder (or directory) at the root of the project called *src/*. For that you can simply use the following command:
```
mkdir src
```
Inside that folder create the main file, in this case, it will be called `index` with the `.ts` extension. You can use **Vim** or any other text editor to create it. In this case, I will use `touch`:
```bash
touch index.ts
```
In it, write a simple code like:
```ts
console.log("hi, this is working");
```
And in the `src` folder create another directory named `example` and `file.ts` in that same folder. You can simply use this to do those things in one line:
```bash
mkdir src/example && touch src/example/file.ts
```
## Configuring Typescript
Remember when I told you to use the `npx tsc --init` command to generate the tsconfig file? Well, add at the beginning of the `tsconfig.json` the following code or uncomment the parts where this are located and put:
```json
    "lib": ["ESNext"],
    "allowJs": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "baseUrl": "./",
    "paths": {
      "@example/*": ["src/example/*"]
    },
```
## Putting all the installed dependencies together
The simple version is this: Add the following code to the `package.json` replacing the current `scripts` section in the file:
```json
"scripts": {
    "start": "NODE_ENV=production node dist/index.js",
    "dev": "NODE_ENV=development nodemon src/index.ts --exec 'ts-node -r tsconfig-paths/register'",
    "build": "tsc --project tsconfig.json && tsc-alias -p tsconfig.json",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
```
Now run:
```bash
npm run build
```
You’ll see a `dist` folder right on the root of the project, that’s the compilation of the typescript code to javascript. Run:
```bash
npm start
```
And it should output something like this:
```bash
> ts_setup@1.0.0 start
> NODE_ENV=production node dist/index.js

hi, this is working
```
Finally, in the `index.ts` of the `src` folder, replace it with the following code:
```ts
import variable from "@example/file";

console.log("hi, this is working", variable);
```
The output should be something like this:
```bash
hi, this is working { x: 'there', y: 'hello', z: 'hello, there' }
```
You can even run `npm run build` and `npm start` for production.

You can find the source code on [in here](https://github.com/henryjperez/ts_setup--tutorial).

If you have any idea or want to point out some mistake that I made, write a comment below, I will read it and I'm sure that we will find a solution for it. I hope that you make fantastic sites with this information that I wrote.

Follow me on [Twitter](https://twitter.com/henryjperez), [LinkedIn](https://www.linkedin.com/in/henryjperez/), [Instagram](https://www.instagram.com/henryjperez/), [Github](https://github.com/henryjperez/), [Medium](https://medium.com/@henryjperez) (For more opinion based posts), and here on [Hashnode](https://hashnode.com/@henryjperez) and my [Hashnode blog](https://henryjperez.hashnode.dev/).

Have a nice day and until next time. Bye.