有没有将 TypeScript 与 KnockoutJS 一起使用的示例？我只是好奇他们将如何合作？
这是我所拥有的，似乎有效
declare var ko: any;
declare var $: any;
class ViewModel {
x = ko.observable(10);
y = ko.observable(10);
}
$(() => {
ko.applyBindings(new ViewModel());
});
这会生成以下 Javascript：
var ViewModel = (function () {
function ViewModel() {
this.x = ko.observable(10);
this.y = ko.observable(10);
}
return ViewModel;
})();
$(function () {
ko.applyBindings(new ViewModel());
});
看看肯定类型。
“流行 JavaScript 库的 TypeScript 类型定义存储库”
我制作了这个小接口来获取 Knockout 的静态类型：
interface ObservableNumber {
(newValue: number): void;
(): number;
subscribe: (callback: (newValue: number) => void) => void;
}
interface ObservableString {
(newValue: string): void;
(): string;
subscribe: (callback: (newValue: string) => void) => void;
}
interface ObservableBool {
(newValue: bool): void;
(): bool;
subscribe: (callback: (newValue: bool) => void) => void;
}
interface ObservableAny {
(newValue: any): void;
(): any;
subscribe: (callback: (newValue: any) => void) => void;
}
interface ObservableStringArray {
(newValue: string[]): void;
(): string[];
remove: (value: String) => void;
removeAll: () => void;
push: (value: string) => void;
indexOf: (value: string) => number;
}
interface ObservableAnyArray {
(newValue: any[]): void;
(): any[];
remove: (value: any) => void;
removeAll: () => void;
push: (value: any) => void;
}
interface Computed {
(): any;
}
interface Knockout {
observable: {
(value: number): ObservableNumber;
(value: string): ObservableString;
(value: bool): ObservableBool;
(value: any): ObservableAny;
};
observableArray: {
(value: string[]): ObservableStringArray;
(value: any[]): ObservableAnyArray;
};
computed: {
(func: () => any): Computed;
};
}
将其放入“Knockout.d.ts”中，然后从您自己的文件中引用它。如您所见，它将极大地受益于泛型（根据规范提供）。
我只为 ko.observable() 做了几个接口，但是 ko.computed() 和 ko.observableArray() 可以很容易地添加到相同的模式中。更新：我修复了 subscribe() 的签名并添加了 computed() 和 observableArray() 的示例。
要从您自己的文件中使用，请在顶部添加：
/// <reference path="./Knockout.d.ts" />
declare var ko: Knockout;
试试我对 TypeScript 接口声明的实现（用简单的例子）
https://github.com/sv01a/TypeScript-Knockoutjs
在标记中声明淘汰绑定的方式不会发生任何变化，但是一旦为淘汰库编写接口，我们就会获得智能感知优势。在这方面，它就像jquery Sample一样工作，它有一个typescript 文件，其中包含大多数 jQuery api 的接口。
我认为如果您摆脱 ko 和 $ 的两个变量声明，您的代码将起作用。这些隐藏了在敲除和 jquery 脚本加载时创建的实际 ko 和 $ 变量。
我必须这样做才能将 Visual Studio 模板项目移植到淘汰赛：
应用程序.ts：
class GreeterViewModel {
timerToken: number;
utcTime: any;
constructor (ko: any) {
this.utcTime = ko.observable(new Date().toUTCString());
this.start();
}
start() {
this.timerToken = setInterval(() => this.utcTime(new Date().toUTCString()), 500);
}
}
window.onload = () => {
// get a ref to the ko global
var w: any;
w = window;
var myKO: any;
myKO = w.ko;
var el = document.getElementById('content');
myKO.applyBindings(new GreeterViewModel(myKO), el);
};
默认.htm:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="Scripts/knockout-2.1.0.debug.js" type="text/javascript"></script>
<script src="app.js"></script>
</head>
<body>
<h1>TypeScript HTML App</h1>
<div id="content" data-bind="text: utcTime" />
</body>
</html>
好的，只需使用以下命令导入淘汰赛类型或 tds。
npm install @types/knockout
这将在您的项目 node_modules 目录中创建一个 @types 目录，并且索引敲除类型定义文件将位于名为 knockout 的目录中。接下来，通过对类型文件的三斜杠引用。这将提供出色的 IDE 和 TypeScript 功能。
/// <reference path="../node_modules/@types/knockout/index.d.ts" />
最后，只需使用声明语句将 ko 变量带入作用域。这是强类型的，所以你好智能感知。
declare var ko: KnockoutStatic;
所以现在你可以像在你的 javascript 文件中一样使用 KO。
希望这可以帮助。
我正在使用https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/ 并且它具有 Knockout 的所有接口。