TypeScript mit KnockoutJS

Gibt es ein Beispiel für die Verwendung von TypeScript mit KnockoutJS? Ich bin nur neugierig, wie sie zusammenarbeiten würden.

Bearbeiten

Hier ist was ich habe, scheint zu funktionieren

declare var ko: any;
declare var $: any;
class ViewModel {
    x = ko.observable(10);
    y = ko.observable(10);

}

$(() => {
    ko.applyBindings(new ViewModel());
});

Dies führt zu folgendem Javascript:

var ViewModel = (function () {
    function ViewModel() {
        this.x = ko.observable(10);
        this.y = ko.observable(10);
    }
    return ViewModel;
})();
$(function () {
    ko.applyBindings(new ViewModel());
});

Schauen Sie sich DefinitelyTyped an .

"Repository für TypeScript-Typdefinitionen für beliebte JavaScript-Bibliotheken"

Ich habe diese kleine Schnittstelle erstellt, um statische Typen für Knockout zu erhalten:

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

Fügen Sie es in "Knockout.d.ts" ein und verweisen Sie es dann aus Ihren eigenen Dateien. Wie Sie sehen können, würde es stark von Generika profitieren (die gemäß den Spezifikationen kommen).

Ich habe nur ein paar Schnittstellen für ko.observable () erstellt, aber ko.computed () und ko.observableArray () können problemlos im selben Muster hinzugefügt werden. Update: Ich habe die Signaturen für subscribe () korrigiert und Beispiele für computed () und ObservableArray () hinzugefügt.

Fügen Sie dies oben hinzu, um es aus Ihrer eigenen Datei zu verwenden:

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

Versuchen Sie meine Realisierung von TypeScript-Schnittstellendeklarationen (mit einfachem Beispiel)
https://github.com/sv01a/TypeScript-Knockoutjs

An der Art und Weise, wie Knockout-Bindungen im Markup deklariert werden, würde sich nichts ändern. Wir würden jedoch die Intellisense-Güte erhalten, sobald die Schnittstellen für die Knockout-Bibliothek geschrieben sind. In dieser Hinsicht würde es genauso funktionieren wie das jquery-Beispiel , das eine Typoskriptdatei enthält, die Schnittstellen für die meisten jQuery-APIs enthält .

Ich denke, wenn Sie die beiden Variablendeklarationen für ko und $ loswerden, wird Ihr Code funktionieren. Diese verbergen die tatsächlichen Ko- und $ -Variablen, die beim Laden der Knockout- und JQuery-Skripte erstellt wurden.

Ich musste dies tun, um das Visual Studio-Vorlagenprojekt auf Knockout zu portieren:

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>

Ok, verwenden Sie einfach den folgenden Befehl, um die Knockout-Typen oder tds zu importieren.

npm install @types/knockout

Dadurch wird ein @ types-Verzeichnis im Verzeichnis node_modules Ihres Projekts erstellt, und die Definitionsdatei für den Index-Knockout-Typ befindet sich in einem Verzeichnis mit dem Namen knockout. Als nächstes durch einen dreifachen Schrägstrich auf die Typendatei. Dies bietet großartige IDE- und TypeScript-Funktionen.

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

Verwenden Sie zum Schluss einfach eine declare-Anweisung, um die ko-Variable in den Gültigkeitsbereich zu bringen. Dies ist stark typisiert, also hallo Intellisense.

declare var ko: KnockoutStatic;

Jetzt können Sie KO genau wie in Ihren Javascript-Dateien verwenden.

Hoffe das hilft.

Ich verwende https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/ und es hat alle Schnittstellen für Knockout.