Typescript alias with dot

user_5412820 0
Viewed 269

I have following imports (in the same TS source file):

import {Vector as sourceVector} from "ol/source";
import {Vector} from "ol/layer";

Here is how Vector is exported in ol/source:

export { default as Vector } from './source/Vector';

And ol/layer:

export { default as Vector } from './layer/Vector';

Is it possible to refactor imports somehow so it will look like this:

import {Vector as source.Vector} from "ol/source";
import {Vector as layer.Vector} from "ol/layer";

Unfortunately I don't have any control over ol/source and ol/layer and I can't affect their design decisions and naming conventions. I have to import and use both types in the same source code:

  ngAfterViewInit(): void {
    const markerSource = new sourceVector({});

    this.map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
        new Vector({ source: markerSource }),
      ],
      view: new View({
        center: fromLonLat([11.57548, 48.137552]),
        zoom: 13,
      }),
      target: this.myMap.nativeElement,
    });
openlayers-6 typescript-typings typescript
1 Answers

To answer your question:

import * as source from 'ol/source';
import * as layer from "ol/layer";

P.S.: Beware that this could possibly break tree shaking (but I'm not quite sure how you'd verify that).

But as mentioned in the comments, this isn't necessarily better than what you're already doing:

import {Vector as sourceVector} from "ol/source";
import {Vector as layerVector} from "ol/layer";

You can safely refer to either without any naming clash and it's still pretty readable.

user_49090870
Related