Typescript conflict between "module/index.d.ts" and "@types/module/index.d.ts"

Question

I have a 3rd party module ("handsontable"), which has outdated definition in module folder ("/node_modules/handsontable/handsontable.d.ts"), but proper "index.d.ts" in /node_modules/@types folder. So the structure is the following:

/node_modules
  /@types
    /handsontable
       /index.d.ts (LATEST)
  /handsontable
    /handsontable.d.ts (OUTDATED)
/src/app.ts

I am using es6 modules and I don't want to expose handsontable to global, so when I write in app.ts:

import ht from 'handsontable'

let options: ht.Options

It shows me error, because ht.Options does not exist in /node_modules/handsontable/handsontable.d.ts, while it only exists in /node_modules/@types/handsontable/index.d.ts

Is there anyway to force typescript to load type information from /node_modules/@type/module during import m from "module"?

Here is my tsconfig.json:

{
    "exclude": [
        "node_modules","build","dist", "typings","types"
    ],

    "include": [
        "./src/**/*.ts"
    ],

    "typeAcquisition": {
        "enable": true
        // "exclude": [ //tried that too
        //     "handsontable"
        // ]
    },
    "compileOnSave": true,
    "compilerOptions": {
        "baseUrl": "node_modules",
        "paths": {
            "src/*":["../src/*"],
            "app/*":["../src/*"],
            "*":["../src/*", "./node_modules"]
        },
        "target": "es2016",
        //"module": "es6", //es6 is not compatible with webpack.config.ts
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true, 
        "sourceMap": true,
        "allowJs": true,
        "outDir": "./build",
        "experimentalDecorators": true,
        "lib": [
            "dom",
            "es6"
        ]
    }
}

Typescript version: 2.4.2

Firstly you need to remove types from the excluded files. Next you need to add the type of handsontable and lastly you need to exclude the problamatic type. — Nachshon Schwartz
can you provide a small code sample? I tried what you suggested it didn't work, but I might have messed up the path relativity or something — Philipp Munin
I tried all combinations and I so far I see "node_modules/{module}/{module}.d.ts" always takes priority over "node_modules/@types/{module}/index.d.ts" :-( — Philipp Munin

Philipp Munin Philipp Munin · Accepted Answer · 2017-08-17T00:44:58

As mentioned in the comment "node_modules/{module}/{module}.d.ts" always takes priority over "node_modules/@types/{module}/index.d.ts"

So the best workaround I could find so far is to map the tsconfig.json/compilationOptions/paths:

{
   compilationOptions:{
      baseUrl:"node_modules",
      paths:{
         "handsontable":["@types/handsontable"]
      }
   }    
}

What helped me to find it, is the flag tsc --traceResolution

Typescript conflict between "module/index.d.ts" and "@types/module/index.d.ts"

1 Answers