The Complete TypeScript Setup - From Zero to Hero

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, so make sure to check that out for a live walkthrough.

Table of Contents

1. Initializing a New Project
2. Installing and Building with TypeScript
3. Configuring tsconfig.json
4. Running the App with Nodemon and ts-node
5. Setting up ESLint for TypeScript
6. Integrating Jest for Testing
7. Debugging in VSCode

Initializing a New Project

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

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:

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:

npm install typescript --save-dev

To build the TypeScript code, use:

tsc

Configuring tsconfig.json

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

tsc --init

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

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

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

{
  ...
  "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:

{
  ...,
  "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:

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:

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

Add the following script to your package.json:

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

Now, you can run your app with:

npm run dev

Setting up ESLint for TypeScript

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

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

Create a .eslintrc.js configuration file and add:

/* 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:

{
  ...,
  "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:

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

Create a jest configuration by running the following command:

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:

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:

/* 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:

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

Now you can run your tests with:

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:

{
  "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:

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 for a live demo. And the source code on GitHub. If you found this guide useful, consider subscribing to our YouTube channel for more content.

Note: This article was originally published on codewithahsan.dev