TypeScript con KnockOutjs

Question

¿Hay alguna muestra de usar TypeScript con KnockOutjs?¿Sólo tengo curiosidad en cuanto a cómo trabajarían juntos?

Editar

aquí es lo que tengo, parece trabajar

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

Answer 1

Mira a definitivamentetyped .

"TypeScript Tipo Definiciones Repositorio para bibliotecas populares de JavaScript"

Answer 2

Hice esta pequeña interfaz para obtener tipos estáticos para 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;
    };
}

Ponlo en "kickout.d.ts" y luego haga referencia de sus propios archivos.Como puede ver, se beneficiaría mucho de los genéricos (que vienen de acuerdo con las especificaciones).

Solo hice algunas interfaces para ko.observable (), pero ko.computed () y ko.observableRayray () se pueden agregar fácilmente en el mismo patrón. Actualización: fijé las firmas para suscribirse () y se agregaron ejemplos de computación () y observableRray ().

Para usar desde su propio archivo, agregue esto en la parte superior:

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

Answer 3

Pruebe mi realización de las declaraciones de interfaz de Typescript (con un ejemplo simple)
https://github.com/sv01a/typescript-knockoutjs

Answer 4

Nada cambiaría en términos de la forma en que se declaran los enlaces de Knockout en el markup, sin embargo, obtendríamos la bondad de IntelliSense una vez que las interfaces se escriban para la Biblioteca Knockout.A este respecto, funcionaría como el ejemplo de jquery , que tiene un TIPERSCRIPTO ARCHIVO QUE CONTENIDO INTERFACES PARA LA PRÚTR DEL JQUERY API .

Creo que si se deshace de las dos declaraciones variables para KO y $ su código funcionará.Estos están ocultando las variables reales de KO y $ que se crearon cuando se cargaron los scripts de Knockout y JQery.

Tuve que hacer esto al proyecto de plantilla Visual Studio a 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

Estoy usando https://www.nuget.org/packages/knockout.editables.typescript.definitytyped / Y tiene todas las interfaces para nocaut.

Answer 6

OK, así que solo use el siguiente comando para importar los tipos eliminatorios o TDS.

npm install @types/knockout

Esto creará un directorio @types en el directorio de los proyectos node_modules y el archivo de definición de tipo kickout de índice estará en un directorio llamado Knockout. A continuación, a través de una referencia de triple slash al archivo de tipos.Esto le dará a grandes funciones IDE y TypeScript.

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

Finalmente, solo use una declaración Declare para llevar la variable KO en alcance.Esto está fuertemente escrito, así que hola Intellisense.

declare var ko: KnockoutStatic;

Así que ahora puede usar Ko como en sus archivos de Javascript.

Espero que esto ayude.