在终端中构建 Angular 应用程序时，类型“false”上不存在属性“then”

Question

我正在使用 Angular（不是 AngularJS）应用程序，我使用ng serve命令通过终端运行。

一切都在构建，我可以通过浏览器在本地导航到 Angular 应用程序，但是在查看终端时，我注意到下面以红色显示了一些构建错误。

✔ Compiled successfully.
⠋ Generating browser application bundles...
    Error: src/app/components/posting/posting.component.ts:343:78 - error TS2339: Property 'then' does not exist on type 'false | Promise<unknown>'.
      Property 'then' does not exist on type 'false'.

    343 this.getVideoMediaData(file).then(a => this.validateFileAgainstConfig('instagram'));
                                                                                     ~~~~
✔ Browser application bundle generation complete.

我的getVideoMediaData()看起来像这样

    public getVideoMediaData(file) {
        if (typeof file === 'undefined') {
            return false;
        }

        return new Promise((resolve, reject) => {
            this.postingService.getMetadata(file.url).subscribe(
                data => {
                    resolve(data);
                    const errors = data.errors;
                    file.errors = [];
                    if (errors && errors.length > 0 ) {
                        errors.forEach(function(ffmpegError) {
                            file.errors.push({
                                'message': ffmpegError,
                                'validation': 'ffmpeg'
                            });
                        }, this);
                    }
                },
                errorResponse => {
                    reject(errorResponse);
                }
            );
        });
    }

导致此问题的原因以及解决此问题的最佳方法是什么，因此在运行 ng serve 后完成构建后，我不再在终端中收到此错误。

预期结果运行 ng serve 后，应用程序构建没有任何错误

实际结果运行 ng serve 后，应用程序构建并在终端中显示“Property 'then' does not exist on type 'false'”错误。

Answer 1

你的第一个 if 没有返回Promise 。 用Promise.resolve(false)包装false或使方法async ，你应该没问题。

边注：

您应该检查文件的truthyness ，因为它还考虑null除了来自undefined ：

async getVideoMediaData(file): Promise<boolean> {
        if (!file) return false;

        return new Promise((resolve, reject) => {
            this.postingService.getMetadata(file.url).subscribe(
                data => {
                    resolve(data);
                    const errors = data.errors;
                    file.errors = [];
                    if (errors && errors.length > 0 ) {
                        errors.forEach(function(ffmpegError) {
                            file.errors.push({
                                'message': ffmpegError,
                                'validation': 'ffmpeg'
                            });
                        }, this);
                    }
                },
                errorResponse => {
                    reject(errorResponse);
                }
            );
        });

}

旁注2：

您还应该考虑toPromise() （RxJS 6 及更低版本）或firstValueFrom （RxJS 7^）将该服务可观察到的转换为Promise

async getVideoMediaData(file): Promise<boolean> {
        if (!file) return false;

        // if using RxJS 6 or lower
        const data = await this.postingService.getMetadata(file.url).toPromise()
        // RxJS 7
        const data = await firstValueFrom(
            this.postingService.getMetadata(file.url)
        )
        const errors = data.errors;
        file.errors = [];
        if (errors && errors.length > 0 ) {
            errors.forEach(function(ffmpegError) {
                 file.errors.push({
                     'message': ffmpegError,
                     'validation': 'ffmpeg'
                  });
            }, this);
         }
       return data
}

旁注3：

我建议您在处理 JS 数组时限制自己传递匿名函数并使用fat-arrows ，因为您不必处理 JS 的this混乱。 同样使用map比for-each和 push 更好：

file.errors = Array.from(data.errors ?? []).map(ffmpegError => ({message: ffmpegError, validation: 'ffmpeg'}))