首页 文章

使用KnockoutJS的TypeScript

提问于
浏览 次
134

是否有任何使用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());
});
knockout.js typescript

6 回答

  • 57

    看看DefinitelyTyped .

    “流行JavaScript库的TypeScript类型定义存储库”

    回复于
  • 14

    我创建了这个小接口来获取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（）可以很容易地添加到相同的模式中 . Update: 我修复了subscribe（）的签名，并添加了computed（）和observableArray（）的示例 .

    要在您自己的文件中使用，请在顶部添加：

    /// <reference path="./Knockout.d.ts" />
declare var ko: Knockout;
    回复于
  • 1

    试试我对TypeScript接口声明的实现（用简单的例子）
    https://github.com/sv01a/TypeScript-Knockoutjs

    回复于
  • 2

    在标记中声明knockout绑定的方式没有任何改变，但是一旦为knockout库编写接口，我们就会获得intellisense良好性 . 在这方面它会像jquery Sample一样工作，它有typescript file containing interfaces for most of the jQuery api .

    我想如果你摆脱了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>
    回复于
  • 106

    我正在使用https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/并且它具有Knockout的所有接口 .

    回复于
  • 6

    好的，只需使用以下命令导入敲除类型或tds .

    npm install @types/knockout

    这将在项目node_modules目录中创建一个@types目录，索引淘汰类型定义文件将位于名为knockout的目录中 . 接下来，通过对类型文件的三斜杠引用 . 这将提供出色的IDE和TypeScript功能 .

    /// <reference path="../node_modules/@types/knockout/index.d.ts" />

    最后，只需使用declare语句将ko变量放入范围 . 这是强类型的，所以hello intellisense .

    declare var ko: KnockoutStatic;

    所以现在你可以像使用javascript文件一样使用KO .

    enter image description here

    希望这可以帮助 .

    回复于

相关问题