时间戳

首页 > 解决方案 > Typescript 更改 API 响应/请求值的最佳方式

typescript - Typescript 更改 API 响应/请求值的最佳方式

问题描述

我们目前正在使用打字稿构建一个角度应用程序。我们正试图对打字稿尽可能严格。应用程序向 API 发出请求，该 API 使用对象（假日类型）进行响应。在这个对象中有一个日期字符串。这必须是我们应用程序中的 Date 对象，因为我们正在使用它。

首先，我制作了两个不同的界面。一个用于 API，一个用于应用程序自身。喜欢response.map<APIHoliday, Holiday>(apiHoliday => ....)。

我们的第一个方法也是将它从一个对象更改，然后映射它并将其更改为 Holiday 类型。在我们看来，这不是最好的方法，因为没有人知道它是什么类型的对象。

使用类型/接口和 API 响应/请求时最好的方法是什么？

标签： typescript

解决方案

如果您必须多次使用映射，那么实现一个日期拦截器将很有用，它将日期字符串映射到一个 JS Date 对象（或者如果您正在使用这些对象，则为 moment.js 或 luxon 对象）。

拦截器示例：

@Injectable()
export class DateInterceptor implements HttpInterceptor {
    constructor(private dateParser: DateParserService) {}

    intercept(request: HttpRequest<any>, next: HttpHandler) {
        return next.handle(request.clone()).pipe(
            tap((event: HttpEvent<any>) => {
                if (event instanceof HttpResponse) {
                    const body = event.body;
                    this.dateParser.convertToDate(body);
                }
            })
        );
    }
}

export const DateInterceptorProvider = {
    provide: HTTP_INTERCEPTORS,
    useClass: DateInterceptor,
    multi: true,
};

日期解析服务示例：

@Injectable({
    providedIn: 'root',
})
export class DateParserService {
    myDateFormat = // Add the regex for your date string format here

    convertToDate(item: any) {
        if (item === null || item === undefined) {
            return item;
        }

        if (typeof item !== 'object') {
            return item;
        }

        for (const key of Object.keys(item)) {
            const value = item[key];
            if (this.isMyDateFormat(value)) {
                item[key] = this.convertMyDateFormatToDate(value);
            } else if (typeof value === 'object') {
                this.convertToDate(value);
            }
        }
    }

    private isMyDateFormat(value): boolean {
        if (value === null || value === undefined) {
            return false;
        }

        return this.myDateFormat.test(value);
    }

    private convertMyDateFormatToDate(date: string): Date {
        // Add the logic for the date conversion here
    }
}

现在添加DateInterceptorProvider到providers您的模块的数组（例如app.module.ts）

推荐阅读