web-dev-qa-db-fra.com

TypeScript avec KnockoutJS

Existe-t-il des exemples 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 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());
});
knockout.jstypescript
135
CallumVass

Regardez DefinitelyTyped .

"Référentiel de définitions de types TypeScript pour les bibliothèques JavaScript populaires"

107
George Mavritsakis

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 faites-le référence à partir de vos propres fichiers. Comme vous pouvez le constater, les génériques (qui arrivent conformément aux spécifications) bénéficieraient grandement.

Je n'ai créé 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;
57
Sten L

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

14
Sv01a

Rien ne changerait en ce qui concerne la manière dont les liaisons masquées sont déclarées dans le balisage. Cependant, nous obtiendrions la qualité intellisense une fois que les interfaces auront été écrites pour la bibliothèque masquée. À cet égard, cela fonctionnerait exactement comme jquery Sample , qui a un fichier TypeScript 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 cachent les variables ko et $ réelles créées lors du chargement des scripts knockout et jquery.

Je devais le faire pour porter le projet de modèle Visual Studio à KO:

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>
6
Jeremy Danyow

Ok, utilisez simplement 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 de votre projet node_modules et le fichier de définition de type knockout d'index se trouvera dans un répertoire nommé knockout. Ensuite, via 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 amener 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.

enter image description here

J'espère que cela t'aides.

2
SimperT

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

2
JavaScript Linq