@types and typescript type resolving

Question

I have a project that contains polymer@next as yarn module, added it as a pure JS library.. I wanted to use the typings from the types folder from the polymer 2.4 github repo found here: https://github.com/Polymer/polymer/tree/2.4-pre/types

So I went off creating a @types folder and adding a @polymer folder in it with a package.json and index.d.ts and all of the files from the repo.

No matter what I try, tsc does not find and accept the polymer-element typings.. It is in the @types folder as a file in the polymer...

The structure of my @typings contains:

+ @types
++++ @polymer
------ package.json
------ index.d.ts
------ polymer-element.d.ts

My code (app.ts) contains: import { Element } from '@polymer/polymer/polymer-element'

I also tried to place the 'polymer-element.d.ts' in a 'polymer' subfolder, but this also produces the same error:

 src/myapp.ts(3,25): error TS7016: Could not find a declaration file for 
    module '@polymer/polymer/polymer-element'. 
 '/Users/johngorter/Desktop/polymernext/node_modules/@polymer/polymer/polymer-element.js' implicitly has an 'any' type.
  Try `npm install @types/@polymer/polymer/polymer-element` if it exists or add a new declaration (.d.ts) file containing `declare module '@polymer/polymer/polymer-element';`

What am I missing here? Why is tsc --traceResolution not giving me the right insights?

Thanx John.

Answer 1

Okay, so I basically created an @types folder and for each of the imported named modules:

import '@polymer/polymer/polymer'
import { Element } '@polymer/polymer/polymer-element'

I created a subfolder directly underneath the @types folder, each containing an index.d.ts file, so the structure is:

@types
 ----@polymer
 --------index.d.ts
 ----@polymer-element
 --------index.d.ts

Inside these index type files I refered to the downloaded type definitions from the repo (polymer 2.4) and created a named module definition like this:

declare module "@polymer/polymer/polymer-element" {

  /**
   * Base class that provides the core API for Polymer's meta-programming
   * features including template stamping, data-binding, attribute deserialization,
   * and property change observation.
   */
  class Element extends
    Polymer.ElementMixin(
    HTMLElement) {
  }
}

Now it works...