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());
});
knockout.js
typescript
CallumVass
sumber
sumber
ko.observable<number>(10)
. Saya menulis posting blog dengan beberapa informasi yang lebih rinci: ideasof.andersaberg.com/idea/12/…Jawaban:
Lihat DefinitelyTyped .
"Repositori definisi tipe TypeScript untuk pustaka JavaScript populer"
sumber
/// <reference path="knockout-2.2.d.ts" />
ke bagian atas file .ts Anda sehingga ia mengambil definisi.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;
sumber
x = 'hello'
di JS, kami tidak tahu apakah Anda bermaksud mengatakan di suatu tempat nanti dalam kode Andax = 34
. Hance kita tidak dapat menyimpulkan apa-apa tentang tipe x.Coba realisasi deklarasi antarmuka TypeScript saya (dengan contoh sederhana)
https://github.com/sv01a/TypeScript-Knockoutjs
sumber
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>
sumber
Ok jadi gunakan saja perintah berikut untuk mengimpor jenis knockout atau tds.
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.
sumber
Saya menggunakan https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/ dan memiliki semua antarmuka untuk Knockout.
sumber