TypeScript com Knockout JS

Question

Existe algum exemplo de uso do TypeScript com KnockoutJS?Estou apenas curioso para saber como eles funcionariam 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());
});

Answer 1

Olhe para Definitivamente digitado.

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

Answer 2

Fiz esta 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 ele em seus próprios arquivos.Como você pode ver, ele se beneficiaria muito com os genéricos (que vêm de acordo com as especificações).

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

Para usar a partir do seu próprio arquivo, adicione isto no topo:

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

Answer 3

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

Answer 4

Nada mudaria em termos da maneira como as ligações knockout são declaradas na marcação, no entanto, obteríamos a vantagem do intellisense uma vez que as interfaces fossem escritas para a biblioteca knockout.Nesse aspecto, funcionaria exatamente como o Amostra jquery, que tem um arquivo typescript contendo interfaces para a maior parte da API jQuery.

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 o nocaute:

aplicativo.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);
};

padrão.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

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

Answer 6

Ok, então 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 de seus projetos e o arquivo de definição do tipo knockout de índice estará em um diretório chamado knockout.A seguir, por meio de uma referência de barra tripla ao arquivo de tipos.Isso proporcionará ótimos recursos IDE e TypeScript.

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

Finalmente, basta usar uma instrução declare para colocar a variável ko no escopo.Isso é fortemente digitado, então olá intellisense.

declare var ko: KnockoutStatic;

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

Espero que isto ajude.