TypeScript avec KnockoutJS

Existe-t-il un exemple d'utilisation de TypeScript avec KnockoutJS? Je suis juste curieux de savoir comment ils travailleraient ensemble?

Éditer

Voici ce que j'ai, semble fonctionner

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

}

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

Cela génère le Javascript suivant:

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

Regardez DefinatelyTyped .

«Référentiel de définitions de type TypeScript pour les bibliothèques JavaScript populaires»

J'ai créé cette petite interface pour obtenir des types statiques pour 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;
    };
}

Mettez-le dans "Knockout.d.ts" puis référencez-le à partir de vos propres fichiers. Comme vous pouvez le voir, il bénéficierait grandement des génériques (qui arrivent selon les spécifications).

Je n'ai fait que quelques interfaces pour ko.observable (), mais ko.computed () et ko.observableArray () peuvent être facilement ajoutés dans le même modèle. Mise à jour: J'ai corrigé les signatures pour subscribe () et ajouté des exemples de computed () et observableArray ().

Pour utiliser à partir de votre propre fichier, ajoutez ceci en haut:

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

Essayez ma réalisation des déclarations d'interface TypeScript (avec un exemple simple)
https://github.com/sv01a/TypeScript-Knockoutjs

Rien ne changerait en ce qui concerne la façon dont les liaisons knockout sont déclarées dans le balisage, mais nous obtiendrions la bonté intellisense une fois que les interfaces sont écrites pour la bibliothèque knockout. À cet égard, cela fonctionnerait exactement comme l' exemple jquery , qui a un fichier dactylographié contenant des interfaces pour la plupart des API jQuery .

Je pense que si vous vous débarrassez des deux déclarations de variables pour ko et $, votre code fonctionnera. Celles-ci masquent les variables ko et $ réelles qui ont été créées lors du chargement des scripts knockout et jquery.

J'ai dû faire cela pour porter le projet de modèle de studio visuel à knockout:

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, utilisez simplement la commande suivante pour importer les types de knockout ou tds.

npm install @types/knockout

Cela créera un répertoire @types dans le répertoire node_modules de vos projets et le fichier de définition du type de knockout d'index sera dans un répertoire nommé knockout. Ensuite, par une référence triple barre oblique au fichier de types. Cela donnera d'excellentes fonctionnalités IDE et TypeScript.

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

Enfin, utilisez simplement une instruction declare pour mettre la variable ko dans la portée. Ceci est fortement typé alors bonjour intellisense.

declare var ko: KnockoutStatic;

Alors maintenant, vous pouvez utiliser KO comme dans vos fichiers javascript.

J'espère que cela t'aides.

J'utilise https://www.nuget.org/packages/knockout.editables.TypeScript.DefinatelyTyped/ et il a toutes les interfaces pour Knockout.