Begrip: Modules
Moderne JavaScript code maakt gebruik van ES Modules (ESM) om code te structureren in JavaScript en TypeScript projecten[1]. Via modules kan code verspreid worden over verschillende bestanden, zo blijft de code overzichtelijk, ook in grote projecten. Variabelen en functies die in het éné bestand geëxporteerd worden, kunnen in een ander bestand geïmporteerd worden.
In een project met ES modules, worden twee soorten exports onderscheiden, named exports en default exports. Via named exports leg je de naam van de variabele of functie vast, het is dus onmogelijk om de export te importeren onder een andere naam. Een bestand kan een willekeurig aantal named exports bevatten, deze worden allemaal samengevoegd in een object. Tijdens import moet deconstructing gebruikt worden om de verschillende named exports te importeren.
Default exports zijn exports die onder eender welke naam geïmporteerd kunnen worden. Zoals de naam doet vermoeden is een default export de "standaard" export van een bestand, het volgt dus dat er maar één default export per file kan zijn.
// Een named export, moet geïmporteerd worden onder de naam helloWorld
// en moet binnen accolades staan.
export const helloWorld = () => console.log('Hello World')
// Een default export, kan onder eender welke naam geïmporteerd worden
// en moet niet binnen accolades staan.
const helloWorlDefault = () => console.log('Hello World')
export default helloWorlDefault// Import van een named export, accolades zijn vereist.
import {helloWorld} from './helloWorld.ts'
// Import van een default export, accolades zijn niet nodig.
import helloWorlDefault from './helloWorld.ts'
// Import van een defauklt export, onder aan andere naam.
import aRenamedHalloWorldDefaultExport from './helloWorld.ts':::