如何在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，并将其视为打字稿文件。

即。如果你有这个：

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的“导入”（或节点的“要求”）不在浏览器标准中。

相反，我建议您将配置转换为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类的副本和默认构造函数。如果不这样做，那么你可以创建一个，创建一个解析函数或类似的东西。

Answer 2

删除this关键字，配置被注入到构造函数中，并且在您的类中不存在。这样：

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