Mecanografiado con KnockoutJS

Question

Mecanografiado con KnockoutJS

votos

132

¿Hay alguna muestra de la utilización de mecanografiado con KnockoutJS? Sólo soy curioso en cuanto a cómo trabajarían juntos?

Editar

Aquí es lo que tengo, parece funcionar

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

}

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

Esto genera en el siguiente 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

Publicado el 02/10/2012 a las 12:52
fuente por usuario CallumVass

En otros idiomas...

6 respuestas

votos

57

Hice esta pequeña interfaz para obtener tipos estáticos para el golpe de gracia:

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

Ponerlo en "Knockout.d.ts" y luego hacer referencia a ella desde sus propios archivos. Como se puede ver, se beneficiaría enormemente de los genéricos (que vienen de acuerdo a las especificaciones).

Sólo hice un par de interfaces para ko.observable (), pero ko.computed () y ko.observableArray () se pueden agregar fácilmente en el mismo patrón. Actualización: He arreglado las firmas para suscribirse () y se añadió ejemplos de computarizada () y observableArray ().

Para utilizar desde su propio archivo, agregue esta en la parte superior:

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

Respondida el 02/10/2012 a las 15:23
fuente por usuario Sten L

votos

14

Prueba mi realización de declaraciones de interfaz mecanografiado (con sencillo ejemplo)
https://github.com/sv01a/TypeScript-Knockoutjs

Respondida el 05/10/2012 a las 06:47
fuente por usuario Sv01a

votos

6

Nada cambiaría en cuanto a la forma fijaciones knockout se declaran en el margen de beneficio que se pueden conseguir sin embargo la bondad intelisense una vez que las interfaces están escritas para la biblioteca de final. En este sentido, funcionaría igual que el de la muestra de jQuery , que tiene un fichero de transcripción que contiene interfaces para la mayor parte de la API de jQuery .

Creo que si se deshace de las dos declaraciones de variables para ko y $ su código funcionará. Estos se esconden el ko actual y las variables $ que se crea cuando los guiones knockout y jQuery cargados.

Tenía que hacer esto para portar el proyecto de plantilla de Visual Studio a octavos de final:

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>

Respondida el 02/10/2012 a las 15:02
fuente por usuario Jeremy Danyow

votos

2

Estoy usando https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/ y tiene todas las interfaces para Knockout.

Respondida el 17/08/2015 a las 11:34
fuente por usuario JavaScript Linq

votos

0

Ok por lo que sólo tiene que utilizar el siguiente comando para importar los tipos knockout o TDS.

npm install @types/knockout

Esto creará un directorio en el directorio @types sus proyectos node_modules y el archivo de definición de tipo de índice de golpe de gracia estará en un nocaut en el directorio especificado. A continuación, a través de una referencia de triple barra en el fichero de tipos. Esto le dará una gran IDE y características mecanografiado.

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

Por último, sólo tiene que utilizar una instrucción declare para llevar la variable ko en el alcance. Esto es de tipo fuerte de modo hola IntelliSense.