Typoskript mit KnockoutJS

Question

Typoskript mit KnockoutJS

stimmen

132

Gibt es eine Probe mit Typoskript mit KnockoutJS? Ich bin nur neugierig, wie sie zusammenarbeiten würden?

Bearbeiten

Hier ist, was ich habe, scheint zu funktionieren

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

}

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

Dies erzeugt in den folgenden 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

Veröffentlicht am 02/10/2012 um 12:52
quelle vom benutzer CallumVass

In anderen Sprachen...

6 antworten

stimmen

57

Ich habe diese kleinen Schnittstelle statische Typen für Knockout zu bekommen:

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

Legen Sie es in „Knockout.d.ts“ und dann verweisen sie von Ihren eigenen Dateien. Wie Sie sehen können, wäre es sehr von Generika profitieren (die nach den Spezifikationen kommen).

Ich habe nur ein paar Schnittstellen für ko.observable (), aber ko.computed () und ko.observableArray () kann leicht in dem gleichen Muster hinzugefügt werden. Update: Ich reparierte die Unterschriften für subscribe () aufgelöst und Beispiele berechnet () und observableArray ().

Zur Nutzung von Ihrer eigenen Datei, fügen Sie diese an der Spitze:

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

Beantwortet am 02/10/2012 um 15:23
quelle vom benutzer Sten L

stimmen

14

Versuchen Sie, meine Realisierung Typoskript Schnittstelle Erklärungen (mit einfachem Beispiel)
https://github.com/sv01a/TypeScript-Knockoutjs

Beantwortet am 05/10/2012 um 06:47
quelle vom benutzer Sv01a

stimmen

6

Nichts würde in Bezug auf die Art und Weise ändert Knockout - Bindungen im Markup deklariert sind aber wir würden die Intellisense Güte erhalten , sobald die Schnittstellen für die Ko - Bibliothek geschrieben werden. In dieser Hinsicht wäre es ebenso wie die Arbeit jquery Probe , die eine hat Typoskript - Datei für die meisten der jQuery api enthält Schnittstellen .

Ich denke, wenn man von den beiden Variablendeklarationen für ko loszuwerden und Ihr Code $ funktionieren. Diese verstecken sich die tatsächliche ko und $ Variablen, die erstellt wurden, wenn die Knock-out und jquery Skripte geladen.

Ich hatte dies das Visual Studio-Vorlage Projekt Hafen zu tun KO:

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>

Beantwortet am 02/10/2012 um 15:02
quelle vom benutzer Jeremy Danyow

stimmen

2

Ich verwende https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/ und es verfügt über alle Schnittstellen für Knockout.

Beantwortet am 17/08/2015 um 11:34
quelle vom benutzer JavaScript Linq

stimmen

0

Ok, so benutzen Sie einfach den folgenden Befehl, um die Ko-Typen oder tds zu importieren.

npm install @types/knockout

Dies wird ein @types Verzeichnis in Ihren Projekten node_modules Verzeichnis und die Index-Knockout-Typ-Definitionsdatei wird in einem Verzeichnis mit dem Namen Knockout erstellen. Als nächstes durch einen Triple-slash Verweis auf die Dateitypen. Dies wird große IDE und Typoskript Funktionen geben.

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

Schließlich verwendet nur eine declare-Anweisung den ko-Variable in Rahmen zu bringen. Dies wird stark typisierte so hallo intellisense.

declare var ko: KnockoutStatic;

So, jetzt können Sie KO verwenden wie in Ihren Javascript-Dateien.

Hoffe das hilft.

Beantwortet am 04/10/2017 um 22:35
quelle vom benutzer SimperT

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

stimmen

105

Der Autor der Frage hat diese Antwort als die beste genommen.

Schauen Sie sich DefinitelyTyped .

„Typoskript Typdefinitionen Repository für beliebte JavaScript-Bibliotheken“

Beantwortet am 26/10/2012 um 11:46
quelle vom benutzer George Mavritsakis