Typescipt environment for development


Based on video course [FrontendMasters] Production-Grade TypeScript


https://github.com/mike-north/professional-ts


Configured project:
https://github.com/mike-north/professional-ts-my-lib


$ mkdir -p ~/projects/dev/ts/my-new-ts-project && cd ~/projects/dev/ts/my-new-ts-project
$ npm init -y

$ npm install --save-dev typescript @types/node

// It is possible to generate default tsconfig.json
// $ ./node_modules/.bin/tsc --init


tsconfig.json


$ vi tsconfig.json
{
  "compilerOptions": {
    "composite": true,
    "strict": true,
    "module": "commonjs",
    "target": "es2018",
    "outDir": "dist",
    "rootDir": "src",
    "declaration": true,
    "sourceMap": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "stripInternal": true,
    "types": [],
    //"esModuleInterop": true,
    //"skipLibCheck": true
  },
  "include": ["src"]
}


tsc CLI Options
https://www.typescriptlang.org/docs/handbook/compiler-options.html


TSLINT is dead, we will use ESLINT

https://medium.com/palantir/tslint-in-2019-1a144c2317a9


Run

$ mkdir src

$ vi src/index.ts
console.log('Hello TypeScript!')
$ ./node_modules/.bin/tsc
$ node ./dist/index.js


ts-node

$ npm install --save-dev ts-node
$ ./node_modules/.bin/ts-node ./src/index.ts


Run, Build

$ vi package.json


package.json

***
"ts-node": "ts-node ./src/index.ts",
"build": "tsc",
***


$ npm run ts-node


ESlint for typescript


$ npm install --save-dev \
    [email protected] \
    @typescript-eslint/[email protected] \
    @typescript-eslint/[email protected]


// Generate config if needed
// $ ./node_modules/.bin/eslint --init



.eslintrc.json

$ vi .eslintrc.json


{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "project": "tsconfig.eslint.json"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
        "prefer-const": "error",
        "@typescript-eslint/no-unused-vars": "off",
        "@typescript-eslint/no-unused-params": "off"
    },
    "overrides": [{
        "files" : ["tests/**/*.ts"],
        "env": {"jest": true, "node": true}
    }]
}



tsconfig.eslint.json

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "types": ["jest"]
    },
    "include": ["src", "tests"]
}


package.json

  "lint": "eslint src server tests --ext .js,.ts,.jsx,.tsx",


$ npm lint


Jest

$ npm install --save-dev jest @types/jest \
    @babel/preset-env @babel/preset-typescript


$ mkdir tests


$ vi tests/intex.test.ts


$ vi tests/tsconfig.json
{
    "extends": "../tsconfig.json",
    "references": [{
        "name": "my-lib",
        "path": ".."
    }],
    "compilerOptions": {
        "types": ["test"],
        "rootDir": "..",
        "noEmit": true
    },
    "include" : ["."]
}


.babelrc

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


Webpack & TypeScript Setup

https://www.youtube.com/watch?v=sOUhEJeJ-kI