如何在JavaScript中導入Typescript類？

Question

這就是我在typescript中導入app.config.ts類並使用它的方式。 如何在Javascript文件（config.js）中導入相同的AppConfig類並訪問方法getConfig ？

服務

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。 無論如何，它必須是一個用於類型檢查的打字稿文件（除非您將tsJ.rule放在tsconfig.json中，但是即使那樣，我也認為將.ts文件導入.js文件並不明智）。

如果您嘗試從URL動態導入Javascript文件（或其他內容）

動態導入JavaScript文件實際上在瀏覽器中不起作用，這有幾個技術原因，其中不僅僅包括安全性，還因為瀏覽器標准中沒有ES6的“導入”（或節點的“要求”）。

相反，我建議您將配置轉換為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類的副本和默認構造函數。 如果沒有，則可以創建一個，創建解析函數或類似的函數。