Использование типа Knockout с TypeScript и RequireJs для ES5 - PullRequest
Новая
       26

Использование типа Knockout с TypeScript и RequireJs для ES5

0 голосов
/ 10 июля 2019

Я изучаю TypeScript и сейчас борюсь с нокаутом.

Сейчас я импортирую зависимости и затем использую их в моем showPdf.ts файле, например: 

import $ = require("jquery");
import ko = require("knockout");
import pdfjsLib = require("pdfjs-dist/build/pdf");

export class PdfViewModel {
    pdfUrl: any;

    constructor(initUrl: string) {
        this.pdfUrl = ko.observable(initUrl);
    }

    var loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then((pdf: any) => {
        pdf.getPage(1).then((page: any) => {
            ...
        }
    }
    ...
}

1. KnockoutObservable

Теперь я хотел бы установить тип pdfUrl на KnockoutObservable<string>. Не изменяя ничего, теперь я получаю ошибку транспиляции: 

Error TS2403: Build:Subsequent variable declarations must have the same type.  Variable 'ko' must be of type 'typeof import("C:/Users/BluE/Source/Repos/ShowPdfTest/node_modules/knockout/build/types/knockout")', but here has type 'KnockoutStatic'. (1060, 13)

Я исправил это, изменив импорт нокаута на: 

/// <reference path="../TypeScript/@types/knockout/index.d.ts" />
import $ = require("jquery");
import pdfjsLib = require("pdfjs-dist/build/pdf

Теперь я прочитал, что использование такой ссылки на самом деле плохая практика. Так каков будет правильный способ сделать это?

2. PdfJS

Visual Studio также выдвигает на первый план 2 проблемы: они компилируются и работают нормально. 

Import 'pdfjsLib' is never used
Symbol 'pdfjsLib' cannot be properly resolved, probably it is located in inaccessible module

Если я удалю импорт, другая строка больше не будет проходить. 

Error TS2304: Build:Cannot find name 'pdfjsLib'.

Я что-то здесь не так делаю? Если да, то как правильно это сделать?

Дополнительная информация о конфигурации:

tsconfig.json 

{
  "compileOnSave": true,
  "compilerOptions": {
    "strict": false,
    "noEmitOnError": true,
    "sourceMap": true,
    "removeComments": false,
    "target": "es5",
    "outDir": "wwwroot/js/",
    "module": "amd",
    "moduleResolution": "node",
    "lib": [
      "es5",
      "dom"
    ],
    "typeRoots": []
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

package.json 

{
  "version": "0.5.0",
  "name": "showpdf.test",
  "private": true,
  "devDependencies": {
    "@types/jquery": "3.3.30",
    "@types/knockout": "3.4.66",
    "@types/pdfjs-dist": "2.0.0"
  },
  "dependencies": {
    "requirejs": "2.3.6",
    "jquery": "3.4.1",
    "knockout": "3.5.0",
    "pdfjs-dist": "2.0.943"
  }
}

Эффективные html части моего *.cshtml: (Я использую ASP.Net Core 2.2, если это актуально.) 

<script src="~/lib/requirejs/dist/require.js"></script>
<script>
    require.config({
        baseUrl: "/",
        paths: {
            "jquery": "lib/jquery/dist/jquery-3.4.1",
            "knockout": "lib/knockout/dist/knockout-3.5.0",
            "pdfjs-dist/build/pdf": "lib/pdfjs/dist/build/pdf",
            'pdfjs-dist/build/pdf.worker': "lib/pdfjs/dist/build/pdf.worker",
            "showpdf-test": "js/showpdf"
        },
        waitSeconds: 15
    });
    require(
        ["knockout", "showpdf-test"],
        function (ko, showpdf) {
            var viewModel = new showpdf.PdfViewModel("");
            ko.applyBindings(viewModel);
        }
    );
</script>

File structure in my solution

Я только что заметил, что использую пакет Nuget knockoutjs. Я сомневаюсь, что мне это действительно нужно. Есть ли какие-либо известные проблемы с этим пакетом nuget?

1 Ответ

0 голосов
/ 10 июля 2019

Я не совсем уверен, что это сработает, но попробуйте вместо этого использовать import * as ko from 'knockout и удалить lib и typeRoots.Если это не сработает, попробуйте использовать этот файл tsconfig и переименовать файл в tsconfig.json: 

{
    "compilerOptions": {
        "module": "amd",
        "target": "es6",
        "moduleResolution": "node"
    },
    "exclude": [
        "node_modules",
        "wwwroot"
    ]
}
...