CODEWITHSUNDEEP
javascriptangulartypescriptnpm
Robert
Robert

Reputation: 1940

Typescript duplicated type declarations

I'm experiencing issues with duplicated Typescript type declarations in the following case:

I've got the following dependency tree for my application A:

A->@angular/http:2.3.1
A->B->@angular/http:2.3.1

Both A and B are managed by npm. After running 

npm install

the filesystem looks like this:

A/node_modules/
  @angular/http
  ...
  B/node_modules
     @angular/http

The problem seems to be that now there are two type declarations of @angular/http types like Response, or Headers. And somehow the Typescript transpiler seems unable to handle that - resulting in the following error message:

TS2453:The type argument for type parameter 'T' cannot be inferred from the usage. Consider specifying the type arguments explicitly. Type argument candidate 'Response' is not a valid type argument because it is not a supertype of candidate 'Response'. Types of property 'headers' are incompatible. Type 'Headers' is not assignable to type 'Headers'. Types have separate declarations of a private property 'mayBeSetNormalizedName'.

Reading the message, I guess this is a hickup of Typescript not being able to match the duplicated type declarations.

Anybody experienced the same issue? How to handle that problem? How to handle such name collisions?

Upvotes: 9

Views: 3030

Answers (2)

Robert
Robert

Reputation: 1940

Meanwhile I found out that you can fix this error by explicitly importing the according types inside the using class of A. In my case (cp. error message above), I needed to: 

import {Response, Headers} from '@angular/http';

Upvotes: 4

Robin Dijkhof
Robin Dijkhof

Reputation: 19278

I had the same problem. There are basically two ways to solve this.

  1. Make a UMD module of project B. This might take a lot of time
  2. use as any as TheRequiredObject see below.

Let assume you got this class in project b:

export class B{
    getSome(): Observable {
        return this.http.get('some_url');
    }
}

and this is what you want in project a:

export class A{
    getSomeFromB: Observable{
        return B.getSome() as any as Observable;
    }
}

Upvotes: 2

Related Questions