在 ES5 中使用带有 TypeScript 和 RequireJs 的 Knockout 类型

Posted 2023-03-27

【中文标题】在 ES5 中使用带有 TypeScript 和 RequireJs 的 Knockout 类型

【英文标题】：Using Knockout type with TypeScript and RequireJs for ES5

【发布时间】：2019-11-19 23:20:55

【问题描述】：

我正在学习 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"
  

*.cshtml 的有效 html 部分：（我使用的是 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>

我刚刚注意到我正在使用 Nuget 包 knockoutjs。我怀疑，我真的需要它。不过，这个 nuget 包是否存在任何已知问题？

【参考方案1】：

我不完全确定它会起作用，但请尝试改用 import * as ko from 'knockout 并删除 lib 和 typeRoots。如果这不起作用，请尝试使用此 tsconfig 文件并将文件重命名为 tsconfig.json：

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