Typescript Import External Module in Internal Module

Question

I need some help related with Typescript and how to use external modules in Internal Modules.

I want to store all my ViewModel code logic in the ViewModels internal module.

** HomePageViewModel.ts **

module ViewModels {
export class HomePageViewModel {
    constructor() {
        console.log('Creating HomePageViewModel');
    }

    public SayHello(): void {
        console.log('Hello from HomePageViewModel');
    }
}
}

** ViewModelFactories **

public static CreateHomePageViewModel(): ViewModels.HomePageViewModel {
    return new ViewModels.HomePageViewModel();
}

This is working correctly and I can compile and everything works fine at execution time.

Now if I add an import in HomePageViewModel (knockout for example)

import ko = require('knockout');

Typescript no longer compiles. The ViewModelFactories code is underline under Views and inform me that it 'Could Not Find symbol Views'.

How can I access the knockout module from within the ViewModel module?

Julien Lebosquain · Accepted Answer · 2014-10-17 13:36:10Z

2

Basically, you can't mix both module types.

Your internal module is becoming external as soon as you require another external module. You have to access knockout in an "internal" way: import it as a <script> in your starting HTML file (as you're probably already doing for your other files), then use the global ko variable.

Another solution is to make your modules external.

answered Oct 17, 2014 at 13:36

Julien Lebosquain

41.4k9 gold badges108 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AlexandruC Over a year ago

Isn't there any way around this ? I'm having trouble with this question here: stackoverflow.com/questions/47433240/…

TSV · Accepted Answer · 2014-10-17 11:23:43Z

1

You need to get "knockout.d.ts" file (or similar) with "ko.xxxxxx" definitions. You can obtain it from nuget or github. After you will be able to write e.g.

var observable = ko.observable<number>(100);

in your TypeScript code. Of course you still need to include "knockout.x.x.x.js" file on your page.

May be you should use namspase, as described at the TypeScript Documentation:

Needless Namespacing

If you're converting a program from internal modules to external modules, it can be easy to end up with a file that looks like this: shapes.ts

export module Shapes {
    export class Triangle { /* ... */ }
    export class Square { /* ... */ }
}

The top-level module here Shapes wraps up Triangle and Square for no reason. This is confusing and annoying for consumers of your module: shapeConsumer.ts

import shapes = require('./shapes');
var t = new shapes.Shapes.Triangle(); // shapes.Shapes?

edited Oct 17, 2014 at 11:23

answered Oct 16, 2014 at 18:36

TSV

7,6681 gold badge33 silver badges39 bronze badges

3 Comments

user2465083 Over a year ago

I already have the knockout.d.ts file. If I write "export module ViewModels". Everything is working fine and I can import knockout, but then the module is considered as an external module and I need to require it to access it. It also results in the module not loading the other files defining the module.

TSV Over a year ago

I checked the 'typescript.codeplex.com/…' document, may be you need to specify relative path to the knockout, like 'import shapes = require('./shapes');' in the above mentioned doc?

TSV Over a year ago

May be you should use an import name to access knockout? 'import knockout = require('knockout'); var v = knockout.ko.observable();'?

David Sherret · Accepted Answer · 2014-10-16 20:53:41Z

0

Your HomePageViewModel is defined in the ViewModels module—not the Views module.

public static CreateHomePageViewModel(): ViewModels.HomePageViewModel {
    return new ViewModels.HomePageViewModel();
}

answered Oct 16, 2014 at 20:53

David Sherret

108k28 gold badges197 silver badges190 bronze badges

1 Comment

user2465083 Over a year ago

Thank you for spotting this out, but this is not the problem unfortunately :(

Collectives™ on Stack Overflow

Typescript Import External Module in Internal Module

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related