TypeScript avec KnockoutJS

Question

TypeScript avec KnockoutJS

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

Modifier

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

132

knockout.js typescript

demandé sur CallumVass 2012-10-02 15:52:20

6 réponses

score 105 · Answer 1

Regardez DefinitelyTyped.

"référentiel de définitions de type TypeScript pour les bibliothèques JavaScript Populaires"

score 57 · Answer 2

J'ai fait 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 " et 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 viennent selon les spécifications).

Je n'ai fait que quelques interfaces pour ko.observables(), mais ko.calculé () et ko.observableArray() peut être facilement ajouté dans le même modèle. Update: 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;

score 14 · Answer 3

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

score 6 · Answer 4

Rien ne changerait en termes de 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 comme le jQuery Sample , qui a un fichier typescript contenant des interfaces pour la plupart de l'api jQuery .

Je pense que si vous vous débarrassez des deux déclarations de variables pour ko et $ votre code fonctionnera. Ceux-ci cachent le ko réel et $ variables créées lors du chargement des scripts knockout et jquery.

J'ai dû le faire pour porter le projet de modèle visual studio à 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>

score 2 · Answer 5

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

score 1 · Answer 6

Ok, il suffit donc d'utiliser la commande suivante pour importer les types 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 de type knockout index sera dans un répertoire nommé knockout. Ensuite, à travers une référence Triple-slash au fichier types. Cela donnera de grandes 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;

Maintenant, vous pouvez utiliser KO comme dans vos fichiers javascript.

J'espère que cela aide.

Las etiquetas más populares

TypeScript avec KnockoutJS

Modifier

6 réponses