Setup a starter project with Typescript and Unit Tests with Jest

If you've done any work with Angular 2+ or used the Angular CLI tool, you've probably heard of typescript before.

In this tutorial, you will learn how to create a typescript starter project without using third-party tools or frameworks that generate your folder structure.

You will also see how compiling typescript to JavaScript works.

Finally, I guess you are interested in the Software Craftsmanship movement. In that case, you will agree that having a utility project to test newly acquired concepts is more than helpful.

Prerequisite

• Have the latest version of Node installed on your machine. To achieve this, you can install it via this guide.
• Be familiar with JavaScript and/or Typescript.
• Be familiar with npm. If it's not, you can learn more about npm here.

Launching the project

To begin, you need to create a folder for your project:

mkdir starter-code

Now you will move around the project:

cd starter-code

Then install Typescript:

npm i typescript --save-dev

The --save-dev option is important because it saves typescript as a development dependency, which means that typescript is absolutely mandatory to develop in your project.

Once typescript is installed, you can initialize your project with this command:

npx tsc --init

• npx is a tool in npm that allows you to launch executable packages without having to install them globally.
• tsc is a command used here because it is integrated with the Typescript compiler
• --init initializes the project by creating a tsconfig.json file. This file will allow you to configure how tsc and Typescript will interact.

If you open the ts.config.json file in the IDE of your choice, you will see the following default configuration:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",     
    "esModuleInterop": true,   
    "forceConsistentCasingInFileNames": true, 
    "strict": true,
    "skipLibCheck": true 
  }
}

Several default values should be commented out, but you should be able to customize your typescript configuration by adding the following options:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",     
    "esModuleInterop": true,   
    "forceConsistentCasingInFileNames": true, 
    "strict": true,
    "skipLibCheck": true,
    "outDir": "dist",
    "sourceMap": true
  }
}

By setting dist as the value in the outdir key, this will create a dist folder. When you run the npx tsc command to compile the code into typescript, the compiled JavaScript files will be placed in the dist folder.

Focus on sourcemap file

The sourcemap will be created when you compile your Typescript files. It's a file that links the newly compiled JavaScript code to the Typescript source code you wrote. If there are ever errors in your code or if you ever need to make it evolve.

It is better to modify the Typescript source code rather than the compiled JavaScript code.

So that's what the sourcemap is actually for. Now that the Typescript is installed and configured through our tsconfig.json, you can code the application in Typescript and compile it.

Project Compilation

In your project folder, you will create a folder named src and inside this folder you will create a file index.ts.
Open your index.ts file in the IDE of your choice, and enter the following code:

const java: string = 'JAVA';
const javascript: string = 'JAVASCRIPT';

function getFavouriteLanguage(answer: string): string {
  switch (answer.toUpperCase()) {
    case java.toString():
      return `Your favourite language is ${java}`;
    case javascript.toString():
      return `Your favourite language is ${javascript}`;
    default:
      return 'wrong language...';
  }
}

module.exports = getFavouriteLanguage;

Now you can run the following command in rout project root directory to compile your typescript code:

> tsc

You can see that in the dist/src folder there is an index.js file and an index.js.map file. When you open the index.js file, you can see this piece of code, which is the typescript code translated into JavaScript.

"use strict";
const java = 'JAVA';
const javascript = 'JAVASCRIPT';
function getFavouriteLanguage(answer) {
    switch (answer.toUpperCase()) {
        case java.toString():
            return `Your favourite language is ${java}`;
        case javascript.toString():
            return `Your favourite language is ${javascript}`;
        default:
            return 'wrong language...';
    }
}
module.exports = getFavouriteLanguage;
//# sourceMappingURL=index.js.map

Configure the units tests

Install yarn

To install the dependencies needed to run our unit tests, you must first install yarn.

npm install --global yarn

Once yarn has been installed, we now need to install jest, which is our JavaScript testing framework.

npm install --save-dev jest

Install @babel/preset-typescript

To be able to use jest with typescript, you have to go through babel, so you have to install its dependencies:

yarn add --dev babel-jest @babel/core @babel/preset-typescript

Then create a babel.config.js file and fill in @babel/preset-typescript in the list of its presets:

Install @types/jest

And finally, to get the full power of typescript typing when writing tests, you will have to install @type/jest

yarn add --dev @types/jest

To set up unit tests on your project, you will create a directory for the tests:

mkdir tests

Then move to the newly created folder and create the test file:

touch index.spec.ts

Open the index.spec.ts file with the IDE of your choice, and enter the following code:

const getLanguage = require('../src/index');

describe('TEST JEST TYPESCRIPT', () => {
  test('should returns JAVA for answer = java', () => {
    expect(getLanguage('java'))
      .toBe('Your favourite language is JAVA');
  });

  test('should returns JAVASCRIPT for answer = javascript', () => {
    expect(getLanguage('javascript'))
      .toBe('Your favourite language is JAVASCRIPT');
  });

  test('should returns Wrong language for answer different to java | javascript', () => {
    expect(getLanguage('python'))
      .toBe('wrong language...');
  });
});

To test that your project works well with unit tests, simply run the command in a terminal:

jest tests/index.spec.ts

Congratulations, your project has been set up.

You now have a complete and ready-to-use starter project for all your typescript projects. I always prefer a starter project for each language.

I want to test concepts I'm learning or experimenting with in clean code or architecture, or even write algorithms.

You can grab a copy of the code of this article here.