وارد کردن - بارگذاری توابع جاوااسکریپت خارجی در یک تابع داخل main.ts (تایپسکریپت)

من از 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 بارگذاری میشوند.

با مطالعه بیشتر، همانطور که متوجه شدم، ممکن است وارد کردن توابع به این روش در محدوده تایپاسکریپت نباشد؟

امیدوار بودم کسی بتواند راهنمایی کند که چگونه این ممکن است به دست آید، اگر ممکن باشد؟

متشکرم

پاسخ شماره ۱

مفهوم ماژولها بهعنوان یک روش برای سازماندهی کد جاوااسکریپت مدت طولانی وجود داشته است. ماژولها در استاندارد ECMAScript وسیلهای مناسب برای انجام این کار فراهم میکنند.

شما میتوانید کلمه کلیدی export را قرار دهید:

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

صادرات.فایل.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();
})