TypeScript

Prerequisite

Preinstalled software:

  • NodeJS, NPM, NPX (come with NPM)
  • Yarn (install globally via NPM)
  • Typescript (install via apt or npm globally)
  • VSCode Extension

New Project

Basic NodeJS with Airbnb Style Guide

# Create and use project folder
mkdir myproj && cd "$_"

# Init NodeJS project
npm init -y

# Init Typescript project
tsc --init

# Init ESLint (for using Typescript+Airbnb)
npx eslint --init

And answer the question as below:

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · commonjs
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JSON
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.21.2 @typescript-eslint/parser@latest
✔ Would you like to install them now with npm? · No / Yes
# Using yarn rather than npm
yarn &&  rm package-lock.json

# Install libs
yarn add -D \
typescript \
@types/node \
eslint \
prettier \
eslint-plugin-prettier \
eslint-config-prettier \
eslint-plugin-node \
eslint-config-node


# setup directory structure and necessary files
mkdir -p ./src \
&& touch ./src/index.ts

Add/Update the following lines into package.json

    "main": "dist/index.js",
    "types": "dist/index.d.ts",
    "files": [
        "build"
    ],
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "tsc",
        "clean": "rm -Rf dist/*",
        "start": "npm run build -- -w",
        "lint:js": "eslint '**/*.js' --ignore-pattern node_modules/",
        "lint:ts": "eslint '**/*.ts' --ignore-pattern node_modules/"
    },

Replace content in tsconfig.json

{
    "compilerOptions": {
        /* Basic Options */
        "target": "es6",
        "module": "commonjs",
        "declaration": true,
        "sourceMap": true,
        "outDir": "dist",
        "rootDir": "src",

        /* Strict Type-Checking Options */
        "strict": true,

        /* Additional Checks */
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,

        /* Module Resolution Options */
        "esModuleInterop": true,

        /* Source Map Options */

        /* Experimental Options */

        /* Advanced Options */
        "forceConsistentCasingInFileNames": true
    },
    "include": ["src"],
    "exclude": ["node_modules"]
}

Replace content in .eslintrc.json

{
    "env": {
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "extends": ["airbnb-base", "prettier"],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 6
    },
    "plugins": ["prettier", "@typescript-eslint"],
    "rules": {
        "indent": ["error", 4],
        "no-console": "off",
        "prettier/prettier": ["error"]
    }
}

Note: Using console.log to be an issue for production code. The best solution is to replace uses of console.log with a logging framework such as winston. For now, add the rules: "no-console": "off" to suppress the error.

.prettierrc file

{
    "tabWidth": 4,
    "useTabs": false,
    "singleQuote": true
}

Ref: https://zhuanlan.zhihu.com/p/115562955