How to import a typescript class in javascript?

Question

This is how I import app.config.ts class in typescript and use it. How do I import the same AppConfig class in Javascript file (config.js) and access the method 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

I don't know exactly what you are asking, so I've split it into to parts:

If you are trying to import a Typescript file into a JavaScript file

The best solution would be to rename your config.js to config.ts and treat it like a typescript file.

i.e. if you have this:

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

And in your config.js you have this:

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

but I assume you want something akin to:

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

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

Then just rename config.js to config.ts. It has to be a typescript file for type checking anyways (unless you put the allowJs rule in the tsconfig.json, but even then I don't think it's smart to import .ts files into .js files).

If you are trying to import a Javascript file (or something) dynamically from your URL

Importing JavaScript files dynamically doesn't actually work in the browser for a couple of technical reasons, not the least of which is security, but also because ES6's "import" (or node's "require") is not in the browser standard.

Instead, I recommend you convert your config to a JSON file and use JavaScript's native JSON.parse to parse it. I.E:

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
}

Or something along those lines.

Note: I assume you have both a copy and a default constructor for your AppConfig class. If you don't, then you can create one, create a parse-function or something akin to that.