是否有任何使用POCKETOUTJS使用类型的样本?我只是好奇,以及他们如何一起工作?

编辑

这是我所拥有的,似乎工作

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());
});
.

有帮助吗?

解决方案

查看 demoditleytyped

“打字类型定义流行javascript库的存储库”

其他提示

我制作了这个小界面来获得敲除的静态类型:

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;
    };
}
.

将其放在“knagepout.d.ts”中,然后从您自己的文件中引用它。正如您所看到的,它将从泛型(根据规范即将到来)大大受益。

我只为ko.observable()为ko.observable()进行了一些接口,但Ko.Cuted()和ko.observableArray()可以轻松地以相同的模式添加。更新:我修复了subscribe()的签名,并添加了计算的()和deviewablearray()的示例。 要从您自己的文件中使用,请在顶部添加此:

/// <reference path="./Knockout.d.ts" />
declare var ko: Knockout;
.

试试我实现打字界面声明(简单示例)
https://github.com/sv01a/typescript-knockoutjs

在标记中宣布敲除绑定的方式没有任何改变,但是,一旦接口为淘汰赛库编写了界面,我们就会获得智能忠诚。在这方面,它就像 jQuery sample ,它具有包含大多数jQuery API 的接口的打字文件。

我认为如果您摆脱了KO和$ $您的代码的两个变量声明。这些正在隐藏在加载的敲除和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
.

这将在项目中创建一个@types目录node_modules目录,索引敲除类型定义文件将位于名为nocketout的目录中。 接下来,通过对类型文件的三级斜杠引用。这将提供很大的IDE和Cypescript功能。

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

最后,只需使用declare语句将ko变量带入范围。这是强烈打字的,如此您好智能敏感。

declare var ko: KnockoutStatic;
.

所以现在你可以在javascript文件中使用ko。

希望这有帮助。

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top