DEV Community

Cover image for The Complete TypeScript Setup - From Zero to Hero
Muhammad Ahsan Ayaz
Muhammad Ahsan Ayaz

Posted on

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


Enter fullscreen mode Exit fullscreen mode

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)


Enter fullscreen mode Exit fullscreen mode

Your project structure so far should look as follows:



- package.json
- src
-- index.ts


Enter fullscreen mode Exit fullscreen mode

Installing and Building with TypeScript

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



npm install typescript --save-dev


Enter fullscreen mode Exit fullscreen mode

To build the TypeScript code, use:



tsc


Enter fullscreen mode Exit fullscreen mode

Configuring tsconfig.json

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



tsc --init


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

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"
  }
}


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

Add the following script to your package.json:



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


Enter fullscreen mode Exit fullscreen mode

Now, you can run your app with:



npm run dev


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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,
}


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

Create a jest configuration by running the following command:



npx ts-jest config:init


Enter fullscreen mode Exit fullscreen mode

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)
  })
})


Enter fullscreen mode Exit fullscreen mode

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,
}


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

Now you can run your tests with:



npm run test
# OR
npm run test:watch


Enter fullscreen mode Exit fullscreen mode

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"
    }
  ]
}


Enter fullscreen mode Exit fullscreen mode

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

VSCode Panel

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

Top comments (0)