Zoeken op website

angular - typescript importeren van <variable> in plaats van een letterlijke string?

https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Statements/import

Is het mogelijk in Typescript om het 'from'-pad dynamisch in een variabele te zetten bij het importeren?

Bijv. draai dit:

import {HomeComponent} from './dashboard/home/home.component';

Naar iets zoals dit:

let hompageComponentPath = './dashboard/home/home.component';
import * from hompageComponentPath;

Antwoord #1

Met het dynamische import-voorstel

Er is een voorstel voor dynamische import in ECMAScript.

Sinds TypeScript 2.4 zijn dynamische import-expressies beschikbaar. Hier is een voorbeeld:

async function getZipFile(name: string, files: File[]): Promise<File> {
    const zipUtil = await import('./utils/create-zip-file');
    const zipContents = await zipUtil.getAsBlob(files);
    return new File(zipContents, name);
}

De import, gebruikt als een functie, retourneert een belofte die kan worden afgewacht.

... Maar niet met de ES6 statische import/export

Het is niet mogelijk om dat te doen met de syntax import/export omdat de ES6-standaard modules expliciet op een statische manier had gedefinieerd.

Uit het artikel ES6 In Depth: Modules:

Voor een dynamische taal heeft JavaScript een verrassend statisch modulesysteem gekregen.

  • Alle varianten van import en export zijn alleen toegestaan op het hoogste niveau in een module. Er zijn geen voorwaardelijke imports of exports, en je kunt import niet in de functiescope gebruiken.
  • Alle geëxporteerde identifiers moeten expliciet bij naam worden geëxporteerd in de broncode. Je kunt niet programmatisch door een array lopen en een hoop namen op een datagestuurde manier exporteren.
  • Module-objecten zijn bevroren. Er is geen manier om een nieuwe functie in een module-object te hacken, in polyfill-stijl.
  • Alle afhankelijkheden van een module moeten volledig worden geladen, geanalyseerd en gekoppeld voordat enige modulecode wordt uitgevoerd. Er is geen syntax voor een import die lui, op aanvraag, kan worden geladen.
  • Er is geen foutherstel voor import-fouten. Een app kan honderden modules bevatten, en als iets niet kan worden geladen of gekoppeld, werkt niets. Je kunt niet importeren in een try/catch-blok. (Het voordeel hiervan is dat omdat het systeem zo statisch is, webpack die fouten al voor je kan detecteren tijdens het compileren.)
  • Er is geen haak waarmee een module wat code kan uitvoeren voordat zijn afhankelijkheden laden. Dit betekent dat modules geen controle hebben over hoe hun afhankelijkheden worden geladen.

Antwoord #2

Je kunt import gebruiken als een functie en vervolgens een willekeurige dynamisch gemaakte string doorgeven in plaats van een stringliteral.

Dit retourneert echter een Promise, dus houd er rekening mee dat het binnen een async-functie moet worden uitgevoerd in plaats van helemaal bovenaan het bestand.

bijv.

async main(): Promise<void> { 

        const  myData = await import(`../../data/${environment.theme}/chapters`);
        
        console.log({ myData });
}

Gerelateerde artikelen