Typescript alias with dot

Question

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,
    });

No `as source.Vector` is not valid syntax. And why is this better than `as sourceVector` ? — Aleksey L., Nov 01 '20 at 08:45
Why not do something like `import * as source from 'ol/source'` and then call `source.Vector`? — cs95, Nov 01 '20 at 08:45
@cs95 this might break tree shaking (not sure if applicable here) — Aleksey L., Nov 01 '20 at 08:48
thanks lovely people, I will stick with SourceVector for now, and 'import * as source from 'ol/source'' is answer to my particular question. @cs95, can you please post it here as answer and mention side effects mentioned by Aleksey? — tillias, Nov 01 '20 at 09:01

score 2 · Accepted Answer · answered Nov 01 '20 at 09:07

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.

Typescript alias with dot

1 Answers1