Typescript development environment

typescript, babel, and webpack

Javascript project setup

Assuming that you already have a vanilla Javascript project with babel and webpack, you should have below.

package.json

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "./node_modules/.bin/babel src --out-dir dist",
    "debug": "webpack --mode development --watch",
    "prod": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.10",
    "babel-loader": "^8.2.2"
  }
}

webpack.config.json

const path = require('path');
module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js']
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'app.bundle.js',
  },
  devServer: {
    contentBase: path.resolve(__dirname, './dist'),
  },
};

.babelrc

{
  "presets": [
    "@babel/preset-env"
  ]
}

Typescript setup

Now, let’s add Typescript environment on top of vanilla Javascript environment

Typescript configuration

npm install typescript --save-dev

after install typescript, you need to create a configuration file, tsconfig.json

{
    "include": ["src/**/*"],
    "exclude": [
        "**/.*/",
        "node_modules/**",
        "dist/**"
    ],
    "compilerOptions": {
        "outDir": "./dist/",
        "noImplicitAny": true,
        "module": "es6",
        "target": "es5",
        "allowJs": true
    }
}

webpack configuration change.

We can have two transpiler options when using webpack, babel-loader or ts-loader. I chose babel-loader because the existing project was set up with babel. For this, you just keep use: [‘babel-loader’], but change extensions only for input.

const path = require('path');
module.exports = {
  entry: path.resolve(__dirname, './src/index.ts'),
  module: {
    rules: [
      {
        test: /\.(ts)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.resolve(__dirname, './dist'),
  },
};

babel configuration

Since we want babel run the typescript compiler before transpiling, we add preset for typescript in .babelrc

First, we need to download the typescript babel plugin

npm install --save-dev @babel/preset-typescript

Then, we need to specify that we will perform typescript compiling before babel transpiling.

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

Now you have a decent Typescript development environment. You can stop here, but you can go further to use ESLint for linting.

Lint

Use ESLint, not TSLint since TSLint development is discontinued. ESLint supports both JS and TS linting.

install ESLint

$ npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

• eslint: The core ESLint library
• @typescript-eslint/parser: The parser that allows ESLint to lint TypeScript code
• @typescript-eslint/eslint-plugin: A plugin that contains TypeScript specific ESLint rules

add .eslintrc.js (you can optionally use .eslintrc with json foramt)

module.exports = {
    parser: "@typescript-eslint/parser",
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: "module"
    },
    extends: [
       "plugin:@typescript-eslint/recommended"
    ],
    rules: {

    }
};

Prettier

Adding prettier for code formatting.

$ npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

add prettier configuration file, .prettierrc.js

module.exports = {
  semi: true,
  trailingComma: "all",
  singleQuote: true,
  printWidth: 120,
  tabWidth: 4
};

Next, the .eslintrc.js file needs to be updated

module.exports = {
    parser: "@typescript-eslint/parser",
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: "module"
    },
    extends: [
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended" 
    ],
    rules: {
    }
};

Run ESLint from CLI

add below command to package.json

"scripts": {
    "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
    ...
}