typescript 带有 KnockoutJS 的打字稿
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12689716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TypeScript with KnockoutJS
提问by CallumVass
Is there any sample of using TypeScript with KnockoutJS? I'm just curious as to how they would work together?
是否有将 TypeScript 与 KnockoutJS 一起使用的示例？我只是好奇他们将如何合作？
Edit
编辑
Here is what I have, seems to work
这是我所拥有的，似乎有效
declare var ko: any;
declare var $: any;
class ViewModel {
x = ko.observable(10);
y = ko.observable(10);
}
$(() => {
ko.applyBindings(new ViewModel());
});
This generates into the following Javascript:
这会生成以下 Javascript：
var ViewModel = (function () {
function ViewModel() {
this.x = ko.observable(10);
this.y = ko.observable(10);
}
return ViewModel;
})();
$(function () {
ko.applyBindings(new ViewModel());
});
采纳答案by George Mavritsakis
Look at DefinitelyTyped.
看看绝对类型。
"TypeScript type definitions repository for popular JavaScript libraries"
“流行 JavaScript 库的 TypeScript 类型定义存储库”
回答by Sten L
I made this little interface to get static types for Knockout:
我制作了这个小接口来获取 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;
};
}
Put it in "Knockout.d.ts" and then reference it from your own files. As you can see, it would benefit greatly from generics (which are coming according to the specs).
将它放在“Knockout.d.ts”中，然后从您自己的文件中引用它。如您所见，它会从泛型（根据规范而来）中受益匪浅。
I only made a few interfaces for ko.observable(), but ko.computed() and ko.observableArray() can be easily added in the same pattern. Update:I fixed the signatures for subscribe() and added examples of computed() and observableArray().
我只为 ko.observable() 做了几个接口，但是 ko.computed() 和 ko.observableArray() 可以很容易地以相同的模式添加。更新：我修复了 subscribe() 的签名并添加了计算 () 和 observableArray() 的示例。
To use from your own file, add this at the top:
要从您自己的文件中使用，请在顶部添加：
/// <reference path="./Knockout.d.ts" />
declare var ko: Knockout;
回答by Sv01a
Try my realisation of TypeScript interface declarations (with simple example)
https://github.com/sv01a/TypeScript-Knockoutjs
试试我对 TypeScript 接口声明的实现（用简单的例子）
https://github.com/sv01a/TypeScript-Knockoutjs
回答by Jeremy Danyow
Nothing would change in terms of the way knockout bindings are declared in the markup however we would get the intellisense goodness once the interfaces are written for the knockout library. In this respect it would work just like the jquery Sample, which has a typescript file containing interfaces for most of the jQuery api.
在标记中声明敲除绑定的方式不会发生任何变化，但是一旦为敲除库编写了接口，我们就会获得智能感知的好处。在这方面，它就像jquery Sample一样工作，它有一个包含大多数 jQuery api 接口的打字稿文件。
I think if you get rid of the two variable declarations for ko and $ your code will work. These are hiding the actual ko and $ variables that were created when the knockout and jquery scripts loaded.
我想如果你去掉 ko 和 $ 的两个变量声明，你的代码就可以工作了。这些隐藏了在加载淘汰赛和 jquery 脚本时创建的实际 ko 和 $ 变量。
I had to do this to port the visual studio template project to knockout:
我必须这样做才能将 Visual Studio 模板项目移植到淘汰赛中：
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:
默认.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>
回答by JavaScript Linq
I am using https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/and it has all interfaces for Knockout.
我正在使用https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/并且它具有用于 Knockout 的所有接口。
回答by SimperT
Ok so just use the following command to import the knockout types or tds.
好的，只需使用以下命令导入敲除类型或 tds。
npm install @types/knockout
This will create a @types directory in your projects node_modules directory and the index knockout type definition file will be in a directory named knockout. Next, through a triple-slash reference to the types file. This will give great IDE and TypeScript features.
这将在您的项目 node_modules 目录中创建一个 @types 目录，索引敲除类型定义文件将在名为 Knockout 的目录中。接下来，通过对类型文件的三斜杠引用。这将提供出色的 IDE 和 TypeScript 功能。
/// <reference path="../node_modules/@types/knockout/index.d.ts" />
Finally, just use a declare statement to bring the ko variable into scope. This is strongly-typed so hello intellisense.
最后，只需使用声明语句将 ko 变量引入作用域。这是强类型的，所以你好智能感知。
declare var ko: KnockoutStatic;
So now you can use KO just like in your javascript files.
所以现在你可以像在你的 javascript 文件中一样使用 KO。
Hope this helps.
希望这可以帮助。
