/ PROGRAMMING, TYPESCRIPT, JEST, TECH, VSCODE

Setting up a dev environment to learn TypeScript

We will take a quick look at how to set up a project using TypeScript and Jest. By adding Jest to the project from the beginning this should encourage test driven development – or at least that developers have minimal effort

Init Project

npm init -y
npm i -D typescript ts-node
tsc --init

npm i -D jest ts-jest @types/jest
npx ts-jest config:init

mkdir src
mkdir dist

Configure Project

tsconfig.json

For TypeScript you need to adjust a couple of variables like:

  • outDir = “./dist”
  • rootDir = “./src”
  • (optional) target: “es2017” (if you are not supporting IE11)
  • (optional) module: “esnext”
{
  "compilerOptions": {
    "target": "es2017",
    "module": "esnext",
    // ...
    "outDir": "./dist",  
    "rootDir": "./src",
    // ...
  }
}

package.json

the only thing that remains is to add a couple of scripts to make development easier.

{
    "main": "./dist/index.js",
    "scripts": {
        "start": "ts-node ./src/index.ts",
        "test": "jest --watch",
        "build": "tsc"
    },
}

Init git

It is always the best practice to use version control for coding projects – even if you are the only developer. Running Jest in “–watch” mode requires that the code is stored in a git repository.

.gitignore

You need to tell git to exclude the node_modules folder. (This is done as the dependencies can be restored by running npm install). Create a file called “.gitignore” and add following line:

/node_modules

First commit

Now you can create your first commit, it will exclude the node_modules folder

git init
git add .
git commit -m "Initial Commit"

Start Development

Demo Files

Create the files:

  • ./src/index.ts
  • ./src/index.test.ts

index.ts

export const greeting = () => {
  return "Hello World!"
}

index.test.ts

import { greeting} from "./index";

it('greets you', () => {
  expect(greeting()).toBe("Hello World!");
})

Run Demo / Start Development

Now you can start development by running npm test This will start jest and run your tests as soon as you change your code.