Quick Setup project to TypeScript TDD Kata

Let’s get started.

Assumption is that TypeScript is already installed, if not run the following:

$ npm install -G tsc

1. create a project

$ mkdir kata-project

$ cd kata-project

$ npm init -y

This will create the project directory and a basic package.json file

2. install Jest

$ npm install -D jest ts-jest @types/jest

We installed Jest as dev dependencies and also ts-jest, which is a Jest transformer so we could write Jest tests in TypeScript. And @types/jest which is the TypeScript definitions for Jest.

3. configure ts-jest

$ npx ts-jest config:init

The above will create a basic jest.config.js file required for ts-jest to work properly.

You could also create it manually and the jest.config.js should contain:

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

4. create tsconfig.json with best practice defaults

$ npx tsc --init

The above command is the easiest to setup tsconfig.json. It will enable the recommended configs such as strict: true

You can enable/disable configs as you see fit.

The generated tsconfig.json looks like this:

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig to read more about this file */

    /* Projects */
    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */

    /* Language and Environment */
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    ...

5. configure ESLint

Over the year, ESLint has evolved from nice to have to become a necessity.

It provides mechanism for developer working in teams to work on an agreed standard so developers can easily work on code written by other developers (i.e. how many spaces to indent).

It also helps to enforce best practices (i.e. prefer const in place of let)

$ npm init @eslint/config

This will take you through a series of questions/options and will also install a few dependencies required for it to work well.

The output of running the above will look like this:

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · Yes
✔ Where does your code run? · node
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard-with-typescript
✔ What format do you want your config file to be in? · JSON
Checking peerDependencies of eslint-config-standard-with-typescript@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-config-standard-with-typescript@latest @typescript-eslint/eslint-plugin@^6.4.0 eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0  eslint-plugin-promise@^6.0.0 typescript@*
✔ Would you like to install them now? · Yes
✔ Which package manager do you want to use? · npm
Installing eslint-config-standard-with-typescript@latest, @typescript-eslint/eslint-plugin@^6.4.0, eslint@^8.0.1, eslint-plugin-import@^2.25.2, eslint-plugin-n@^15.0.0 || ^16.0.0 , eslint-plugin-promise@^6.0.0, typescript@*
npm WARN deprecated eslint-config-standard-with-typescript@43.0.1: Please use eslint-config-love, instead.

added 203 packages, and audited 496 packages in 15s

6. Try it out

a. Once all set-up, you can open Webstorm.

b. Ensure that these 2 checkboxes are ticked:

• Recompile on changes

• Automatic ESLint configuration

c. Create 2 directories on the root: src and tests

d. In src, create a file math.ts and add the declaration of the function. For this blog post we will just create a simple multiply function

export function multiply (a: number, b: number): number {
  throw new Error('Not Implemented')
}

e. In tests, create a file kata.test.ts and add the test

import { multiply } from '../src/math'

describe('Kata tests', function () {
  it('should multiply 2 numbers', async () => {
    // assemble

    // action
    const result = multiply(2, 5)

    // assert
    expect(result).toBe(10)
  })
})

Run the test and we should get the not implemented exception

Error: Not Implemented

    at multiply (/Users/erfanjap/workspace/learning/ts/ex10/src/math.js:6:11)
    at /Users/erfanjap/workspace/learning/ts/ex10/tests/math.test.ts:8:20

Notice the stack trace, we can see that the TypeScript test and code are automatically transpiled and executed

f. Finally, fix the code and run the test again

export function multiply (a: number, b: number): number {
  return a * b
}

Run the test again and this time the test should be green

And that is the conclusion of this blog post.