CODEWITHSUNDEEP
typescriptknockout.js
Luke Puplett
Luke Puplett

Reputation: 45105

KnockoutJS with TypeScript and ES2015 in browser

I am building a website using TypeScript. I am using ES2015 module loading syntax and targeting new browsers. I am using KnockoutJS.

I'm also moving code over from an old side project, so my .ts files exist with a load of KO view models.

Opening a .ts file with references to ko.observable seems to be fine, as in TypeScript Intellisense in VS 2019 recognises the Knockout types somehow.

However, that's no good once its compiled and loaded in the browser, since I need to load Knockout somehow.

So I simply entered this import.

// MyViewModels.ts
import * as ko from "lib/knockout/build/output/knockout-latest.js"

But I get a compiler error.

TS7016  (TS) Could not find a declaration file for module 'lib/knockout/build/output/knockout-latest.js'. '(full-path)' implicitly has an 'any' type.

I'm obviously not supposed to do it this way. Should I just add an "old fashioned" <script> tag to my page pointed at knockout-latest.js and load it without using modules, will this setup a ko object so my references to ko.observable work?

Thanks

Side Note

Any import statements need to use a path to a .js file. This is because the TypeScript compiler doesn't augment the imports so they end up in the built JS. Therefore, Chrome must be happy with these imports and so must TypeScript.

To that end, I have already had to add a find-replace Gulp step to change from "lib/path.js" to from "../lib/path.js".

See TypeScript resolution of relative JS file import vs. Chrome resolution of import

Upvotes: 3

Views: 111

Answers (1)

Luke Puplett
Luke Puplett

Reputation: 45105

Just add the following to your page (or layout page).

<script src="~/lib/knockout/build/output/knockout-latest.js"></script>

Upvotes: 1

Related Questions