Setting up TypeScript from scratch
1 Typescript setup
- Run:
npm install typescript -D npm install source-map-support mkdir ts
- Put these files in your project root:
- 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
- Open your project in PhpStorm.
- Enable: Languages & Frameworks > Typescript > Recompile on changes: tick
2 Eslint setup
- Run:
npm install @typescript-eslint/eslint-plugin -D npm install @typescript-eslint/parser -D npm install eslint -D
- Put this file in your project root:
- Open your project in PhpStorm.
- Enable: Languages & Frameworks > JavaScript > Code Quality Tools > ESLint > [_Automatic ESLint configuration: tick
3 Use .ts
paths in error messages
npm install source-map-support
- 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
- Download: _Apps_default___use_thisone.xml
- Open your project in PhpStorm.
- Editor > Inspections > Settings cog > Import profile... >
_Apps_default___use_this_one_.xml
5 Setup PhpStorm code style (optional)
- Download: USE_THIS.xml
- Open your project in PhpStorm.
- Editor > Code Style > Settings cog > Import profile... >
USE_THIS.xml