Загрузить внешние функции javascript в одной функции внутри main.ts (typescript)

Question

Я использую d3.js и надеялся, что кто-нибудь может предложить способ работы с машинописными текстами так:

import {loadbarchart} from "./javascript/charts/barchart"; 
import {loadscatterchart} from "./javascript/charts/scatterchart"; 

d3.json("data.json", function(error, data) { 
    loadbarchart(); 
    loadscatterchart(); 
}) 

То, что я надеюсь сделать, это создать несколько графиков в отдельных файлах, то просто вызовите все функции внутри функции d3.json внутри main.ts.

Когда я попытался сделать это, loadbarchart и loadscatterchart загружены вне функции d3.json.

От дальнейшего чтения, поскольку я понимаю, что это не может быть в области машинописного ввода для импорта функций таким образом?

Я надеялся, что кто-то может предложить некоторые советы о том, как это можно достичь, если это возможно?

Благодаря

Answer 1

Концепция модулей как способ организации JavaScript-кода существовали в течение длительного time.Modules в стандарте ECMAScript обеспечивает удобное средство для этого.

Вы можете поместить ключевое слово экспорта:

1.before declaring variables, functions and classes. 
2.separately, while in braces indicates that it is exported. 

export.file.js

export let one = 1; 
export let two = 2; 

или

let one = 1; 
let two = 2; 
export {one, two}; 

или

export class User { 
    constructor(name) { 
    this.name = name; 
    } 
}; 

export function sayHi() { 
    alert("Hello!"); 
}; 

импорт

import {one, two} from "export.file";//it is not necessary to specify extension js 
alert(`${one} and ${two}`); // 1 and 2 

При использовании

import {loadbarchart} from "./javascript/charts/barchart"; 
you must be sure that the file javascript/charts/barchart 

exporte {loadbarchart,loadscatterchart,...}; 

и только тогда

d3.json("data.json", function(error, data) { 
    loadbarchart(); 
    loadscatterchart(); 
})