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选项卡，此时会出现“不兼容的覆盖”消息。但理想情况下，我想要一些方法来查看我在编辑后在整个项目中引入的所有错误。是否有一些观点可以实现这一目标？

Answer 1

您正在使用外部filewatcher吗？

我发现typescript的webstorm filewatcher有点儿错误。结果，我禁用了filewatcher并简单地在其中使用了grunt-contrib-watch。它工作得很好，如果你需要它可以提供更多的灵活性。

您可以在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是一个好主意，但这当然没有必要。如果您对此有任何疑问，请与我们联系。

Answer 2

仍然是一个手动过程，但最好猜测你需要打开哪些文件。

选择项目根文件夹，按Ctrl + Shift + A - ＆gt;按Ctrl + Shift + A启用非菜单操作 - ＆gt;输入“运行文件” - ＆gt;选择运行文件监视器.... 这是另一个问题答案的一部分。（https://stackoverflow.com/a/26779818/1757491）

Answer 3

WebStorm现在支持tsconfig。您需要设置tsconfig.json文件，然后转到文件/设置/语言＆amp; Frameworks / TypeScript并检查＆＃39;使用tsconfig.json＆＃39;。一旦我这样做，我就能够（最终）在TypeScript编译器窗口中看到类型错误。错误不会像在Visual Studio中那样立即出现。但对我来说，它们会在15到30秒内出现。另外，另一种快速的方法是在操作系统或WebStorm中打开终端窗口并输入＆＃39; tsc --watch＆＃39;。这告诉TypeScript编译器立即编译所有内容并向您显示任何错误。＆＃39; - 观看＆＃39;表示tsc（TypeScript编译器）将继续监视所有.ts文件并在终端窗口中显示任何错误。

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

3 个答案: