CODEWITHSUNDEEP
compilationcompiler-errorstypescriptwebstorm
msridhar
msridhar

Reputation: 2934

Get compile errors for dependent TypeScript files in WebStorm

I'm wondering if there is a way to make WebStorm show me compilation errors in dependent TypeScript files after an edit. As an example, say I have Class1.ts as follows:

class Class1 {
    foo(n: number): number { return 3; }
}

export = Class1;

And also Class2.ts:

import Class1 = require('./Class1');

class Class2 extends Class1 {

    foo(n: number): number { return 4; }
}

Now, say I edit Class1.ts and change the parameter type of foo:

class Class1 {
    foo(n: string): number { return 3; }
}

export = Class1;

When I perform the edit and save, I don't see any new errors appear. If I switch focus to the Class2.ts tab, at that point an "Incompatible override" message appears. But ideally, I'd like some way to see all the errors I introduced in the whole project after making an edit. Is there some view I can enable to accomplish this?

Upvotes: 4

Views: 1558

Answers (3)

A2MetalCore
A2MetalCore

Reputation: 1639

WebStorm now supports tsconfig. You'll need to setup the tsconfig.json file and then go to File/Settings/Languages & Frameworks/TypeScript and check the 'Use tsconfig.json'. Once I did this I was able to (eventually) see type errors in the TypeScript Compiler window. The errors do not appear immediately like in Visual Studio. But for me they appear within 15 to 30 seconds. Also, another quick 'n dirty approach is to open a terminal window in the os or in WebStorm and type 'tsc --watch'. This tells the TypeScript compiler to compile everything immediately and shows you any errors. The '--watch' means that tsc (TypeScript compiler) will continue to monitor all .ts files and show any errors in the terminal window.

Upvotes: 0

Travis
Travis

Reputation: 2135

Still a manual process but better then guessing which files you need to open.

Select a project root folder, hit Ctrl+Shift+A -> Ctrl+Shift+A to enable non-menu actions -> type "run file " -> choose Run File Watchers.... This was part of an answer to another question.(https://stackoverflow.com/a/26779818/1757491)

Upvotes: 1

JMac
JMac

Reputation: 1756

Is using an external filewatcher an option for you?

I found the webstorm filewatcher for typescript to be a little buggy. As a result, I disabled the filewatcher and simpyly use grunt-contrib-watch in it's place. It works great, and provides a little more flexibility if you need it.

You could do something like this in your gruntfile.js:

module.exports = function (grunt) {
    var files = [
            'app/**/*.ts'
        ];

    grunt.initConfig({      
        tslint: {
            options: {
                configuration: grunt.file.readJSON("tslint.json")
            },
            files: {
                src: files
            }
        },
        typescript: {
            base: {
                src: files,
                options: {
                    module: 'commonjs',
                    target: 'es5'
                }
            },
            build: {
                src: ['./app.ts'],
                options: {
                    module: 'commonjs',
                    target: 'es5'
                }
            }
        },
        watch: {
            ts: {
                files: ['app/**/*.ts', 'shared/**/*.ts'],
                tasks: ['typescript']
            }
        }
    });

    // Load Tasks
    grunt.loadNpmTasks('grunt-tslint');
    grunt.loadNpmTasks('grunt-typescript');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // Register Tasks
    grunt.registerTask('default', ['watch']);   
};

Then simply running grunt will perform the watch command, and you can eliminate the webstorm typescript filewatcher. This will give you build errors you are looking for on save.

*Note: I left tslint in the gruntfile as it's a good idea to run tslint on your files regularly, but it's certainly not necessary. Let me know if you have any questions about it.

Upvotes: 2

Related Questions