CODEWITHSUNDEEP
typescript
Matt Tsōnto
Matt Tsōnto

Reputation: 1702

Can't resolve type declarations despite having found the type declarations

When I run tsc on my project, it reports

src/app/home-behavior.ts(8,30): error TS7016: Could not find a declaration file for module 'jqueryui'. 'C:/myProjectPath/src/lib/jquery-ui/jquery-ui.js' implicitly has an 'any' type.
Try `npm install @types/jqueryui` if it exists or add a new declaration (.d.ts) file containing `declare module 'jqueryui';`

But I already have @types/jqueryui installed, and tsc --traceResolution even shows

======== Resolving type reference directive 'jqueryui', containing file 'C:/myProjectPath/__inferred type names__.ts', root directory 'C:/myProjectPath/node_modules/@types'. ========
Resolving with primary search path 'C:/myProjectPath/node_modules/@types'.
Found 'package.json' at 'C:/myProjectPath/node_modules/@types/jqueryui/package.json'.
'package.json' does not have a 'typings' field.
'package.json' does not have a 'types' field.
File 'C:/myProjectPath/node_modules/@types/jqueryui/index.d.ts' exist - use it as a name resolution result.
Resolving real path for 'C:/myProjectPath/node_modules/@types/jqueryui/index.d.ts', result 'C:/myProjectPath/node_modules/@types/jqueryui/index.d.ts'.
======== Type reference directive 'jqueryui' was successfully resolved to 'C:/myProjectPath/node_modules/@types/jqueryui/index.d.ts', primary: true. ========

So it resolved the definition but still can't find the definition?

Typescript version 2.4.1. Using AMD-style loading with requirejs. My jquery-ui typings are from npm module @types/jqueryui. My directory structure is

projectroot
+ src
| + app
| | + home-behavior.ts
| + lib
|   + jquery
|   | + dist
|   |   + jquery.js
|   + jquery-ui
|     + jquery-ui.js
+ node_modules
| + @types
|   + jquery
|   | + index.d.ts
|   + jqueryui
|     + index.d.ts
+ tsconfig.json

My tsconfig.json is

{
  "compilerOptions": {
    "alwaysStrict": true,
    "baseUrl": ".",
    "lib": [ "es2015", "dom" ],
    "module": "commonjs",
    "moduleResolution": "classic",
    "noEmit": true,
    "noImplicitAny": true,
    "paths": {
      "jqueryui": [
        "src/lib/jquery-ui/jquery-ui.js"
      ],
      "*": [
        "src/lib/*"
      ]
    },
    "sourceMap": false,
    "strictNullChecks": true,
    "target": "es5"
  },
  "include": [
    "src/app"
  ]
}

The reference in home-behavior.ts is

import { Autocomplete } from "jqueryui";

(Originally I referred to the module as "jquery-ui/jquery-ui", but since tsc was already resolving "jqueryui" I changed the module name to match, on the theory that that would help.)

Upvotes: 1

Views: 2612

Answers (1)

Saravana
Saravana

Reputation: 40594

You cannot do import { Autocomplete } from "jqueryui"; since the typings for jQuery UI does not export any members. You can just do:

import  "jquery";
import "jqueryui";

$("selector").autocomplete(...);

And if you want to use it like it is mentioned here you have to use the jQuery UI library from source and update the TypeScript typings.

Upvotes: 2

Related Questions