Typescript: Augmentet methods not available in Visual Studio intellisense unless something is exported from the augmentation module

Created on 7 Mar 2016  路  10Comments  路  Source: microsoft/TypeScript

I have a class called Webpack, which I augment to add a new method addLess like so:

// addLess.ts
import { Webpack } from '../webpack';

declare module '../webpack' {
    interface Webpack {
        addLess(): Webpack;
    }
}

const lessConfiguration = {
    module: {
        loaders: [
            { test: /\.less$/, loader: "style!css!less" }
        ]
    }
};

class Implementation extends Webpack {
    addLess(): Webpack {
        return this.mergeModule('less', lessConfiguration);
    }
}

Webpack.prototype.addLess = Implementation.prototype.addLess;

This works great in the current typescript project, but if I compile (with declarations), and try to use the compiled project in another project, the new method is not shown in intellisense in Visual Studio, and it is shown as an error if I try to use it anyway.
However, if I make sure something is exported from the module above it works as expected. For example, I can work around the issue by exporting the class Implementation like so:

// addLess.ts
import { Webpack } from '../webpack';

declare module '../webpack' {
    interface Webpack {
        addLess(): Webpack;
    }
}

const lessConfiguration = {
    module: {
        loaders: [
            { test: /\.less$/, loader: "style!css!less" }
        ]
    }
};

export class Implementation extends Webpack {
    addLess(): Webpack {
        return this.mergeModule('less', lessConfiguration);
    }
}

Webpack.prototype.addLess = Implementation.prototype.addLess;

However, this means that I am exporting something, that should be private to the module.

This issue is only in Visual Studio. When compiling with gulp-typescript using typescript 1.8.2, 1.8.5, 1.8.6 or 1.8.7 I get no errors - with or without the extra export.

I am using Visual Studio 2015 update 1 with the extension for Typescript 1.8.4.

Bug Fixed

Most helpful comment

I'm seeing a similar issue, everything works correctly with atom-typescript or vscode but if I switch to VS2013 or VS2015 I get the following errors.

image

I've got a copy made zip copy available below, it's simply a clone of https://github.com/johnpapa/angular2-go with no extra work done to it.

Asap2.Web.zip
Uploaded using ZenHub.io

All 10 comments

Can you please elaborate, when your say if I compile (with declarations), and try to use the compiled project in another project - do you use .d.ts file from the compiled project in another project?

Sorry if I wasn't entirely clear.

The first project (project1) contains the following files (after compiling to the lib directory):

|-- package.json
|
|-- src
|   |-- index.ts
|   |-- webpack.ts
|   \-- webpack
|       \-- addLess.ts
|   
\-- lib 
    |-- index.js
    |-- index.d.ts
    |-- webpack.js
    |-- webpack.d.ts
    \-- webpack
        |-- addLess.js
        \-- addLess.d.ts

In package.json main and typings point to the compiled version of src/index.ts:

...
"main": "lib/index.js",
"typings": "lib/index",
...

src/index.ts exports class Webpack from src/webpack.ts:

export { Webpack } from './webpack';

src/webpack.ts defines class Webpack (which is the class that is augmented in src/webpack/addLess.ts):

export class Webpack {
   ...
}

The second project has a symbolic link to the first project in the node_modules directory of the second project, and references index.d.ts and addLess.d.ts using node module resolution.

import { Webpack } from 'project1';
import 'project1/lib/webpack/addLess';

let webpack = new WebPack();

// This line is shown as an error in Visual Studio if the class 'Implementation'
// in src/webpack/addLess.ts is not exported:
webpack.addLess();

I hope this makes it clearer. :smile:

can you please paste the content of addLess.d.ts if it does not contain anything sensitive ?

If there was anything sensitive, it's a bit late now :smile:

addLess.d.ts _without_ export of class Implementation:

declare module '../webpack' {
    interface Webpack {
        addLess(): Webpack;
    }
}
export {};

addLess.d.ts _with_ export of class Implementation:

import { Webpack } from '../webpack';
declare module '../webpack' {
    interface Webpack {
        addLess(): Webpack;
    }
}
export declare class Implementation extends Webpack {
    addLess(): Webpack;
}

I'm seeing a similar issue, everything works correctly with atom-typescript or vscode but if I switch to VS2013 or VS2015 I get the following errors.

image

I've got a copy made zip copy available below, it's simply a clone of https://github.com/johnpapa/angular2-go with no extra work done to it.

Asap2.Web.zip
Uploaded using ZenHub.io

I can repro this - issue is that our VS specific preprocessing logic does not include module augmentations in the list of module names in file.

Cool, thanks for the update (on a sunday no less! :scream: )

Any idea if there will be a tooling release to fix it before 2.0 drops? :pray: (You may not be in the position to say yes or no :smile: )

I'm fairly certain that we can fix it entirely on the script side which means that after fix it checked-in, you can grab and use typescriptServices.js from the nightly build.

@vladima @mhegazy FYI running master in dev mode appears broken with VS2015 Update 2 at the moment. Any idea when release-1.8 will be merged back into master?

sorry for the late reply. i suspect it was fixed by https://github.com/Microsoft/TypeScript/pull/8149. if not let us know what you are seeing.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

bgrieder picture bgrieder  路  3Comments

Roam-Cooper picture Roam-Cooper  路  3Comments

DanielRosenwasser picture DanielRosenwasser  路  3Comments

blendsdk picture blendsdk  路  3Comments

CyrusNajmabadi picture CyrusNajmabadi  路  3Comments