KnockoutJS ile typescript

Question

KnockoutJS ile typescript

oy

132

KnockoutJS ile typescript kullanmanın herhangi bir örnek var mı? Onların birlikte çalışmak edileceği konusunda sadece merak ediyorum?

Düzenle

Burada, iş gibi görünüyor ne var olduğunu

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 içine oluşturur:

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

Oluştur 02/10/2012 saat 12:52
kaynak kullanıcı CallumVass

Diğer dillerde...

6 cevaplar

oy

57

Ben Knockout için statik türlerini almak için bu küçük arayüz yaptı:

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" koy ve sonra kendi dosyalarından başvuru. Gördüğünüz gibi, bu (özelliklerine göre geliyor) jenerik derece yararlı olacaktır.

Sadece ko.observable () için bir kaç arayüzleri yapılmış, ancak ko.computed () ve ko.observableArray () kolaylıkla aynı desende eklenebilir. Güncelleme: Ben abone için imza sabit () ve bilgisayarlı () ve observableArray () örnekleri eklendi.

Kendi dosyadan kullanmak için, üstündeki bu ekleyin:

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

Cevap 02/10/2012 saat 15:23
kaynak kullanıcı Sten L

oy

14

(Basit bir örnekle) typescript arayüz bildirimleri benim gerçekleşmesini deneyin
https://github.com/sv01a/TypeScript-Knockoutjs

Cevap 05/10/2012 saat 06:47
kaynak kullanıcı Sv01a

oy

6

Hiçbir şey nakavt bağlamaları arayüzleri nakavt kütüphanesi için yazılır kez biz intellisense iyilik alacağı ancak işaretlemesinde ilan edilir şekilde açısından değişirdi. Bu bakımdan bu gibi çalışacak jquery Numune bir vardır, jQuery API çoğu için arayüzleri içeren typescript dosyasını .

Eğer ko $ ve kodunuzu çalışacak için iki değişken bildirimleri kurtulmak eğer sanırım. Bunlar nakavt ve jquery komut yüklendiğinde oluşturulan fiili ko $ ve değişkenleri saklıyorsun.

Ben nakavt noktasına görsel stüdyo şablon proje bunu yapmak zorunda:

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>

Cevap 02/10/2012 saat 15:02
kaynak kullanıcı Jeremy Danyow

oy

2

Ben kullanıyorum https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/ ve Knockout için tüm arayüzleri vardır.

Cevap 17/08/2015 saat 11:34
kaynak kullanıcı JavaScript Linq

oy

0

Tamam bu yüzden sadece nakavt türlerini veya tds almak için aşağıdaki komutu kullanın.

npm install @types/knockout

Bu bir dizin adında nakavt olacak projelerinizin node_modules dizininde bir @types dizini ve dizin nakavt türü tanımı dosyası oluşturur. türleri dosyaya bir üçlü çizgi referans yoluyla, Sonraki. Bu büyük bir IDE ve typescript özelliklerini verecektir.

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

Son olarak, sadece kapsam içine ko değişkeni getirmek için bir beyan deyimi kullanın. Bu yüzden merhaba intellisense kesinlikle yazılan edilir.

declare var ko: KnockoutStatic;

Demek artık sadece javascript dosyaları gibi KO kullanabilirsiniz.

Bu yardımcı olur umarım.

Cevap 04/10/2017 saat 22:35
kaynak kullanıcı SimperT

George Mavritsakis · Accepted Answer · 2012-10-26 11:46

oy

105

Sorunun yazarı bu cevabı en iyi olarak kabul etti.

Bak DefinitelyTyped .

"Typescript tip tanımları popüler JavaScript kitaplıkları için depoya"

Cevap 26/10/2012 saat 11:46
kaynak kullanıcı George Mavritsakis