Setting up Typescript + ESLint + Jest Project

A lot of node projects have a setup that usually includes Typescript for static type checking, eslint for static code analysis, and Jest as a test runner. In this article, we will go through some advanced configurations for these three and how one can be leveraged from the other. So let's get started:

Step 1: Setup a basic node project

Let’s start by creating a simple node project.

mkdir ts-eslint-jest-setup
yarn init --yes

Once the above steps are done, the `package.json` in the project will look something similar to:

Step 2: Install the required dependencies

Let's start adding the most basic dependencies we need for our setup

yarn add -D typescript eslint jest

Once installed, add the basic script tasks in package.json to execute the commands.

Step 3: Set up Typescript

Run the command to initialize the typescript in the project.

yarn tsc --init

By default, the typescript compiler adds the configuration file tsconfig.json in the project root directory. we need to change a few settings in the file for our setup to work as expected.

• target: This property is the language level we wish to support in the project. It means what are we compiling out to? Changing this to ES2018 would mean that the tsc output will be at ECMA 2018 level.
• outDir: By default, the typescript compiler will output in the src folder itself. But we want the output to get generated into a separate folder altogether so that if we need to remove the output, we can easily do it by rm -rf dist changing the outDir option to "outDir": "dist" will achieve that for us. With this src and dist will be two separate folders.
• rootDir: changing outDir options will help us to create a separate folder, but it will still have a src folder inside it. We want the dist folder to have the output files directly inside the dist folder instead of inside the src. Changing "rootDir": "src" will achieve that for us.
• include: add "include": ["src"]outside the compiler options to tell the compiler to include all files inside the src folder.
• declaration: set "declaration": true to generate the type information d.ts files.
• types: By default, anything found in node_modules/@types is available for auto import across the app. set "types": [] so that not all global scoped types are available in the src folder. e.g. you don’t want jest types to be available in src files.

After setting up the above options, tsconfig.json file will look similar to:

Now, this is the time to add a code in the src folder and test the output.

Create a index.jsfile and add a basic function to add two numbers.

Now, if you run npm build, a dist the folder will be generated with index.tsand index.d.tsfiles.

At last, if you are building a library, set "main": "dist/index.ts" and "types: index.d.ts in the package.json files to tell the consumer what is the starting point of your library.

Step 4: Set up ESLint

ESLint is used for static code analysis. It has some great functionality out of the box but if your project support react, typescript, or vue, you would need to add more plugins.

To initialize the eslint, run the following code:

yarn eslint --init

it will ask a bunch of questions, and you can setup according to your project needs. Since we are setting up ESLint with typescript, make sure the option is enabled while initializing. Once the initialization is done, it will add a few typescript related ESLint plugins,

@typescript-eslint/eslint-plugin@latest
@typescript-eslint/parser@latest

the .eslintrc.json will look similar to:

ESLint recommended is a very basic set of typescript rules added by default. @typescript-eslint/recommended adds rules specific to typescript that are very cheap to evaluate. You can opt-in additional typescript checks by adding @typescript-eslint/recommended-requiring-type-checkingwhich require more type info and are costly to evaluate also. We can add rules specific to our project needs inside the rules object.

If we try to run yarn lintnow, it will throw an error:

The reason for this error is that we are using typescript specific rules in eslint but have not told the ESLint compiler where to look at the configuration for it. So we need to add a typescript config file for ESLint also. You can add typescript.eslintrc.json file with the following options:

and then tell the ESLint compiler to use this file in parserOptions Once all of the above steps are done. the .eslintrc.json file will look similar to:

By default, I have enabled some rules to check now. Also, make sure you add the right path for tests in the overrides for ESLint to work for tests.

We can try testing lint by executing npm run lint now.

Step 5: Setting up Jest

Let's start this step but installing a few dependencies to make jest work with typescript:

yarn add -D jest @types/jest @babel/preset-env @babel/preset-typescript

Now, when we try to add a test for our source code, the IDE might show you the error for the jest functions.

ESLint with typescript enabled does not understand where to find these method types. So our tests also need their .tsconfig file. You can simply create one in the test folder as:

references allow us to create two disconnected sub-projects in the same repo. Make sure to add "noEmit": true so that this sub-project does not emit any output. Also to use it, you need to set "composite": true in the base tsconfig file.

One last thing left is to create a .babelrc file for jest to understand how to transform the test code and consume it.

npm run testshould now execute all the tests inside the test folder.

In the end, you can use the GitHub boilerplate project to quickly start a new project with the above configuration.