@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.

score 3 · Accepted Answer · answered Feb 01 '18 at 12:39

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...

Luca Taccagni · Answer 2 · 2018-02-01T11:58:31.087

0

As @Polymer is defined, it is a namespace and has (as i see) no export members, so try with this workaround:

import polymerElement = require('@polymer/polymer/polymer-element');

if it won't work, try with only one type from @polymer /lib path and see if it solves at least for that one.

take a look at this: New es6 syntax for importing commonjs / amd modules i.e. `import foo = require('foo')`

EDIT -- SOLUTION 1

implicitly has an 'any' type error should be solved changing your tsconfig file:

{ "compilerOptions": 
{ "target": "es5", 
"module": "commonjs", 
"moduleResolution": "node", 
"sourceMap": true, 
"emitDecoratorMetadata": true, 
"experimentalDecorators": true, 
"removeComments": false, 
"noImplicitAny": false // <----- 
}

edited Feb 01 '18 at 11:58

answered Feb 01 '18 at 11:20

Luca Taccagni

1,059
6
23

same error, it does not pick up the polymer-element.d.ts, here is the error: 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. – John Gorter Feb 01 '18 at 11:26
first: `implicitly has an 'any' type` should be solved changing your tsconfig file: { "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, `"noImplicitAny": false` // <----- }, – Luca Taccagni Feb 01 '18 at 11:38
I dont want to have implicitAny, I want the Element to be typed so it is not any... Changing the tsconfig removes the error, but then I would have an implicit any... – John Gorter Feb 01 '18 at 11:45
the element you want to be typed came from your library with `any` type. I think you'll have to change directly that, or just try opening an issue on the gitHub project. I'll edit my answer for the first solution =) – Luca Taccagni Feb 01 '18 at 11:56
"the element you want to be typed came from your library with any type." I dont understand.. '@polymer/polymer/polymer-element' comes from the polymer module, I just want to use it and have typescript support.. I created an polymer-element.d.ts file inside the @types folder myself to add type info to this module, but it does not get picked up, therefore it is implicitly typed as 'Any'. In my added type file (polymer-element.d.ts), I explicitly type it as any, so this should not trigger the error.. The error states that the type file was not found... – John Gorter Feb 01 '18 at 12:02

@types and typescript type resolving

2 Answers2