Importing namespace and interface with methods in TypeScript (TSX) in pdfjs-dist (PDFJS)

Question

I am trying to use pdfjs-dist in my React project, but get a lot of problems trying to import the module and the functions in the project.

The pdfjs-dist module index.d.ts in @types/node_modules is defined so that it contains a namespace "PDF" and a module "pdfjs-dist" which exports "PDF".

The file has interfaces, which contains methods such as "getDocument(name:string)" which I want to call from my other classes.

In short; the file consists of a lot of interfaces and methods that are implemented through this interface, on the form:

 declare module "pdfjs-dist" { export = PDF; } declare namespace PDF { interface PDFJSStatic { getDocument( source: string, pdfDataRangeTransport ? : any, passwordCallback ? : (fn: (password: string) => void, reason: string) => string, progressCallback ? : (progressData: PDFProgressData) => void): PDFPromise < PDFDocumentProxy > ; } 

I have tried to use the regular import statements, such as:

import * as PDF from "pdfjs-dist"

and

import { PDFJSStatic } from "pdfjs-dist"

However, it does not seem to respond very well. VS Code gives me all the interfaces, so I can see what they are, but this is where my knowledge of React and Typescript falls a bit short. How would I go about calling the methods and actually using the "getDocument()" method?

Answer 1

For some reason the fix seems to be to import the interface first, so that the PDFJSStatic and other interfaces are available when using the require statement on line 2.

The import statements that I used were;

 import { PDFJSStatic, PDFPageProxy } from "pdfjs-dist"; let PDFJS: PDFJSStatic = require("pdfjs-dist"); 

This is probably not the correct way of doing it, but it works.