如何为全局第三方库导入 TypeScript 模块定义

Question

I am using a third-party Javascript library that has to be imported directly via a <script> tag in my index.html file. As the library is in my public/ folder, Typescript (v3.8.3) is able to find it.

The library looks like this:

var MyLib = {x: ..., y: ... z:...}
MyLib.SomeFunc = ...
MyLib.SomeOtherFunc = ...

When I use MyLib in my Typescript project (as a global, no import statement), Typescript recognizes MyLib as having the properties X, YZ , but not SomeFunc and SomeOtherFunc .

To fix this, there exists a typings file, mylib.d.ts .

It looks like this:

export = MyLib;

declare module MyLib {
  function SomeFunc ...;
  ...
}

I added mylib.d.ts to my src root, where my other *.d.ts files are.

However, Typescript does not pick this up. It sticks to the inferences it has made by reading the MyLib.js file directly.

How can I get Typescript to read these definitions?

What I have tried:

• /// <reference types="../myLib" . Typescript still uses the auto-generated types from the actual myLib.js file
• import "../myLib"; . Doesn't work because it's just a typing file, not a module.
• import type MyLib from "../myLib"; . This seems to not be valid Typescript yet, although it seemed like it was going to be in v3.8. I'm not sure if that's correct anyway, because MyLib is a namespace, not a type.

Answer 1

If typings are in npm then include @types/mylib.d.ts into devDependencies of your package.json file then compiler will not have an issue with:

import '../myLib';

Otherwise add folder where *.d.ts files are located into compilerOptions / typeRoots array located in tsconfig.json. It should already have "node_modules/@types". For example:

    "typeRoots": [
        "myLibTypesFolder",
        "node_modules/@types"
    ],