角度/打字稿？ /Javascript？ - “.default”是什么意思？

Question

Can someone explain what the ".default" means in the following code

I want to use such code in our project, but I am unsure about the code-fragment in question.

(I've altered my question to show the original code.)

In the article angular-http-mock-interceptor-for-mocked-backend-1h5g at dev.io one can read code like this:

import { Injectable, Injector } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import * as users from './users.json';

const urls = [
    {
        url: 'https://an-example.url.org/users',
        json: users
    }
];

@Injectable()
export class HttpMockRequestInterceptor implements HttpInterceptor {
    constructor(private injector: Injector) {}

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        for (const element of urls) {
            if (request.url === element.url) {
                return of(new HttpResponse({ status: 200, body: ((element.json) as any).default })); // <---- THIS ".default"
            }
        }
    //...
    }
}

with users.json

[
 {
   "name": "Abe",
   "id": 1
 },
 {
   "name": "Boe",
   "id": 22
 }
]

I tried to google it, but with no success. I am not sure wether to try ot the code without the ".default" is sufficient enough, maybe I am missing something. That's why I would appreciate it to get some knowledge about the meaning. Thank you in advance.

Answer 1

The reason for the default is because of the star import in here

import * as users from './users.json';

You could make that import

import users from './users.json';

You will notice that changing the import breaks the code, so you need to remove that default. and change that line to

return of(new HttpResponse({ status: 200, body: element.json }));

Last thing is the reason you had to cast it is because json.element doesn't have that default property.

The previous image is just a console.log of the const urls.

The stackblitz URL. https://stackblitz.com/edit/angular-mock-http-interceptor?file=src%2Fapp%2Finterceptor.mock.ts

I am confused about the order. It is first "cast" to any, and then the default-property is accessed. I don't understand why

A more natural way that you might think about is to assign the url type to any and that does work.

const urls:any = [
    {
        url: 'https://jsonplaceholder.typicode.com/users',
        json: users
    }
];

@Injectable()
export class HttpMockRequestInterceptor implements HttpInterceptor {
    constructor(private injector: Injector) {}

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        for (const element of urls) {
            if (request.url === element.url) {
                console.log('Loaded from json : ' + request.url);
                return of(new HttpResponse({ status: 200, body: element.json.default }));
            }
        }
        console.log('Loaded from http call :' + request.url);
        return next.handle(request);
    }
}