javascript - 在 main.ts (typescript) 中的一个函数中加载外部 javascript 函数

Question

我正在使用 d3.js，希望任何人都可以建议一种让 typescript 像这样工作的方法；

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

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

我希望做的是在单独的文件中创建几个图表，然后调用 main.ts 中 d3.json 函数中的所有函数。

当我尝试这样做时，loadbarchart 和 loadscatterchart 在 d3.json 函数之外加载。

从进一步阅读，据我了解，以这种方式导入函数可能不在 typescript 的范围内？

如果可能的话，我希望有人可以就如何实现这一目标提供一些建议？

谢谢

Answer 1

模块作为一种组织 JavaScript 代码的方式的概念存在了很长时间。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();
})