在終端中構建 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'}))