Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I get TypeScript to load the PDF.js NPM module and @types bindings in a way that generates working Node.JS code?

Context

I'm trying to import PDF.JS into a TypeScript project. I'm using the DefinitelyTyped bindings for pdfjs-dist, installed via npm install @types/pdfjs-dist and npm install pdfjs-dist.

Problem

I can't seem to get TypeScript to compile my project. I'm using source code copied straight from the tests on DefinitelyTyped. This is the simplified (deletions only) code I'm trying to compile (an exact copy of the test code from DefinitelyTyped also fails in the same way):

import { PDFJSStatic } from 'pdfjs-dist';
var PDFJS: PDFJSStatic;
PDFJS.getDocument('helloworld.pdf').then(console.log);

TypeScript finds the type declarations module, and considers the import of PDFJSStatic to be valid. It doesn't think PDFJS is ever initialized, but if I turn off strict in tsconfig, the code compiles, but it compiles to:

"use strict";
exports.__esModule = true;
var PDFJS;
PDFJS.getDocument('helloworld.pdf').then(console.log);

Which obviously doesn't work. It's not compiling the import statement into anything.

Question

How can I import PDF.JS into a TypeScript project and compile it into working Node.JS code via the declaration files in @types/pdfjs-dist?

What I've Tried

I've tried different variations on import, to no avail. Switching to require also doesn't seem to help.

I've verified that the pdjs-dist dependency, and the @types/pdfjs-dist dependencies are present, updated, and usable directly from NodeJS (non-TypeScript programs).

I've tried various values for module in my tsconfig. They change the generated code sometimes, but none of them change it to contain the needed import.

I've tried adding /// <reference path="../node_modules/@types/pdfjs-dist/index.d.ts" /> above the import line. That didn't change the behavior.

Environment

tsc version 2.4.2, node 8.5, and npm 5.3. I have the following tsconfig.json in my project root:

{
    "compilerOptions": {
        "allowJs":true,
        "rootDir": ".",
        "outDir": "dist",
        "moduleResolution": "node"
    },
     "include": [
        "src/**/*"
    ],
    "exclude": [
        "**/*.spec.ts",
        "dist/**/*"
    ]
}
like image 442
Zac B Avatar asked Oct 13 '17 22:10

Zac B


2 Answers

With @types/pdfjs-dist 2.1.0 and pdfjs-dist "2.1.266", the fundamental issue still doesn't quite seem fixed, but I've found that the approach from their own test works:

import { getDocument, PDFDocumentProxy, PDFPromise, Util } from 'pdfjs-dist';

(It's not pretty, though, as it pollutes your namespace.)

like image 164
Sören Kuklau Avatar answered Sep 23 '22 03:09

Sören Kuklau


Maybe you can use require function.

Add @types/node packages, and write require('pdfjs-dist') at the top of the your source code. So, you can modify your code like below.

Now, this code will work.

import { PDFJSStatic } from 'pdfjs-dist';
const PDFJS: PDFJSStatic = require('pdfjs-dist');
PDFJS.getDocument('helloworld.pdf').then(console.log);

I think that @types/pdfjs-dist has problems in its implementation.

like image 30
Azoson Avatar answered Sep 22 '22 03:09

Azoson