Tapuscrit avec KnockoutJS

Question

Tapuscrit avec KnockoutJS

voix

132

Y at-il d'utiliser l'échantillon avec tapuscrit KnockoutJS? Je suis 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());
});

knockout.js typescript

Créé 02/10/2012 à 12:52
source utilisateur CallumVass

Dans d'autres langues...

6 réponses

voix

57

J'ai fait cette petite interface pour obtenir les 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;
    };
}

Mettez-le dans « Knockout.d.ts » puis référencer à partir de vos propres fichiers. Comme vous pouvez le voir, il bénéficierait grandement de médicaments génériques (qui viennent selon les spécifications).

Je ne fait quelques interfaces pour ko.observable (), mais ko.computed () et ko.observableArray () peut être facilement ajouté dans le même schéma. Mise à jour: je fixe les signatures pour souscrire () et ajouté des exemples de calculés () et observableArray ().

Pour utiliser à partir de votre propre fichier, ajoutez au sommet:

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

Créé 02/10/2012 à 15:23
source utilisateur Sten L

voix

14

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

Créé 05/10/2012 à 06:47
source utilisateur Sv01a

voix

6

Rien ne changerait en termes de liaisons knock - out sont ainsi déclarés dans le balisage mais nous aurions la bonté IntelliSense une fois que les interfaces sont écrites pour la bibliothèque de knock - out. À cet égard , il fonctionnerait comme l' échantillon jquery , qui a un fichier contenant tapuscrit interfaces pour la plupart des api jQuery .

Je pense que si vous vous débarrasser des deux déclarations de variables pour ko et votre code fonctionnera $. Ceux-ci se cachent le ko réel et les variables $ qui ont été créés lorsque les scripts de knock-out et jquery chargés.

Je devais le faire au port le projet de modèle de visual studio à élimination directe:

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>

Créé 02/10/2012 à 15:02
source utilisateur Jeremy Danyow

voix

2

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

Créé 17/08/2015 à 11:34
source utilisateur JavaScript Linq

voix

0

Ok, donc il suffit d'utiliser la commande suivante pour importer les types de knock-out ou tds.

npm install @types/knockout

Cela va créer un répertoire @types dans le répertoire de vos projets et le fichier de type à élimination directe de l'index de définition sera dans un répertoire nommé knock-out. Ensuite, à travers une triple référence-slash dans le fichier types. Cela vous donnera une grande IDE et fonctionnalités tapuscrit.

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

Enfin, il suffit d'utiliser une instruction DECLARE pour apporter la variable ko dans le périmètre. Ceci est fortement typé si bonjour IntelliSense.

declare var ko: KnockoutStatic;

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

J'espère que cela t'aides.

Créé 04/10/2017 à 22:35
source utilisateur SimperT

George Mavritsakis · Accepted Answer · 2012-10-26 11:46

voix

105

L'auteur de la question a pris cette réponse comme la meilleure.

Regardez DefinitelyTyped .

« Définitions de type tapuscrit référentiel pour les bibliothèques populaires JavaScript »

Créé 26/10/2012 à 11:46
source utilisateur George Mavritsakis