TypeScript与KnockoutJS
有KnockoutJS使用TypeScript的样本吗？ 我只是好奇他们将如何一起工作？
编辑
这是我的，似乎工作
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()); });
看看DefinitelyTyped 。
“stream行JavaScript库的TypeScripttypes定义库”
我做了这个小界面来获取Knockout的静态types：
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”，然后从你自己的文件中引用它。 正如您所看到的，它将从generics（根据规范即将到来）中大大受益。
我只为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
在标记中声明敲除绑定的方式并不会改变，但是一旦为knockout库编写接口，我们就能获得智能感知的好处。 在这方面，它将像jquery Sample一样工作，它有一个包含大部分jQuery api的接口的打字稿文件 。
我想如果你摆脱了两个variables声明为和$你的代码将工作。 这些隐藏了当knockout和jquery脚本加载时创build的实际的ko和$variables。
我必须做到这一点，以移植视觉工作室模板项目淘汰赛：
app.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); };
Default.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>
我使用的是https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/ ，它拥有Knockout的所有接口。
好吧，只需使用以下命令来导入敲除types或tds。
npm install @types/knockout
这将在您的项目node_modules目录中创build@types目录，并且索引挖空types定义文件将位于名为knockout的目录中。 接下来，通过对types文件的三斜杠引用。 这将提供良好的IDE和TypeScriptfunction。
/// <reference path="../node_modules/@types/knockout/index.d.ts" />
最后，只需使用声明语句将kovariables带入作用域即可。 这是强types，所以你好intellisense。
declare var ko: KnockoutStatic;
所以现在你可以像使用JavaScript文件一样使用KO了。
希望这可以帮助。
