How to replace directive with ESM import?

Question

I'm trying to write a TypeScript application and came to a conclusion that I don't like the <reference path /> triple-slash directive. I find it more suitable to use import 'something' instead.

But when I try to replace my reference paths I keep getting an error that module is unknown.

Here's my folder structure:

/app
    /ViewModels
        ApplicationViewModel.ts
    app.ts

ApplicationViewModel.ts

module ApplicationVM {
    export class ApplicationViewModel {
        constructor(public test:string) {
        }
    }
}

app.ts

/// <reference path="ViewModels/ApplicationViewModel.ts" />

var a = new ApplicationVM.ApplicationViewModel('test');

this one works just fine. How do I get following code to work as well?

import * as App from 'noidea';
var a = new App.ApplicationViewModel('test');

For 'noidea' I tried: ViewModels/ApplicationViewModel, ApplicationVM asl. I even combined it with <reference path /> but it didn't help as well.

score 2 · Accepted Answer · answered Mar 09 '16 at 14:43

2

Remove module declaration from ApplicationViewModel.ts (each file is already a module if you use external modules):

export class ApplicationViewModel {
    constructor(public test:string) {
    }
}

Then in your app.ts

import * as App from './ViewModels/ApplicationViewModel';
var a = new App.ApplicationViewModel('test');

answered Mar 09 '16 at 14:43

Amid

21,508
5
57
54

Thanks a lot, it worked. Missed that dot in the path and feel awkward. – Vladislav Qulin Mar 09 '16 at 14:47
You are welcome. Note that you do not need 'module' and 'export =' usage either. – Amid Mar 09 '16 at 14:52
Yeah, since you code made it work i tried some stuff already =) – Vladislav Qulin Mar 09 '16 at 14:53

score 1 · Answer 2 · answered Mar 09 '16 at 14:44

You need to use so called external modules:

ApplicationViewModel.ts

module ApplicationVM {
    export class ApplicationViewModel {
        constructor(public test:string) {
        }
    }
}

export = ApplicationVM;

app.ts

import { ApplicationViewModel } from "./ViewModels/ApplicationViewModel"
var a = new ApplicationViewModel('test');

How to replace directive with ESM import?

2 Answers2

Linked