Could not find declaration file for declarative-event-listeners

[Lithl]

Trying to follow the documentation to make use of @listen, I added import {DeclarativeEventListeners} from '@polymer/decorators/lib/declarative-event-listeners.js'; to the top of my file and my element extends DeclarativeEventListeners(PolymerElement). However, when my typescript is compiled, I get:

node_modules/@polymer/decorators/lib/decorators.d.ts:11:32 - error TS7016: Could not find a declaration file for module '@polymer/polymer/polymer-element.js'. '/path/to/node_modules/@polymer/polymer/polymer-element.js' implicitly has an 'any' type.

11 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

path/to/index.ts:3:41 - error TS7016: Could not find a declaration file for module '@polymer/decorators/lib/declarative-event-listeners.js'. '/path/to/node_modules/@polymer/decorators/lib/declarative-event-listeners.js' implicitly has an 'any' type.

3 import {DeclarativeEventListeners} from '@polymer/decorators/lib/declarative-event-listeners.js';
                                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

If I mark the function being decorated as private, I get an additional error:

path/to/index.ts:39:4 - error TS2345: Argument of type 'MyClass' is not assignable to parameter of type 'ElementPrototype & HasEventListener<"myFunction_">'.
  Type 'MyClass' is not assignable to type 'HasEventListener<"myFunction_">'.
    Property 'myFunction_' is private in type 'MyClass' but not in type 'HasEventListener<"myFunction_">'.

39   @listen('select', document)
      ~~~~~~~~~~~~~~~~~~~~~~~~~~

I have no such problem marking a function private and annotating it with @observe or marking a property private and annotating with @query.

[aomarks]

Hmm, I was not able to reproduce your first error. Are you sure you have @polymer/polymer and @polymer/decorators installed, and that your tsconfig.json is set up correctly to resolve dependencies in node_modules/? Are you able to import PolymerElement or e.g. the customElement decorator in your own module?

As for the second error, @listen decorated properties must, unfortunately, have public visibility. This is documented at https://github.com/Polymer/polymer-decorators#listeneventname-string-target-stringeventtarget. The public visibility requirement exists because the signature for the @listen decorator is designed to enforce at compile time that the function you decorate has the correct signature ((Event) => void), which requires it to have public visibility.

[Lithl]

package.json includes:

  "dependencies": {
    "@polymer/polymer": "^3.1.0"
  },
  "devDependencies": {
    "@polymer/decorators": "^3.0.0"
  }

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "target": "es6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "baseUrl": ".",
    "rootDir": ".",
    "paths": {
      "*": [
        "node_modules/*",
        "src/types/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts"
  ]
}

I am successfully importing and using PolymerElement, as well as the customElement, observe, and query decorators.