Nakavt ile TypeScriptJS

KnockoutJS ile TypeScript kullanmanın bir örneği var mı? Sadece birlikte nasıl çalışacaklarını merak ediyorum.

Düzenle

İşte sahip olduğum şey, çalışıyor gibi görünüyor

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

}

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

Bu, aşağıdaki Javascript'e dönüşür:

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

Kesinlikle Tipine bakın .

"Popüler JavaScript kitaplıkları için TypeScript tür tanımları deposu"

Nakavt için statik türler elde etmek için bu küçük arayüzü yaptım:

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;
    };
}

"Knockout.d.ts" içine koyun ve sonra kendi dosyalarınızdan referans alın. Gördüğünüz gibi, jeneriklerden (özelliklerine göre geliyor) büyük fayda sağlayacaktır.

Ko.observable () için yalnızca birkaç arayüz yaptım, ancak ko.computed () ve ko.observableArray () aynı desende kolayca eklenebilir. Güncelleme: Subscribe () için imzaları düzelttim ve computed () ve obsableArray () örnekleri ekledim.

Kendi dosyanızdan kullanmak için bunu en üste ekleyin:

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

TypeScript arayüz bildirimlerini (basit bir örnekle) gerçekleştirmeyi deneyin
https://github.com/sv01a/TypeScript-Knockoutjs

Nakavt ciltlemelerinin işaretlemede bildirilme şekli açısından hiçbir şey değişmeyecek, ancak nakavt kütüphanesi için arayüzler yazıldıktan sonra akıllı iyilik elde edeceğiz. Bu bağlamda , jQuery api'nin çoğu için arabirimler içeren bir daktilo dosyasına sahip olan jquery Sample gibi çalışır .

Ben ko ve $ için iki değişken bildirimler kurtulmak eğer kodunuzu çalışacağını düşünüyorum. Bunlar, nakavt ve jquery komut dosyaları yüklendiğinde oluşturulan gerçek ko ve $ değişkenlerini gizliyor.

Görsel stüdyo şablonu projesini nakavt etmek için bunu yapmak zorunda kaldım:

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'dir:

<!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>

Tamam, sadece nakavt türlerini veya tds'leri almak için aşağıdaki komutu kullanın.

npm install @types/knockout

Bu, projeler düğümü_modüller dizininizde bir @types dizini oluşturur ve dizin nakavt türü tanım dosyası, nakavt adlı bir dizinde olacaktır. Sonra, türler dosyasına üçlü eğik çizgi başvurusu yoluyla. Bu harika IDE ve TypeScript özellikleri verecektir.

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

Son olarak, ko değişkenini kapsama getirmek için bir declare deyimi kullanın. Bu kuvvetle yazılmıştır, bu yüzden merhaba akıllılık.

declare var ko: KnockoutStatic;

Yani şimdi javascript dosyalarınızda olduğu gibi KO kullanabilirsiniz.

Bu yardımcı olur umarım.

Https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/ kullanıyorum ve Nakavt için tüm arayüzlere sahip.