Texte dactylographié avec KnockoutJS

Question

Y at-il aucun échantillon d’utilisation de texte dactylographié avec KnockoutJS ? Je suis juste curieux de savoir comment ils travailleraient ensemble ?

Edit

Voici ce que j’ai, semble fonctionner

Cette opération génère dans le code Javascript suivant :

Answer 1

Regardez DefinitelyTyped.

« Tapuscrit type définitions référentiel pour les bibliothèques JavaScript populaires »

Answer 2

J'ai fait cette petite interface pour obtenir des types statiques pour knock-out:

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

Mettre dans "knock-out.d.ts" et ensuite de référence à partir de vos propres fichiers. Comme vous pouvez le voir, il bénéficierait grandement d'génériques (qui sont à venir selon les spécifications).

J'ai seulement fait quelques interfaces pour ko.observables(), mais ko.calculer() et ko.observableArray() peut être facilement ajouté dans le même modèle. Mise à jour: j'ai corrigé les signatures pour s'abonner() et ajout d'exemples de calculer() et observableArray().

À utiliser à partir de votre propre fichier, ajouter en haut:

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

Answer 3

Essayer ma réalisation des déclarations d’interface texte dactylographié (par exemple simple)
https://github.com/sv01a/TypeScript-Knockoutjs

Answer 4

Rien n'aurait changé dans la façon dont knock-out liaisons sont déclarées dans le balisage cependant, nous aurions l'intellisense bonté, une fois les interfaces sont écrits pour le knock-out de la bibliothèque. À cet égard, il pourrait fonctionner comme le jquery Exemple, qui dispose d'un fichier d'enregistrement de fichier contenant des interfaces pour la plupart de l'api jQuery.

Je pense que si vous vous débarrasser de la deux déclarations de variables pour ko $ et votre code fonctionne. Ce sont masquant la véritable ko $ et variables qui ont été créés lorsque le knock-out et de scripts jquery chargé.

J'ai eu à faire à port visual studio projet de modèle de knock-out:

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>