如何在打字稿中正确导入类型定义?

时间:2019-09-23 14:47:10

标签: javascript typescript requirejs jspdf amd

我正在尝试在打字稿中导入jspdf的类型定义,但不知何故。我收到此错误(未找到):

require.js:1961 GET http://localhost/PetshopSanvictorPHP/script/js/control/jspdf.js net::ERR_ABORTED 404 (Not Found)
req.load @ require.js:1961
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load (async)
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
(anonymous) @ require.js:1460
setTimeout (async)
req.nextTick @ require.js:1815
localRequire @ require.js:1449
configure @ require.js:1387
requirejs @ require.js:1794
(anonymous) @ require.js:2144
(anonymous) @ require.js:2145
require.js:168 Uncaught Error: Script error for "jspdf", needed by: JSPDFControl
https://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:168)
    at HTMLScriptElement.onScriptError (require.js:1738)
makeError @ require.js:168
onScriptError @ require.js:1738
error (async)
req.load @ require.js:1943
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
callGetModule @ require.js:1203
completeLoad @ require.js:1590
onScriptLoad @ require.js:1717
load (async)
req.load @ require.js:1942
load @ require.js:1685
load @ require.js:834
fetch @ require.js:824
check @ require.js:856
enable @ require.js:1176
enable @ require.js:1557
(anonymous) @ require.js:1161
(anonymous) @ require.js:134
each @ require.js:59
enable @ require.js:1113
init @ require.js:788
(anonymous) @ require.js:1460
setTimeout (async)
req.nextTick @ require.js:1815
localRequire @ require.js:1449
configure @ require.js:1387
requirejs @ require.js:1794
(anonymous) @ require.js:2144
(anonymous) @ require.js:2145



这是我的index.php,在这里我使用requireJS加载我的类(JSPDFControl.js),然后导入jspdf脚本:

<html>
    <head>
        <script type="text/javascript" src="/PetshopSanvictorPHP/node_modules/jspdf/dist/jspdf.debug.js"></script>
        <script data-main="/PetshopSanvictorPHP/script/js/control/JSPDFControl.js" src="/PetshopSanvictorPHP/node_modules/requirejs/require.js"></script>
    </head>
    <body>
    </body>
</html>



这是我的Typescript类(JSPDFControl.ts),我尝试在其中导入jspdf @type:

//JSPDFControl.ts

import { jsPDF } from "jspdf"; //Here is the big question

export class JSPDFControl {
    public static newDocument() {
        var doc = new jsPDF();
        doc.text('Hello world!', 10, 10)
        doc.save('test.pdf')
    }
}
JSPDFControl.newDocument();

翻译版本(JSPDFControl.js)

//JSPDFControl.js
define(["require", "exports", "jspdf"], function (require, exports, jspdf_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    class JSPDFControl {
        static newDocument() {
            var doc = new jspdf_1.jsPDF();
            doc.text('Hello world!', 10, 10);
            doc.save('test.pdf');
        }
    }
    exports.JSPDFControl = JSPDFControl;
    JSPDFControl.newDocument();
});



这是我的tsconfig.json:

{
    "compilerOptions": {
        "target": "es2020",
        "module": "amd",
        "allowJs": true,
        "noEmitOnError": false,
        "outDir": "../js",
        "watch": true
    }
}



我已经通过npm npm install jspdf --save安装了jspdf
并也安装在@types中:npm install @types/jspdf --save-dev
我导出了@ types / jspdf / index.d.ts中的类:

// Type definitions for jsPDF 1.3
// Project: https://github.com/MrRio/jsPDF
// Definitions by: Amber Schühmacher <https://github.com/amberjs>
//                 Kevin Gonnord <https://github.com/lleios>
//                 Jackie Weng <https://github.com/jemerald>
//                 Frank Brullo <https://github.com/frankbrullo>
//                 Leon Montealegre <https://github.com/leonmontealegre>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped

declare module 'jspdf' {
    export class jsPDF {
        constructor(orientation?:any,
                    unit?:string,
                    format?:string|Array<Number>,
                    compressPdf?:number);

        CapJoinStyles:any;
        version:string;

        internal: {
            'pdfEscape'(text:string, flags:any): any;
            'getStyle'(style:string) : any;
            'getFont'(): any;
            'getFontSize'():number;
            'getLineHeight'():number;
            'write'(string1:string):any;
            'getCoordinateString'(value:number):number;
            'getVerticalCoordinateString'(value:number):number;
            'collections':any;
            'newObject'():number;
            'newAdditionalObject'():any;
            'newObjectDeferred'():number;
            'newObjectDeferredBegin'(oid:number):void;
            'putStream'(str:string):void;
            'events':any;
            'scaleFactor':number;
            'pageSize': {
                width:number;
                getWidth: () => number;
                height:number;
                getHeight: () => number;
            };
            'output'(type:any, options:any):any;
            'getNumberOfPages'():number;
            'pages':number[];
            'out'(string:string):void;
            'f2'(number:number):number;
            'getPageInfo'(pageNumberOneBased:number):any;
            'getCurrentPageInfo'():any;
        };
        addPage(format?: string | number[], orientation?: 'p'|'portrait'|'l'|'landscape'): jsPDF;
        setPage(n:number):jsPDF;
        insertPage(beforePage:number):jsPDF;
        movePage(targetPage:number, beforePage:number):jsPDF;
        deletePage(n:number):jsPDF;
        setDisplayMode(zoom?:string, layout?:string, pmode?:string):jsPDF;
        text(text:any, x:any, y:any, flags?:any, angle?:any, align?:any):jsPDF;
        lstext(text:string, x:number, y:number, spacing:number):jsPDF;
        line(x1:number, y1:number, x2:number, y2:number):any;
        clip():void;
        lines(lines:any, x:any, y:any, scale?:any, style?:string, closed?:boolean):jsPDF;
        rect(x:number, y:number, w:number, h:number, style?:string):jsPDF;
        triangle(x1:number, y1:number, x2:number, y2:number, x3:number, y3:number, style:string):jsPDF;
        roundedRect(x:number, y:number, w:number, h:number, rx:number, ry:number, style:string):jsPDF;
        ellipse(x:number, y:number, rx:number, ry:number, style?:string):jsPDF;
        circle(x:number, y:number, r:number, style:string):jsPDF;
        setProperties(properties:any):jsPDF;
        setFontSize(size:number):jsPDF;
        setFont(fontName?:string, fontStyle?:string):jsPDF;
        setFontStyle(style:string):jsPDF;
        setFontType(style:string):jsPDF;
        getFontList():any;
        addFont(postScriptName:string, fontName:string, fontStyle:string):string;
        setLineWidth(width:number):jsPDF;
        setDrawColor(ch1:number|string, ch2?:number, ch3?:number, ch4?:number):jsPDF;
        setFillColor(ch1:number|string, ch2?:number, ch3?:number, ch4?:number):jsPDF;
        setTextColor(r?:number, g?:number, b?:number):jsPDF;
        setLineCap(style:string|number):jsPDF;
        setLineJoin(style:string|number):jsPDF;
        output(type?:string, options?:any):any;
        save(filename:string): void;
        save(filename:string, options: {returnPromise: boolean}): Promise<any>;

        /**
         * jsPDF plugins below:
         *
         *  - AddHTML
         *  - AddImage
         *  - Annotations
         *  - AutoPrint
         *  - Canvas
         *  - Cell
         *  - Context2D
         *  - FromHTML
         *  - JavaScript
         *  - PNG
         *  - split_text_to_size
         *  - SVG
         *  - total_pages
         *  - vfs
         */

        // jsPDF plugin: addHTML
        addHTML(element:any, x:number, y:number, options:any, callback:Function):jsPDF;
        addHTML(element:any, callback:Function):jsPDF;

        // jsPDF plugin: addImage
        color_spaces:any;
        decode:any;
        image_compression:any;

        sHashCode(str:string):any;
        isString(object:any):boolean;
        extractInfoFromBase64DataURI(dataURI:string):any[];
        supportsArrayBuffer():boolean;
        isArrayBuffer(object:any):boolean;
        isArrayBufferView(object:any):boolean;
        binaryStringToUint8Array(binary_string:string):Uint8Array;
        arrayBufferToBinaryString(buffer:any):string;
        arrayBufferToBase64(arrayBuffer:ArrayBuffer):string;
        createImageInfo(data:any, wd:any, ht:any, cs:any, bpc:any, imageIndex:number, alias:any, f?:any, dp?:any, trns?:any, pal?:any, smask?:any):any;
        addImage(imageData?:any, format?:any, x?:number, y?:number, w?:number, h?:number, alias?:any, compression?:any, rotation?:any):jsPDF;
        processJPEG(data:any, index:number, alias:any, compression?:any, dataAsBinaryString?:string):any;
        processJPG():any;

        // jsPDF plugin: Annotations
        annotationPlugin:any;
        createAnnotation(options:any):void;
        link(x:number, y:number, w:number, h:number, options:any):void;
        textWithLink(text:string, x:number, y:number, options:any):number;
        getTextWidth(text:string):number;
        getLineHeight():number;

        // jsPDF plugin: AutoPrint
        autoPrint():jsPDF;

        // jsPDF plugin: Canvas
        canvas: {
            getContext():any;
            style:any;
        };

        // jsPDF plugin: Cell
        setHeaderFunction(func:Function):void;
        getTextDimensions(txt:string):any;
        cellAddPage():void;
        cellInitialize():void;
        cell(x:number, y:number, w:number, h:number, txt:string, ln:number, align:string):jsPDF;
        arrayMax(array:any[], comparisonFn?:Function):number;
        table(x:number, y:number, data:any, headers:string[], config:any):jsPDF;
        calculateLineHeight(headerNames:string[], columnWidths:number[], model:any[]):number;
        setTableHeaderRow(config:any[]):void;
        printHeaderRow(lineNumber:number, new_page?:boolean):void;

        // jsPDF plugin: Context2D
        context2d: {
            pageWrapXEnabled: boolean;
            pageWrapYEnabled: boolean;
            pageWrapX: number;
            pageWrapY: number;
            f2(number:number):number;
            fillRect(x:number, y:number, w:number, h:number):void;
            strokeRect(x:number, y:number, w:number, h:number):void;
            clearRect(x:number, y:number, w:number, h:number):void;
            save():void;
            restore():void;
            beginPath():void;
            closePath():void;
            setFillStyle(style:string):void;
            setStrokeStyle(style:string):void;
            fillText(text:string|string[], x:number, y:number, maxWidth:number):void;
            strokeText(text:string|string[], x:number, y:number, maxWidth:number):void;
            setFont(font:string):void;
            setTextBaseline(baseline:string):void;
            getTextBaseline():string;
            setLineWidth(width:number):void;
            setLineCap(style:string):void;
            setLineJoin(style:string):void;
            moveTo(x:number, y:number):void;
            lastBreak: number;
            pageBreaks: any[];
            lineTo(x:number, y:number):void;
            bezierCurveTo(x1:number, y1:number, x2:number, y2:number, x:number, y:number):void;
            quadraticCurveTo(x1:number, y1:number, x:number, y:number):void;
            arc(x:number, y:number, radius:number, startAngle:number, endAngle:number, anticlockwise:any):void;
            drawImage(img:string, x:number, y:number, w:number, h:number, x2?:number, y2?:number, w2?:number, h2?:number):void;
            stroke():void;
            fill():void;
            translate(x:number, y:number):void;
            measureText(text:string):{ width: number };
        };

        // jsPDF plugin: fromHTML
        fromHTML(HTML:string | HTMLElement, x:number, y:number, settings?:any, callback?:Function, margins?:any):jsPDF;

        // jsPDF plugin: JavaScript
        addJS(txt:string):jsPDF;

        // jsPDF plugin: PNG
        processPNG(imageData:any, imageIndex:number, alias:string, compression:any, dataAsBinaryString:string):any;

        // jsPDF plugin: split_text_to_size
        getCharWidthsArray(text:string, options?:any):any[];
        getStringUnitWidth(text:string, options?:any):number;
        splitTextToSize(text:string, maxlen:number, options?:any):any;

        // jsPDF plugin: SVG
        addSVG(svgtext:string, x:number, y:number, w?:number, h?:number):jsPDF;

        // jsPDF plugin: total_pages
        putTotalPages(pageExpression:string):jsPDF;

        // jsPDF plugin: vfs
        existsFileInVFS(filename:string):boolean;
        addFileToVFS(filename:string, filecontent:string):jsPDF;
        getFileFromVFS(filename:string):string;
    }

    namespace jsPDF {}
}



当我尝试导入任何类型定义时,会发生此错误,好像编译器从运行时目录(http://localhost/PetshopSanvictorPHP/script/js/control/jspdf.js)中导入@type。
当我删除导入时,脚本可以正常运行,但是IDE(可视化工作室)无法识别(找不到名称“ jsPDF”)。
如何解决此问题,正确导入,使IDE识别jsPDF并同时执行脚本?

0 个答案:

没有答案