Dattilografo con knockoutjs.

Question

C'è qualche campione di usare dattiloscritto con knockoutjs?Sono solo curioso di sapere come avrebbero lavorato insieme?

modifica

Ecco cosa ho, sembra funzionare

declare var ko: any;
declare var $: any;
class ViewModel {
    x = ko.observable(10);
    y = ko.observable(10);

}

$(() => {
    ko.applyBindings(new ViewModel());
});

.

Questo genera nel seguente javascript:

var ViewModel = (function () {
    function ViewModel() {
        this.x = ko.observable(10);
        this.y = ko.observable(10);
    }
    return ViewModel;
})();
$(function () {
    ko.applyBindings(new ViewModel());
});

.

Answer 1

Guarda Definishelyped .

"DEFINIZIONI DI DEFINIZIONI DI TIPO DEFINIZIONI PER POPORIE GIAVASTRICT"

Answer 2

Ho fatto questa piccola interfaccia per ottenere tipi statici per 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;
    };
}

.

Mettilo in "knockout.d.ts" e poi lo fa riferimento dai tuoi file.Come puoi vedere, beneficerebbe molto dai generici (che stanno venendo in base alle specifiche).

Ho fatto solo alcune interfacce per ko.observable (), ma ko.computed () e ko.observablearay () possono essere facilmente aggiunti nello stesso schema. Aggiornamento: Ho riparato le firme per ISCRIVITI () e aggiunti esempi di calcolo () e OsservableArRay ().

Da utilizzare dal tuo file, aggiungilo in alto:

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

.

Answer 3

Prova la mia realizzazione di Dichiarazioni di interfaccia dattiloscritti (con un semplice esempio)
https://github.com/sv01a/typescript-knockoutjs

Answer 4

Nulla cambierebbe in termini di modo in cui i binding knockout sono dichiarati nel markup Tuttavia avremmo ricevuto la bontà Intellisense una volta scritta le interfacce per la Biblioteca Knockout.A questo proposito, funzionerebbe proprio come il jquery sample , che ha un File dattiloscritto contenente interfacce per la maggior parte dell'API jQuery .

Penso che se ti sbarazzi delle due dichiarazioni variabili per Ko e $ il tuo codice funzionerà.Questi stanno nascondendo le variabili Ko e $ effettiva create quando vengono caricati gli script Knockout e JQuery.

Ho dovuto farlo per portare il progetto del modello di Visual Studio per 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);
};

.

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>

.

Answer 5

Sto usando https://www.nuget.org/packages/knockout.editables.TyPescript.DefiniteLypet / . E ha tutte le interfacce per Knockout.

Answer 6

OK quindi utilizzare il seguente comando per importare i tipi di knockout o TDS.

npm install @types/knockout

.

Creererà una directory @types nella directory dei progetti Node_Modules e il file di definizione del tipo di emorbio di indice sarà in una directory chiamata Knockout. Quindi, attraverso un riferimento a triple-slash al file dei tipi.Questo darà grandi funzionalità IDE e dattiloscritti.

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

.

Infine, usa solo una dichiarazione di dichiarazione per portare la variabile KO in portata.Questo è fortemente digitato così ciao intellisense.

declare var ko: KnockoutStatic;

.

Così ora puoi usare KO proprio come nei tuoi file JavaScript.

Spero che questo aiuti.