The Complete TypeScript Setup - From Zero to Hero
Tags: webdev, typescript, javascript, node
Published: 2023-09-03 09:43:48


Welcome, developers! If you're venturing into the world of TypeScript or looking to optimize your development process, this guide is your golden ticket. From project initialization to running tests and debugging, we've got it all covered.

This article is a companion piece to our [YouTube tutorial](https://www.youtube.com/watch?v=0ICXyv2puNU), so make sure to check that out for a live walkthrough.

## Table of Contents

1. [Initializing a New Project](#initializing-a-new-project)
2. [Installing and Building with TypeScript](#installing-and-building-with-typescript)
3. [Configuring tsconfig.json](#configuring-tsconfigjson)
4. [Running the App with Nodemon and ts-node](#running-the-app-with-nodemon-and-ts-node)
5. [Setting up ESLint for TypeScript](#setting-up-eslint-for-typescript)
6. [Integrating Jest for Testing](#integrating-jest-for-testing)
7. [Debugging in VSCode](#debugging-in-vscode)

## Initializing a New Project

Start by creating a new project. Open your terminal and run:

```bash
npm init
```

You will be asked with a few questions. This command initializes a new Node.js project and creates a `package.json` file for you.

Now create a folder named `src` and inside, create a file `index.ts` inside the `src` folder with the following code:

```ts
const message: string = 'Hello world by Ahsan!'
console.log(message)
```

Your project structure so far should look as follows:

```
- package.json
- src
-- index.ts
```

## Installing and Building with TypeScript

Next, let's install TypeScript. Run the following command:

```bash
npm install typescript --save-dev
```

To build the TypeScript code, use:

```bash
tsc
```

## Configuring tsconfig.json

To customize your TypeScript settings, you'll need a `tsconfig.json` file. You can generate one using:

```bash
tsc --init
```

Open the `tsconfig.json` file and set it up based on your project needs. For example:

```json
{
  ...
  "compilerOptions": {
    "target": "ESNext",
    "module": "commonjs",
    ...
  }
}
```

For our use case, we set update the following properties:

```json
{
  ...
  "compilerOptions": {
    ...
    "target": "ESNext",
    ...
  },
  "rootDir": "./src",
  "outDir": "./dist",
  ...
}
```

We will update our `package.json` file to create a script that builds our application. Update the `package.json` file as follows:

```json
{
  ...,
  "scripts": {
    ...,
    "build": "tsc"
  }
}
```

## Running the App with Nodemon and ts-node

To run your app without explicitly building it each time, use `nodemon` and `ts-node`. Install them using:

```bash
npm install nodemon ts-node --save-dev
```

Create a file in the project's root folder and name it `nodemon.json`. Add the following code to it:

```json
{
  "execMap": {
    "ts": "ts-node"
  }
}
```

Add the following script to your `package.json`:

```json
"scripts": {
  "dev": "nodemon src/index.ts"
}
```

Now, you can run your app with:

```bash
npm run dev
```

## Setting up ESLint for TypeScript

Linting is essential for maintaining code quality. Install ESLint and its TypeScript parser:

```bash
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
```

Create a `.eslintrc.js` configuration file and add:

```js
/* eslint-env node */
module.exports = {
  env: {
    node: true,
  },
  extends: ['plugin:@typescript-eslint/recommended', 'eslint:recommended'],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  root: true,
}
```

Add a new script in the `package.json` for linting as follows:

```json
{
  ...,
  "scripts": {
    ...,
    "lint": "eslint ./src/**/.ts"
  }
}
```

> Note: You may want to ignore the `dist` folder because your editor's ESLint plugin may still be highligthing errors from it. For that, create an `.eslintignore` file and add the entry `dist` to it.

## Integrating Jest for Testing

Jest is fantastic for testing TypeScript projects. Install it by running:

```bash
npm install jest ts-jest @types/jest --save-dev
```

Create a jest configuration by running the following command:

```bash
npx ts-jest config:init
```

The above command allows Jest to work with TypeScript.

Create a file named `index.test.ts` inside the `src` folder. Add the following code to it:

```ts
import { getMessage } from './index'

describe('getMessage()', () => {
  it('should return the correct message when called', () => {
    expect(getMessage()).toBe('Hello world by Ahsan!')
  })

  it('should be super smart', () => {
    expect(true).toBe(true)
  })
})
```

To make eslint happy for your test files, you need to update the `.eslintrc.js` file as follows:

```js
/* eslint-env node */
module.exports = {
  env: {
    node: true,
    jest: true, // <-- Add this
  },
  extends: ['plugin:@typescript-eslint/recommended', 'eslint:recommended'],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  root: true,
}
```

Update the `test` script in the `package.json` file as follows:

```json
{
  ...,
  "scripts": {
    ...,
    "test": "jest",
    "test:watch": "jest --watch"
  }
}
```

Now you can run your tests with:

```bash
npm run test
# OR
npm run test:watch
```

## Debugging in VSCode

Debugging TypeScript in VSCode is straightforward. Just hit `F5` after configuring your `launch.json` appropriately. You can go in the debugging panel to edit the `launch.json`. Or create a new folder named `.vscode` in the project. And inside the `.vscode` folder, create a `launch.json` file with the following content:

```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "dev",
      "request": "launch",
      "runtimeArgs": ["run", "dev"],
      "runtimeExecutable": "npm",
      "skipFiles": ["<node_internals>/**"],
      "type": "node"
    }
  ]
}
```

Once you're done, your debugging panel should look as follows:

![VSCode Panel](https://www.codewithahsan.dev/_next/image?url=%2Fstatic%2Fimages%2Fts-zero-hero%2Fvscode-debugging.png&w=1200&q=75)

## Conclusion

There you have it—a complete guide to setting up, testing, and debugging a TypeScript project. Whether you're new to TypeScript or a seasoned developer looking to refine your skills, this guide aims to serve all.

**If you are particularly interested in Angular, integrating TypeScript should be second nature. Angular and TypeScript are like peanut butter and jelly—a match made in heaven! 🅰️**

Don't forget to check out the [companion YouTube video](https://www.youtube.com/watch?v=0ICXyv2puNU) for a live demo. And the [source code on GitHub](https://github.com/code-with-ahsan/ts-stars.git). If you found this guide useful, consider subscribing to our [YouTube channel](https://www.youtube.com/@CodeWithAhsan) for more content.

> Note: This article was originally published on [codewithahsan.dev](https://www.codewithahsan.dev/blog/the-complete-typescript-setup-from-zero-to-hero)