TypeScript met KnockoutJS

Is er een voorbeeld van het gebruik van TypeScript met KnockoutJS? Ik ben gewoon benieuwd hoe ze zouden samenwerken?

Bewerken

Dit is wat ik heb, lijkt te werken

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

Dit genereert het volgende Javascript:

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

Antwoord 1, autoriteit 100%

Kijk naar DefinitelyTyped.

“Repository TypeScript-typedefinities voor populaire JavaScript-bibliotheken”

Antwoord 2, autoriteit 54%

Ik heb deze kleine interface gemaakt om statische typen voor Knockout te krijgen:

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

Zet het in “Knockout.d.ts” en verwijs ernaar vanuit je eigen bestanden. Zoals je kunt zien, zou het veel baat hebben bij generieke geneesmiddelen (die volgens de specificaties komen).

Ik heb maar een paar interfaces gemaakt voor ko.observable(), maar ko.computed() en ko.observableArray() kunnen eenvoudig in hetzelfde patroon worden toegevoegd. Update:ik heb de handtekeningen voor subscribe() gerepareerd en voorbeelden van computed() en observableArray() toegevoegd.

Om uit je eigen bestand te gebruiken, voeg je dit bovenaan toe:

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

Antwoord 3, autoriteit 13%

Probeer mijn realisatie van TypeScript-interfacedeclaraties (met een eenvoudig voorbeeld)
https://github.com/sv01a/TypeScript-Knockoutjs

Antwoord 4, autoriteit 6%

Er zou niets veranderen aan de manier waarop knock-outbindingen in de opmaak worden gedeclareerd, maar we zouden de intellisense-goedheid krijgen zodra de interfaces voor de knock-outbibliotheek zijn geschreven. In dit opzicht zou het net zo werken als het jQuery-voorbeeld, dat een typescript-bestand met interfaces voor de meeste jQuery-api.

Ik denk dat als je de twee variabele declaraties voor ko en $ verwijdert, je code zal werken. Deze verbergen de werkelijke ko- en $-variabelen die zijn gemaakt toen de knock-out- en jQuery-scripts werden geladen.

Ik moest dit doen om het visual studio-sjabloonproject over te zetten naar 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);
};

standaard.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>

Antwoord 5, autoriteit 4%

Ok, dus gebruik gewoon de volgende opdracht om de knockout-types of tds te importeren.

npm install @types/knockout

Hiermee wordt een map @types gemaakt in de map node_modules van uw projecten en het bestand met de definitie van het index-knockout-type bevindt zich in een map met de naam knock-out.
Vervolgens door middel van een triple-slash verwijzing naar het type-bestand. Dit geeft geweldige IDE- en TypeScript-functies.

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

Ten slotte, gebruik gewoon een declare-statement om de ko-variabele binnen het bereik te brengen. Dit is sterk getypt, dus hallo intellisense.

declare var ko: KnockoutStatic;

Dus nu kun je KO gebruiken net zoals in je javascript-bestanden.

Hopelijk helpt dit.

Antwoord 6, autoriteit 2%

Ik gebruik https://www.nuget.org/packages/ knockout.editables.TypeScript.DefinitelyTyped/
en het heeft alle interfaces voor Knockout.