使用KnockoutJS的TypeScript
Cal*_*ass 136 knockout.js typescript
是否有任何使用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());
});
Geo*_*kis 108
"流行JavaScript库的TypeScript类型定义存储库"
- 情况确实如此.如果您在记事本中编写了打字稿代码,则只需要在编译时进行定义.另一方面,打字稿的一个优点是,视觉工作室(以及其他编辑通过插件)易于理解您的代码,它可以帮助您完成自动完成并执行类型和错误检查(更多比JavaScript).这就是为什么我们将定义文件用于用JavaScript编写的代码,以便提供打字稿类型检查.当然你可以将libs声明为"any",但这并不好.我帮助了! (9认同)
- 请注意,关键是将`/// <reference path ="knockout-2.2.d.ts"/>`添加到.ts文件的顶部,以便它获取定义. (5认同)
- 这可能是一个愚蠢的问题,但你能解释一下TypeScript类型定义到底是什么吗？纯粹是这样你可以在没有编译器抱怨的情况下在TypeScript编译的文件中使用库函数吗？如果是这种情况,您就不需要在应用程序中引用该定义,只需在编译ts文件时,是否正确？ (3认同)
Ste*_*n L 58
我创建了这个小接口来获取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;
- @JcFx:Anders所提到的可能是获取TypeScript .ts文件并输出接口声明文件.d.ts的选项.没有办法采用常规的无类型JavaScript并神奇地发现类型.JS(TypeScripts试图解决)的问题在于,程序员无法声明她的意图,即变量应该符合特定类型.当你在JS中说'x ='hello'`时,我们不知道你是否打算在你的代码中稍后某处说'x = 34`.我们可以推断出x的类型. (2认同)
在标记中声明knockout绑定的方式没有任何改变,但是一旦为knockout库编写接口,我们就会获得intellisense良好性.在这方面,它可以像jquery Sample一样工作,它有一个包含大多数jQuery api接口的typescript文件.
我想如果你摆脱了ko和$的两个变量声明你的代码将起作用.这些隐藏了加载knockout和jquery脚本时创建的实际ko和$变量.
我必须这样做才能将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的:
<!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类型定义文件将位于名为knockout的目录中。接下来，通过三斜杠引用类型文件。这将提供出色的 IDE 和 TypeScript 功能。
/// <reference path="../node_modules/@types/knockout/index.d.ts" />
最后，只需使用声明语句将 ko 变量引入作用域即可。这是强类型的，所以你好智能感知。
declare var ko: KnockoutStatic;
现在您可以像在 javascript 文件中一样使用 KO。
希望这可以帮助。
| 归档时间： |
|
| 查看次数： |
49659 次 |
| 最近记录： |