Setting up TypeScript from scratch

1     Typescript setup

1. Run:

   npm install typescript -D
   npm install source-map-support
   mkdir ts

2. Put these files in your project root:
   • tsconfig_base.json
   • tsconfig.json
3. Now run: cd ./ts; node ../node_modules/typescript/bin/tsc
   • .js files will be generated under: ../generated/js
   • If you get errors like Cannot find global type 'Array' then, run: npm install @types/node
4. Open your project in PhpStorm.
5. Enable: Languages & Frameworks > Typescript > Recompile on changes: tick

2     Eslint setup

1. Run:

   npm install @typescript-eslint/eslint-plugin -D
   npm install @typescript-eslint/parser -D
   npm install eslint -D

2. Put this file in your project root:
   • .eslintrc.js
3. Open your project in PhpStorm.
4. Enable: Languages & Frameworks > JavaScript > Code Quality Tools > ESLint > [_Automatic ESLint configuration: tick

3     Use .ts paths in error messages

1. npm install source-map-support
2. Add this to the top of your main script:

   require(`source-map-support`).install(); // This is makes error messages use the .ts file path instead. Very handy.

4     Setup PhpStorm inspections

1. Download: _Apps_default___use_thisone.xml
2. Open your project in PhpStorm.
3. Editor > Inspections > Settings cog > Import profile... > _Apps_default___use_this_one_.xml

5     Setup PhpStorm code style (optional)

1. Download: USE_THIS.xml
2. Open your project in PhpStorm.
3. Editor > Code Style > Settings cog > Import profile... > USE_THIS.xml