Angular 7 Unable to include a custom typescript definition file

Question

I created a custom typescript definition file (brat.d.ts)

export declare class head {
   ready(callback: () => any);
}

export declare class Util {
   static embed(divId: string, collData: any, docData: any, webFontsURLs: Array<string>);
}

I am importing the above definition file in Angular 7 components like this

import {head, Util} from "../../brat/brat";

When I do ng serve, I get following error

'ERROR in ./src/app/folder-mgmt/list-documents/list-documents.component.ts Module not found: Error: Can't resolve '../../brat/brat' in '\src\app\folder-mgmt\list-documents'`

Can anyone please suggest what am i doing wrong

Answer 1

You add declarations in a .d.ts file, and they become globally available in your project. But you'll need to tweak the tsconfig.json firstly, by adding the following:

"files": [
  "additional.d.ts"
]

Now create a ./addition.d.ts file (relative to your TypeScript project root) and add your typings there. Do not export symbols, only declare the types.

declare class head {
   ready(callback: () => any);
}

declare class Util {
   static embed(divId: string, collData: any, docData: any, webFontsURLs: Array<string>);
}

You'll now have them available globally.

If you don't want them available globally but you're instead adding typings for a module which is missing them, declare them inside a module.

declare 'module-name' {
  // ...
}

Now TypeScript will recognize those when you do import { ... } from 'module-name'.