web-dev-qa-db-ja.com

KnockoutJSを使用したTypeScript

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());
});
knockout.jstypescript
135
CallumVass

DefinitelyTyped を見てください。

「一般的なJavaScriptライブラリのTypeScriptタイプ定義リポジトリ」

107
George Mavritsakis

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（）の署名を修正し、compute（）およびobservableArray（）の例を追加しました。

独自のファイルから使用するには、これを上部に追加します。

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

TypeScriptインターフェイス宣言の実現を試してください（簡単な例を使用）
https://github.com/sv01a/TypeScript-Knockoutjs

14
Sv01a

ノックアウトバインディングがマークアップで宣言される方法に関しては何も変わりませんが、インターフェイスがノックアウトライブラリ用に記述されれば、インテリセンスの良さを得ることができます。この点では、ほとんどのjQuery APIのインターフェイスを含む TypeScriptファイル を持つ jquery Sample と同様に機能します。

Koと$の2つの変数宣言を削除すると、コードが機能すると思います。これらは、ノックアウトおよび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>
6
Jeremy Danyow

それでは、次のコマンドを使用して、ノックアウトタイプまたはtdsをインポートしてください。

npm install @types/knockout

これにより、プロジェクトのnode_modulesディレクトリに@typesディレクトリが作成され、インデックスノックアウトタイプ定義ファイルはknockoutという名前のディレクトリに作成されます。次に、typesファイルへのトリプルスラッシュ参照を使用します。これにより、IDEおよびTypeScriptの優れた機能が提供されます。

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

最後に、declareステートメントを使用して、ko変数をスコープに入れます。これは強く型付けされているので、こんにちは、インテリセンスです。

declare var ko: KnockoutStatic;

したがって、Javascriptファイルと同じようにKOを使用できます。

enter image description here

お役に立てれば。

2
SimperT

https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/ を使用しており、Knockoutのすべてのインターフェイスがあります。

2
JavaScript Linq