knockout.js example TypeScript com KnockoutJS




knockoutjs css class (5)

Existe alguma amostra do uso de TypeScript com o KnockoutJS? Eu só estou curioso para saber como eles iriam trabalhar 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 no 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

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

npm install @types/knockout

Isso criará um diretório @types em seu diretório node_modules de projetos e o arquivo de definição de tipo de exclusão de índice estará em um diretório denominado knockout. Em seguida, através de uma referência de barra tripla para o arquivo de tipos. Isso proporcionará excelentes recursos IDE e TypeScript.

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

Finalmente, apenas use uma instruçã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.


Answer #2

Olhe para DefinitelyTyped .

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




Answer #5

Nada mudaria em termos da maneira como as ligações eliminadas são declaradas na marcação, no entanto, obteríamos a bondade intellisense quando as interfaces fossem gravadas para a biblioteca de eliminação. A esse respeito, ele funcionaria exatamente como o jquery Sample , que possui um arquivo de texto composto contendo interfaces para a maior parte da API do jQuery .

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

Eu tive que fazer isso para portar o projeto de modelo de estúdio visual 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>