compilation - 获取 WebStorm 中依赖的 TypeScript 文件的编译错误

Question

我想知道是否有办法让 WebStorm 在编辑后向我显示依赖 TypeScript 文件的编译错误。例如，假设我有如下 Class1.ts:

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

export = Class1;

还有Class2.ts:

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

class Class2 extends Class1 {

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

现在，假设我编辑 Class1.ts 并更改 foo 的参数类型:

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

export = Class1;

当我执行编辑并保存时，我没有看到任何新错误出现。如果我将焦点切换到 Class2.ts 选项卡，此时会出现“不兼容的覆盖”消息。但理想情况下，我想要某种方式来查看我在进行编辑后在整个项目中引入的所有错误。我可以启用一些 View 来完成此操作吗？

Answer 1

使用外部文件观察器是否适合您？

我发现 typescript 的 webstorm filewatcher 有点问题。结果，我禁用了 filewatcher 并简单地在它的位置使用 grunt-contrib-watch。它工作得很好，并在您需要时提供更多的灵 active 。

你可以在你的 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']);   
};

然后简单地运行 grunt 将执行 watch 命令，您可以消除 webstorm typescript filewatcher。这将为您提供在保存时寻找的构建错误。

*注意:我将 tslint 留在了 gruntfile 中，因为定期对您的文件运行 tslint 是个好主意，但这当然不是必需的。如果您对此有任何疑问，请告诉我。