如何在javascript中导入打字稿类？

Question

这就是我在打字稿中导入app.config.ts类并使用它的方式。如何AppConfig在 Javascript 文件 (config.js) 中导入相同的类并访问该方法getConfig？

服务.ts

import { AppConfig } from '../app.config';
constructor(private http: Http, private config: AppConfig) {
    this.dataURL = this.config.getConfig('restApi') + '/api/getdata/'
    console.log(this.dataURL)
}

Answer 1

我不知道你到底想问什么，所以我把它分成几个部分：

如果您尝试将 Typescript 文件导入 JavaScript 文件

最好的解决方案是将 config.js 重命名为 config.ts 并将其视为打字稿文件。

即如果你有这个：

export class AppConfig {
  foo: string;
  bar: number;
}

在你的 config.js 中有这样的内容：

export const Config = {
  foo: 'Hello World',
  bar: 42
}

但我假设你想要类似的东西：

import { AppConfig } from './app.config'

export const Config: AppConfig = {
  foo: 'Hello World',
  bar: 42
}

然后只需将 config.js 重命名为 config.ts 即可。无论如何，它必须是一个用于类型检查的打字稿文件（除非您将allowJs规则放入tsconfig.json中，但即使如此，我也不认为将.ts文件导入到.js文件中是明智的）。

如果您尝试从 URL 动态导入 Javascript 文件（或其他内容）

由于一些技术原因，动态导入 JavaScript 文件实际上在浏览器中不起作用，其中最重要的是安全性，而且还因为 ES6 的“导入”（或节点的“require”）不在浏览器标准中。

相反，我建议您将配置转换为JSON文件并使用 JavaScript 的本机JSON.parse来解析它。IE：

http.get(this.dataUrl).toPromise().then(response => {
  let config = null;
  try {
    config = JSON.parse(response.data);
  } catch (e) {
    console.error("Couldn't parse response!");
  }
  this.config = new AppConfig(config); // See note
}

或类似的规定。

注意：我假设您有 AppConfig 类的副本和默认构造函数。如果你不这样做，那么你可以创建一个，创建一个解析函数或类似的东西。