How to hide .js and .map files in WebStorm while working on Angular2-typescript project

When using WebStorm without the built-in TypeScript Compiler (e.g. because you are running an Angular2 project with their npm start script which does the compiling already) and the other method doesn't work, you can configure your own filtered "Project" panel for WebStorm:

1. Select Project Files section of the side panel (Project section does not offer the needed config menu)
2. Click on the gear icon to configure
3. Select "Edit Scopes" from that menu
4. Add a new Scope
5. Set the Pattern to an appropriate filter to exclude the *.js and *.js.map files (I am using !file[my-root-folder]:app//*.js&&!file[my-root-folder]:app//*.js.map)
6. You can select this scope as a section of the side panel (instead of Project or Project Files) under the name you set the scope.

• Enable Typescript Compiler (Generated files are hidden when compiler generates them)

• Change your view to Project as suggested by Cibes

For me, using the Project panel, rather than the Project Files panel did the trick collapsing the *.js and .js.map files and hiding them beneath their corresponding *.ts file.

Note: This is only working when WebStorm's TypeScript Compiler is enabled. (see A_Singh's answer)