如何在TypeScript中导入KnockOut 4? [英] How to import KnockOut 4 in TypeScript?

问题描述

这似乎很简单，因为相同的代码在简单的JS文件中运行良好，并且对ko变量的成员也具有自动补全功能.我在下面有以下TypeScript代码:

This seems simple because the same code works well in simple JS file and it also has autocompletion for the ko variable's members. I have the following TypeScript code below:

// 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"
    ]
}

测试仓库位于此处.

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

Using the given tsconfig.json file, I cannot import the ko4 package well. I could change some of the things in tsconfig.json but I do not know how to make it compatible with all the used modules in my main project. I chose to use ES6 import syntax because it is future-proof.

我本应该使用KnockOut v3.5，但不适用于ES6导入语法.

I would have used KnockOut v3.5 but it does not work with ES6 import syntax.

我还想提到我使用VS Code.

I also wish to mention that I use VS Code.

谢谢.

(基于Nenad的回答)

在tsconfig.json中，我必须将moduleResolution设置为"Node"(以前是默认设置，在我的情况下是"classic").

In tsconfig.json I had to set moduleResolution to "Node" (previously it was the default, in my case "classic").

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

I also had to create a package.json file in the root directory of my project. I thought I had one, but I had just a package-lock.json. After creating the package.json file, I rerun npm i and now VS Code understands the imports. I do not have to put a path to something inside the node_modules directory, I just put the name of the npm module.

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

I also had to replace KnockoutObservable with ko.Observable and all the other Knockout...-named classes and interfaces used in my project.

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

The remaining problem is that after I switched to the AMD module system the output file (bundle.js) does not contain all the needed modules, just the main.ts file converted to JS. Probably this is the subject of another question.

推荐答案

如果您通过'npm'或'yarn'淘汰了版本3 :

If you get knockout version 3 via 'npm' or 'yarn':

yarn add knockout

导入敲除所需要做的就是这个:

All you have to do to import knockout is this:

import * as ko from "knockout";

之所以可行，是因为在node_modules\knockout文件夹中，您的package.json文件具有以下几行(以及其他内容):

This works because in node_modules\knockout folder you have package.json file with this lines (among others):

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

这就是Typescript知道如何将from "knockout"解析为特定的JavaScript文件以及从中提取TypeScript类型的方式.类型捆绑在包装中.

That is how typescript knows how to resolve from "knockout" to specific JavaScript file and also where to pull TypeScript types from. Types are bundled in the package.

版本4

另一方面，如果您下载版本4 : yarn add @tko/build.knockout它仅包含:

On the other side, if you download version 4: yarn add @tko/build.knockout it contains only:

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

所以导入它的正确方法仍然是:

So correct way to import it is still:

import * as ko from "knockout";

但是，您需要分别查找TypeScript定义并将其添加到项目中.据我所见，对于版本4 ，它们在主GitHub中不存在存储库.

However, you need to find TypeScript definitions separately and add them to the project. As far as I could see, for the version 4 they don't exist in the main GitHub repository.

这篇关于如何在TypeScript中导入KnockOut 4?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！