TypeScript com KnockoutJS

Existe algum exemplo de uso do TypeScript com o KnockoutJS? Só estou curioso para saber como eles trabalhariam juntos.

Editar

Aqui está o que eu tenho, parece funcionar

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

}

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

Isso gera o seguinte Javascript:

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

Veja DefinitelyTyped .

"Repositório de definições de tipo TypeScript para bibliotecas JavaScript populares"

Eu fiz essa pequena interface para obter tipos estáticos para o 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;
    };
}

Coloque-o em "Knockout.d.ts" e faça referência a partir de seus próprios arquivos. Como você pode ver, ele se beneficiaria muito com os genéricos (que são fornecidos de acordo com as especificações).

Eu fiz apenas algumas interfaces para ko.observable (), mas ko.computed () e ko.observableArray () podem ser facilmente adicionados no mesmo padrão. Atualização: Corrigi as assinaturas de subscribe () e adicionei exemplos de computed () e observableArray ().

Para usar em seu próprio arquivo, adicione-o na parte superior:

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

Tente minha realização das declarações da interface TypeScript (com exemplo simples)
https://github.com/sv01a/TypeScript-Knockoutjs

Nada mudaria em termos da maneira como as ligações de knockout são declaradas na marcação, no entanto, obteríamos a bondade intellisense assim que as interfaces fossem escritas para a biblioteca de knockout. Nesse aspecto, funcionaria exatamente como o jquery Sample , que possui um arquivo datilografado contendo interfaces para a maioria das APIs do jQuery .

Eu acho que se você se livrar das duas declarações de variáveis ​​para ko e $, seu código funcionará. Eles estão ocultando as variáveis ​​ko e $ reais que foram criadas quando os scripts knockout e jquery foram carregados.

Eu tive que fazer isso para portar o projeto de modelo do visual studio para nocaute:

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>

Ok, basta usar o seguinte comando para importar os tipos de knockout ou tds.

npm install @types/knockout

Isso criará um diretório @types no diretório node_modules do seu projeto e o arquivo de definição do tipo knockout do índice estará em um diretório chamado knockout. Em seguida, através de uma referência de barra tripla para o arquivo de tipos. Isso fornecerá ótimos recursos de IDE e TypeScript.

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

Por fim, basta usar uma declaração declare para trazer a variável ko para o escopo. Isso é fortemente tipado, então olá intellisense.

declare var ko: KnockoutStatic;

Então agora você pode usar o KO como nos seus arquivos javascript.

Espero que isto ajude.

Estou usando https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/ e possui todas as interfaces para o Knockout.