Dattiloscritto con KnockoutJS

Question

Dattiloscritto con KnockoutJS

voti

132

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

modificare

Ecco quello che ho, sembra funzionare

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

}

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

Ciò genera nelle seguenti Javascript:

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

È pubblicato 02/10/2012 alle 12:52
fonte dall'utente CallumVass

In altre lingue...

6 risposte

voti

57

Ho fatto questo piccolo interfaccia per ottenere i 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;
    };
}

Metti in "Knockout.d.ts" e quindi fare riferimento da propri file. Come si può vedere, sarebbe di grande beneficio dei generici (che stanno arrivando in base alle specifiche).

Ho fatto solo poche interfacce per ko.observable (), ma ko.computed () e ko.observableArray () può essere facilmente aggiunto nello stesso modello. Aggiornamento: Ho fissato le firme per la sottoscrizione () ed esempi di computerizzata () e observableArray () ha aggiunto.

Per utilizzare dal tuo file, aggiungere questo al vertice:

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

Risposto il 02/10/2012 a 15:23
fonte dall'utente Sten L

voti

14

Provare la mia realizzazione di dichiarazioni di interfaccia dattiloscritto (con semplice esempio)
https://github.com/sv01a/TypeScript-Knockoutjs

Risposto il 05/10/2012 a 06:47
fonte dall'utente Sv01a

voti

6

Nulla sarebbe cambiato per quanto riguarda il modo in cui attacchi eliminazione diretta sono dichiarati nella marcatura però che avremmo avuto la bontà intellisense una volta che le interfacce sono scritti per la libreria eliminazione diretta. A questo proposito avrebbe funzionato proprio come il campione jQuery , che ha un file di dattiloscritto che contiene interfacce per la maggior parte delle API jQuery .

Penso che se si sbarazzarsi delle due dichiarazioni delle variabili per ko e $ il codice funzionerà. Questi si nascondono il reale ko e $ variabili che sono stati creati quando gli script ad eliminazione diretta e jQuery caricati.

Ho dovuto fare questo in porto il progetto modello di Visual Studio a eliminazione diretta:

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>

Risposto il 02/10/2012 a 15:02
fonte dall'utente Jeremy Danyow

voti

2

Sto usando https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/ e dispone di tutte le interfacce per Knockout.

Risposto il 17/08/2015 a 11:34
fonte dall'utente JavaScript Linq

voti

0

Ok, quindi basta usare il seguente comando per importare i tipi ad eliminazione diretta o TDS.

npm install @types/knockout

Questo creerà una directory @types nella directory vostri progetti node_modules e il file di definizione del tipo di indice ad eliminazione diretta sarà in una directory chiamata ad eliminazione diretta. Successivamente, attraverso un riferimento tripla-slash al file tipi. Questo darà grande IDE e caratteristiche dattiloscritto.

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

Infine, basta usare una dichiarazione declare per portare la variabile ko in ambito. Questo è fortemente-digitato in modo ciao IntelliSense.

declare var ko: KnockoutStatic;

Così ora è possibile utilizzare KO proprio come nei file javascript.

Spero che questo ti aiuti.

Risposto il 04/10/2017 a 22:35
fonte dall'utente SimperT

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

voti

105

L'autore ha accettato questa risposta come la migliore.

Guarda DefinitelyTyped .

"Definizioni dattiloscritto tipo di archivio per biblioteche popolari JavaScript"

Risposto il 26/10/2012 a 11:46
fonte dall'utente George Mavritsakis