如何在 TypeScript 中导入 KnockOut 4？

Posted 2023-03-27

【中文标题】如何在 TypeScript 中导入 KnockOut 4？

【英文标题】：How to import KnockOut 4 in TypeScript?

【发布时间】：2020-07-21 20:55:58

【问题描述】：

这看起来很简单，因为相同的代码在简单的 JS 文件中运行良好，并且它还具有 ko 变量成员的自动完成功能。我在下面有以下 TypeScript 代码：

// both of the following import lines result in: `ko` undefined

// import  ko  from "@tko/build.knockout";
import  ko  from "../node_modules/@tko/build.knockout/dist/build.knockout.es6";


alert("test: " + ko);

tsconfig.json

    "compilerOptions": 
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "outDir": "js",
        "target": "ES3",
        "watch": true,
        "allowJs": true,
        "lib": ["ES5", "DOM"],
        "module": "CommonJS"
    ,
    "include": [
        "ts"
    ],
    "exclude": [
        "node_modules"
    ]

测试仓库是here。

使用给定的 tsconfig.json 文件，我无法很好地导入 ko4 包。我可以更改 tsconfig.json 中的一些内容，但我不知道如何使其与我的主项目中使用的所有模块兼容。我选择使用 ES6 导入语法，因为它是面向未来的。

我会使用 KnockOut v3.5，但它不适用于 ES6 导入语法。

我还想提一下我使用的是 VS Code。

谢谢。

更新 1

（基于 Nenad 的回答）

在 tsconfig.json 中，我必须将 moduleResolution 设置为“Node”（以前它是默认设置，在我的例子中是“经典”）。

我还必须在我的项目的根目录中创建一个package.json 文件。我以为我有一个，但我只有一个package-lock.json。创建package.json 文件后，我重新运行npm i，现在VS Code 可以理解导入。我不必在node_modules 目录中添加路径，我只需输入 npm 模块的名称即可。

我还必须将KnockoutObservable 替换为ko.Observable 以及我的项目中使用的所有其他Knockout... 命名的类和接口。

剩下的问题是我切换到AMD模块系统后输出文件（bundle.js）没有包含所有需要的模块，只有main.ts文件转换为JS。可能这是另一个问题的主题。

【参考方案1】：

如果您通过“npm”或“yarn”获得淘汰版本 3：

yarn add knockout

要导入淘汰赛，您所要做的就是：

import * as ko from "knockout";

这是有效的，因为在 node_modules\knockout 文件夹中，您有 package.json 包含此行的文件（以及其他行）：

  "main": "build/output/knockout-latest.js",
  "types": "build/types/knockout.d.ts",

这就是 typescript 如何知道如何将 from "knockout" 解析为特定的 javascript 文件以及从哪里提取 TypeScript 类型。类型捆绑在包中。

第 4 版

另一方面，如果您下载 第 4 版： yarn add @tko/build.knockout 它只包含：

  "main": "dist/build.knockout.js",

所以正确的导入方式还是：

import * as ko from "knockout";

但是，您需要单独查找 TypeScript 定义并将它们添加到项目中。据我所知，对于 第 4 版，它们在主 GitHub repository 中不存在。

【讨论】：

如果我使用 v3，我会收到此错误：ko4-test/ts/main.ts(5,10): Error TS2305: Module '"../node_modules/knockout/build/types/knockout"' has no exported member 'ko'. 请帮助我。谢谢。

我解决了这个问题。现在我得到Namespace '"/my-project/node_modules/knockout/build/types/knockout"' has no exported member 'KnockoutObservable'。显示错误的示例代码：class PageViewModel language: ko.KnockoutObservable<string>;。如何使用KnockoutObservable？在文件的顶部我有import * as ko from "knockout";。

'v3' 表示您现在切换到版本 3？哪个示例代码？ Observable 应该是ko.observarble()。你是对的导入import * as ko from "knockout";

是的，我切换到 v3。看来我现在有一个较小的问题：ParseError: 'import' and 'export' may appear only with 'sourceType: module' 因为我导出了一个类，尽管我打算让它是静态的（它只有静态成员）。

另外，你为什么定位“es3”而不是“es5”，为什么是“commonjs”而不是“amd”，如果它是针对浏览器的？