TypeScript dengan KnockoutJS

Apakah ada contoh penggunaan TypeScript dengan KnockoutJS? Saya hanya ingin tahu bagaimana mereka akan bekerja sama?

Edit

Inilah yang saya miliki, sepertinya berhasil

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

}

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

Ini menghasilkan Javascript berikut:

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

Lihat DefinitelyTyped .

"Repositori definisi tipe TypeScript untuk pustaka JavaScript populer"

Saya membuat antarmuka kecil ini untuk mendapatkan tipe statis untuk 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;
    };
}

Taruh di "Knockout.d.ts" dan kemudian referensikan dari file Anda sendiri. Seperti yang Anda lihat, ini akan sangat diuntungkan dari obat generik (yang datang sesuai dengan spesifikasi).

Saya hanya membuat beberapa antarmuka untuk ko.observable (), tetapi ko.computed () dan ko.observableArray () dapat dengan mudah ditambahkan dalam pola yang sama. Pembaruan: Saya memperbaiki tanda tangan untuk subscribe () dan menambahkan contoh computed () dan observableArray ().

Untuk menggunakan dari file Anda sendiri, tambahkan ini di bagian atas:

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

Coba realisasi deklarasi antarmuka TypeScript saya (dengan contoh sederhana)
https://github.com/sv01a/TypeScript-Knockoutjs

Tidak ada yang akan berubah dalam hal cara pengikatan knockout dideklarasikan dalam markup, namun kami akan mendapatkan kebaikan intellisense setelah antarmuka ditulis untuk library knockout. Dalam hal ini, ini akan berfungsi seperti Contoh jquery , yang memiliki file skrip yang berisi antarmuka untuk sebagian besar api jQuery .

Saya pikir jika Anda menyingkirkan dua deklarasi variabel untuk ko dan $ kode Anda akan berfungsi. Ini menyembunyikan variabel ko dan $ aktual yang dibuat saat skrip knockout dan jquery dimuat.

Saya harus melakukan ini untuk mem-port proyek template studio visual ke sistem gugur:

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 jadi gunakan saja perintah berikut untuk mengimpor jenis knockout atau tds.

npm install @types/knockout

Ini akan membuat direktori @types di direktori node_modules proyek Anda dan file definisi tipe knockout indeks akan berada di direktori bernama knockout. Selanjutnya, melalui referensi garis miring tiga ke file jenis. Ini akan memberikan fitur IDE dan TypeScript yang hebat.

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

Terakhir, cukup gunakan pernyataan deklarasikan untuk membawa variabel ko ke dalam ruang lingkup. Ini sangat diketik jadi hello intellisense.

declare var ko: KnockoutStatic;

Jadi sekarang Anda dapat menggunakan KO seperti di file javascript Anda.

Semoga ini membantu.

Saya menggunakan https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/ dan memiliki semua antarmuka untuk Knockout.