1

I'm using TypeScript 2.1.5 with Visual Studio 2015. The project is configured to use the "ES 2015" module system and ECMAScript 6.

I'm trying to use the Angular Local Storage module, which is defined by DefinitelyTyped as:

declare module 'angular' {
    export namespace local.storage {
        interface ILocalStorageService { 
        }
    }
}

In one of my services, I want to import that interface so I can use it, like so:

module Foooooo.Services {
    export class FooService {
        constructor(private localStorageService: local.storage.ILocalStorageService) {

        }
    }
}

I've tried everything I can think of after pouring over the documentation:

import local from "angular";                           // bzzzzzt
import * as ang from "angular";                        // causes all of my other interfaces to no longer resolve
import { local } from "angular";                       // doesn't compile
import { ILocalStorageService } from "angular";        // other interfaces don't resolve anymore
import { local.ILocalStorageService } from "angular";  // nopenope
import ILocalStorageService = require("angular");      // error: not compatible with ECMAScript 6 or higher

How do I get this to import properly?

Improve this question

1 Answer 1

Reset to default
1

You can see my solution here. Run npm install and then npm run build to see for yourself that it compiles correctly.

There are two ways to approach the problem. You can use modules (formerly known as "external modules") or namespaces (formerly known as "internal modules"). There are 2 *.ts files with the corresponding names in the repo for each approach.

In module.ts, you explicitly import the 2 dependencies: angular and angular-local-storage. angular-local-storage is a "side effect" import because it patches angular without exporting anything new. After import 'angular-local-storage', importedAngular (the variable that holds whatever that is exported by angular) now knows about the extra properties/methods aded by angular-local-storage.

In namespace.ts, there's only a slight change from the sample you showed in your question. Because angular exports a global type angular (for use with script tags), you can just use that type. This global type is already "patched" by angular-local-storage because for "internal modules"/namespaces inside a "project" (any directory with a tsconfig.json), TypeScript will include all d.ts files while compiling and of course, one of those d.ts files (namely inside @types/angular-local-storage) "augments" the angular global type. In fact, if you delete the @types/angular-local-storage inside node_modules, compilation will fail for namespace.ts.

You should prefer the module approach over the namespace approach because many packages out there don't provide the UMD global type, causing the latter approach to fail.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.