Typescript cu KnockoutJS

Question

Typescript cu KnockoutJS

voturi

132

Există vreo probă de a folosi mașina de scris cu KnockoutJS? Sunt doar curios cu privire la modul în care acestea ar lucra împreună?

Editați | ×

Aici este ceea ce am, pare să funcționeze

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

}

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

Acest lucru generează în următorul Javascript:

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

Întrebat 02/10/2012 la 12:52
sursa de către utilizator CallumVass

În alte limbi...

6 răspunsuri

voturi

57

Am făcut această mică interfață pentru a obține tipuri statice pentru knock-out:

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

Pune-l în „Knockout.d.ts“ și apoi face referire la ea de la propriile fișiere. După cum puteți vedea, ar beneficia foarte mult de generice (care vin în conformitate cu specificațiile).

Am făcut doar câteva interfețe pentru ko.observable (), dar ko.computed () și ko.observableArray () pot fi ușor adăugate în același model. Actualizare: Am fixat semnăturile pentru a vă abona () și a adăugat exemple de calculat () și observableArray ().

Pentru a utiliza din propriul fișier, adăugați acest lucru la partea de sus:

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

Publicat 02/10/2012 la 15:23
sursa de către utilizator Sten L

voturi

14

Încercați realizarea mea declarațiilor de interfață typescript (cu exemplu simplu)
https://github.com/sv01a/TypeScript-Knockoutjs

Publicat 05/10/2012 la 06:47
sursa de către utilizator Sv01a

voturi

6

Nimic nu se va schimba în ceea ce privește modul în care legăturile knock - out sunt declarate în markup cu toate acestea ne - ar obține bunătatea Intellisense odată ce interfețele sunt scrise pentru biblioteca knock - out. În acest sens, ar funcționa la fel ca proba jquery , care are un fișier care conține dactilografiat interfețe pentru cele mai multe API - ul jQuery .

Cred că dacă a scăpa de cele două declarații variabile pentru ko și $ codul va funcționa. Acestea se ascund reale ko și variabilele $ care au fost create atunci când knock-out si jQuery script-urile încărcate.

A trebuit să fac acest lucru în port proiectul vizual șablon de studio pentru a knock-out:

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>

Publicat 02/10/2012 la 15:02
sursa de către utilizator Jeremy Danyow

voturi

2

Sunt folosind https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/ și are toate interfețele pentru knock - out.

Publicat 17/08/2015 la 11:34
sursa de către utilizator JavaScript Linq

voturi

0

Ok deci trebuie doar să utilizați următoarea comandă pentru a importa tipuri de knock-out sau TDS-ului.

npm install @types/knockout

Acest lucru va crea un director în directorul @types proiectele dvs. node_modules și tipul de fișier definiție indicele de knock-out va fi într-un director numit knock-out. Apoi, printr-o referință triplu-slash la dosar tipuri. Acest lucru va da o mare IDE și caracteristici dactilografiate.

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

În cele din urmă, utilizați doar o declarație vestim pentru a aduce variabilei ko în domeniul de aplicare. Acest lucru este puternic tastat atât de salut IntelliSense.

declare var ko: KnockoutStatic;

Deci, acum puteți folosi KO la fel ca în fișierele JavaScript.

Sper că acest lucru vă ajută.

Publicat 04/10/2017 la 22:35
sursa de către utilizator SimperT

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

voturi

105

Autorul întrebării a acceptat acest răspuns ca fiind cel mai bun.

Uită - te la DefinitelyTyped .

„Definiții de tip typescript depozit pentru biblioteci populare JavaScript“

Publicat 26/10/2012 la 11:46
sursa de către utilizator George Mavritsakis