Prepare environment for development react.js with TypeScript applications


Prepare react project with typescript without CRA


Add TypeScript in React app

Based on course https://btholt.github.io/complete-intro-to-react-v6/eslint


$ npm init -y
$ npm install --save-dev \
  typescript \
  @types/react \
  @types/react-dom \
  @types/react-router-dom


$ npx tsc --init


"strict": true,
"lib": ["ESNext", "DOM"],
"jsx": "react-jsx",
"outDir": "./build",


$ npm uninstall @babel/eslint-parser


$ npm install -D [email protected] @typescript-eslint/[email protected] @typescript-eslint/[email protected]


package.json


"lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --quiet"


.eslintrc.json


// inside extends, above prettier rules
"plugin:@typescript-eslint/recommended",

// inside rules, generally a good rule but we're going to disable it for now
"@typescript-eslint/no-empty-function": 0

// inside plugins
"@typescript-eslint"

// replace parser
"parser": "@typescript-eslint/parser",

// add to settings array
"import/parsers": {
  "@typescript-eslint/parser": [".ts", ".tsx"]
},
"import/resolver": {
  "typescript": {
    "alwaysTryTypes": true
  }
}


// under plugin:@typescript-eslint/recommended
"plugin:@typescript-eslint/recommended-requiring-type-checking",


https://github.com/webmakaka/citr-v6-project/tree/master/typescript-1