javascript - 如何在 javascript 中导入 typescript 类？

Question

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

service.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 并将其视为 typescript 文件。

即如果你有这个:

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。无论如何，它必须是用于类型检查的 typescript 文件(除非您将 allowJs 规则放在 tsconfig.json 中，但即便如此，我认为将 .ts 文件导入 .js 文件并不明智)。

如果您尝试从您的 URL 动态导入 Javascript 文件(或其他东西)

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

相反，我建议您将配置转换为 JSON 文件并使用 JavaScript 的原生 JSON.parse 来解析它。即:

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 类的副本和默认构造函数。如果您不这样做，那么您可以创建一个，创建一个解析函数或类似的东西。