I try to use Knockout.js with TypeScript.
I have these relevant packages installed with npm locally (just one root npm project), as listed by npm ls:
@types/knockout@3.4.67knockout@3.5.1wpapi@1.2.1UNMET PEER DEPENDENCY typescript@>= 2.x(I do not know what this means but maybe it is relevant)@types/jquery@3.3.34@types/wpapi@1.1.0
The wpapi types package works well with the actual wpapi package, but knockout does not seem to work this way.
Sometimes I get this error above in the browser console:
Error: Cannot find module 'knockout' from '/.../root-project-directory/subdir1/subdir2/js'.
Other times I get this as the output of tsc:
[17:52:36] Starting compilation in watch mode...
../node_modules/@types/knockout/index.d.ts:1062:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'ko' must be of type 'typeof import("/.../root-project-directory/node_modules/knockout/build/types/knockout")', but here has type 'KnockoutStatic'.
1062 declare var ko: KnockoutStatic;
~~
../node_modules/knockout/build/types/knockout.d.ts:5:1
5 export as namespace ko;
~~~~~~
'ko' was also declared here.
[17:52:43] Found 1 error. Watching for file changes.
In main.ts I have:
import ko = require("knockout");
import * as WPAPI from "wpapi";
or
import * as ko from "knockout";
import * as WPAPI from "wpapi";
In the last case, I get these errors:
[18:12:15] Starting compilation in watch mode...
wp-content/themes/custom-theme/assets/ts/main.ts:1:21 - error TS2307: Cannot find module 'knockout'.
1 import * as ko from "knockout";
~~~~~~~~~~
wp-content/themes/custom-theme/assets/ts/main.ts:39:19 - error TS2304: Cannot find name 'KnockoutObservable'.
39 language: KnockoutObservable<string>;
~~~~~~~~~~~~~~~~~~
wp-content/themes/custom-theme/assets/ts/main.ts:40:15 - error TS2304: Cannot find name 'KnockoutObservable'.
40 slug: KnockoutObservable<string>;
~~~~~~~~~~~~~~~~~~
wp-content/themes/custom-theme/assets/ts/main.ts:41:26 - error TS2304: Cannot find name 'KnockoutObservable'.
41 renderedContent: KnockoutObservable<string>;
~~~~~~~~~~~~~~~~~~
[18:12:21] Found 4 errors. Watching for file changes.
and I include knockout using a <script> tag. I use VS Code.
Please help me solve this problem.
Another relevant open question here.
Thank you.
Update 1
If I uninstall @types/knockout using npm uninstall @types/knockout I get these errors when running cd html; tsc:
[13:48:34] Starting compilation in watch mode...
wp-content/themes/custom-theme/assets/ts/main.ts:40:19 - error TS2304: Cannot find name 'KnockoutObservable'.
40 language: KnockoutObservable<string>;
~~~~~~~~~~~~~~~~~~
wp-content/themes/custom-theme/assets/ts/main.ts:41:15 - error TS2304: Cannot find name 'KnockoutObservable'.
41 slug: KnockoutObservable<string>;
~~~~~~~~~~~~~~~~~~
wp-content/themes/custom-theme/assets/ts/main.ts:42:26 - error TS2304: Cannot find name 'KnockoutObservable'.
42 renderedContent: KnockoutObservable<string>;
~~~~~~~~~~~~~~~~~~
wp-content/themes/custom-theme/assets/ts/main.ts:50:29 - error TS2304: Cannot find name 'ko'.
50 this.language = ko.observable(language);
~~
wp-content/themes/custom-theme/assets/ts/main.ts:51:25 - error TS2304: Cannot find name 'ko'.
51 this.slug = ko.observable(slug);
~~
wp-content/themes/custom-theme/assets/ts/main.ts:52:36 - error TS2304: Cannot find name 'ko'.
52 this.renderedContent = ko.observable("");
~~
wp-content/themes/custom-theme/assets/ts/main.ts:97:9 - error TS2304: Cannot find name 'ko'.
97 ko.applyBindings(new PageViewModel(null, "home"));
~~
[13:48:40] Found 7 errors. Watching for file changes.
Before uninstalling @types/knockout everything worked well, so I do not know what the actual problem was. Maybe the problem was solved because I commented out import * as ko from "knockout"; from the beginning of the main.ts. So I install the @types/knockout package again.
Update 2
This is a related question of mine.
