Typescript avec knockoutjs

Question

Y a-t-il un échantillon d'utilisation dockingscript avec knockoutjs?Je suis juste curieux de savoir comment ils travailleraient ensemble?

Edit

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

Ceci génère dans 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());
});

Answer 1

regarde définitivement typable .

"Définitions de type Typescript Dépositoire pour les bibliothèques JavaScript populaires"

Answer 2

J'ai fait cette petite interface pour obtenir des types statiques pour KNOKOUT:

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 y référence à partir de vos propres fichiers.Comme vous pouvez le constater, cela 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.observablarray () peuvent être facilement ajoutés dans le même motif. MISE À JOUR: J'ai corrigé les signatures de souscription () et ajout d'exemples de calculé () et d'observablearray ().

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

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

Answer 3

Essayez ma réalisation de déclarations d'interface dossier (avec exemple simple)
https://github.com/sv01a/typescript-nockoutjs

Answer 4

Rien ne changerait de manière à ce que les liaisons Knockout sont déclarées dans le balisage, mais nous recevrions la bonté IntelliSense une fois que les interfaces sont écrites pour la bibliothèque Knockout.À cet égard, cela fonctionnerait comme le jQuery Sample , qui a un fichier dossier contenant des interfaces pour la plupart des API de JQuery .

Je pense que si vous vous débarrassez des deux déclarations variables pour KO et votre code de votre code fonctionnera.Celles-ci cachent les variables KO et $ $ créées lorsque les scripts KNO et JQuery sont chargés.

Je devais faire cela pour porter le projet Visual Studio Modèle à 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);
};

par défaut.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>

Answer 5

J'utilise https://www.nuget.org/packages/knockout.editaltables.typescript.definitytyped / et il a toutes les interfaces pour KO.

Answer 6

OK, alors utilisez simplement la commande suivante pour importer les types de KO ou TDS.

npm install @types/knockout

Ceci créera un répertoire @Type dans vos projets Node_Modules et le fichier de définition de type Knockout Index sera dans un répertoire nommé KO KOout. Ensuite, à travers une référence triple-slash au fichier de types.Cela donnera des fonctionnalités de l'IDE et des documents dossiers.

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

Enfin, utilisez simplement une déclaration de déclaration pour amener la variable KO dans la portée.Ceci est fortement tapé donc Hello IntelliSense.

declare var ko: KnockoutStatic;

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

J'espère que cela aide.