KnockoutJS के साथ टाइपस्क्रिप्ट

Question

क्या नॉकआउट जेएस के साथ टाइपस्क्रिप्ट का उपयोग करने का कोई नमूना है? मैं बस उत्सुक हूं कि वे एक साथ कैसे काम करेंगे?

संपादित करें

यहाँ मेरे पास है, काम करने लगता है

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

}

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

यह निम्नलिखित जावास्क्रिप्ट में उत्पन्न होता है:

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

Comments

जब तक मैं कल्पना में Ambient घोषणाओं पर अनुभाग नहीं मिला, तब तक मैं "var" के संयोजन में उपयोग किए गए "घोषित" कीवर्ड से कुछ हद तक भ्रमित था। अब सही समझ में आता है: typecriptlang.org/Content/… ।

— रेक्स मिलर

टाइपस्क्रिप्ट 0.9 में हमारे पास जेनेरिक हैं, जो आपको टाइप किए गए वेधशाला देता है ko.observable<number>(10):। मैंने कुछ और विस्तृत जानकारी के साथ एक ब्लॉगपोस्ट लिखा: ideasof.andersaberg.com/idea/12/…

— Anders

Answer 1

को देखो DefinitelyTyped ।

"लोकप्रिय जावास्क्रिप्ट पुस्तकालयों के लिए टाइपस्क्रिप्ट प्रकार परिभाषाएँ रिपॉजिटरी"

Comments

यह एक गूंगा सवाल हो सकता है, लेकिन क्या आप बता सकते हैं कि वास्तव में टाइपस्क्रिप्ट टाइप परिभाषा क्या है / है? क्या यह विशुद्ध रूप से ऐसा है कि आप कंपाइलर शिकायत के बिना टाइपस्क्रिप्ट-संकलित फ़ाइल में लाइब्रेरी फ़ंक्शन का उपयोग कर सकते हैं? यदि ऐसा है, तो आपको अपने आवेदन में परिभाषा का संदर्भ देने की आवश्यकता नहीं है, बस जब आप ts फ़ाइलों को संकलित करते हैं, तो सही?

— निर्विवाद रूप से

वास्तव में ऐसा ही है। यदि आप नोटपैड में अपना टाइपस्क्रिप्ट कोड लिख रहे थे, तो आपको केवल संकलन के समय परिभाषाओं की आवश्यकता होगी। दूसरी ओर, टाइपस्क्रिप्ट के अच्छे बिंदुओं में से एक यह है कि यह विज़ुअल स्टूडियो (और प्लगइन्स के माध्यम से अन्य संपादकों) के लिए आपके कोड को समझने के लिए सहज है और यह आपको ऑटो पूरा करने में मदद करता है और टाइप और एरर चेकिंग करने में बहुत अधिक मदद करता है (बहुत अधिक) जावास्क्रिप्ट से)। यही कारण है कि हम जावास्क्रिप्ट में लिखे कोड के लिए परिभाषा फ़ाइलों का उपयोग करते हैं ताकि टाइपस्क्रिप्ट प्रकार की जाँच प्रदान की जा सके। बेशक आप "किसी भी" के रूप में लिबास की घोषणा कर सकते हैं, लेकिन यह अच्छा नहीं है। मुझे मदद नहीं मिली!

— जॉर्ज मावत्रसकिस

ध्यान दें कि कुंजी को /// <reference path="knockout-2.2.d.ts" />आपके .ts फ़ाइल के शीर्ष पर जोड़ना है ताकि वह परिभाषाओं को उठा सके।

— ऐदन रयान

मैं सूची में कहीं भी नॉकआउट नहीं देखता .... हटा दिया गया ?? ले जाया गया ?? निराश

— Jester

Answer 2

मैंने नॉकआउट के लिए स्थिर प्रकार प्राप्त करने के लिए यह छोटा इंटरफ़ेस बनाया:

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" में डालें और फिर इसे अपनी फाइलों से संदर्भित करें। जैसा कि आप देख सकते हैं, यह जेनेरिक (जो चश्मे के अनुसार आ रहा है) से बहुत लाभ होगा।

मैंने केवल ko.observable () के लिए कुछ इंटरफेस बनाया है, लेकिन ko.computed () और ko.observableArray () को समान पैटर्न में आसानी से जोड़ा जा सकता है। अद्यतन: मैंने सदस्यता के लिए हस्ताक्षर तय किए () और गणना के उदाहरण (और) और अवलोकन योग्य () जोड़े गए हैं।

अपनी फ़ाइल से उपयोग करने के लिए, इसे शीर्ष पर जोड़ें:

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

Comments

@JcFx: क्या एंडर्स को संदर्भित किया गया था, वह शायद टाइपस्क्रिप्ट फ़ाइल को लेने का विकल्प था और इंटरफ़ेस घोषणा फ़ाइल .d.ts को आउटपुट करता था। नियमित अप्रकाशित जावास्क्रिप्ट लेने का कोई तरीका नहीं है और जादुई रूप से प्रकारों की खोज करते हैं। जेएस के साथ समस्या (यह है कि टाइपसेप्ट्स हल करने की कोशिश करता है) यह है कि प्रोग्रामर के पास अपना इरादा घोषित करने का कोई तरीका नहीं है कि एक चर विशेष प्रकार के अनुरूप होना चाहिए। जब आप x = 'hello'जेएस में कहते हैं , तो हमें नहीं पता कि क्या आपने बाद में अपने कोड में कहीं कहने का इरादा किया है x = 34। हांस हम एक्स के प्रकार के बारे में कुछ भी नहीं पता लगा सकते हैं।

— स्टेन एल

@ जेसीएफएक्स: वास्तव में, आप सही हो सकते हैं कि कुछ सीमित प्रकार की जानकारी सादे जेएस से ली जा सकती है। मुझे पता है कि जब आप कोशिश करते हैं तो यह कैसे हो जाता है!

— स्टेन एल

टाइपस्क्रिप्ट जेनरिक जोड़ रहा है।

— डैनियल ए। व्हाइट

Answer 3

टाइपस्क्रिप्ट इंटरफ़ेस घोषणाओं के मेरे अहसास की कोशिश करें (सरल उदाहरण के साथ)
https://github.com/sv01a/TypeScript-Knockoutjs

Answer 4

मार्कअप में जिस तरह से नॉकआउट बाइंडिंग घोषित की गई है, उसके संदर्भ में कुछ भी नहीं बदलेगा, लेकिन नॉकआउट लाइब्रेरी के लिए इंटरफेस लिखे जाने के बाद हमें इंटैलिजेंस अच्छाई मिलेगी। इस संबंध में यह jquery नमूना की तरह ही काम करेगा , जिसमें एक टाइपस्क्रिप्ट फ़ाइल है जिसमें अधिकांश jQuery एपीआई के लिए इंटरफेस है ।

मुझे लगता है कि अगर आप को और $ $ के लिए दो चर घोषणाओं से छुटकारा पा लेंगे तो आपका कोड काम करेगा। ये वास्तविक ko और $ चर को छिपा रहे हैं जो नॉकआउट और jquery स्क्रिप्ट लोड होने पर बनाए गए थे।

मुझे ऐसा करने के लिए दृश्य स्टूडियो टेम्पलेट प्रोजेक्ट को नॉकआउट करने के लिए पोर्ट करना पड़ा:

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>

Comments

कोक में पोस्टिंग नहीं है हर निर्माणकर्ता को ओवरकिल की तरह

— साइमन_वेअर

Answer 5

ठीक है तो बस नॉकआउट प्रकार या tds को आयात करने के लिए निम्न कमांड का उपयोग करें।

npm install @types/knockout

यह आपकी परियोजनाओं में एक @types निर्देशिका बनाएँगे नोड_मॉड्यूल निर्देशिका और अनुक्रमणिका प्रकार परिभाषा फ़ाइल नॉकआउट नामक एक निर्देशिका में होगी। अगला, टाइप फ़ाइल के लिए ट्रिपल-स्लैश संदर्भ के माध्यम से। यह महान आईडीई और टाइपस्क्रिप्ट सुविधाएँ देगा।

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

अंत में, कोए वैरिएबल को दायरे में लाने के लिए केवल एक घोषित बयान का उपयोग करें। यह दृढ़ता से टाइप किया गया है इसलिए हेल्लो इन्टेलिसेंस है।

declare var ko: KnockoutStatic;

तो अब आप अपनी जावास्क्रिप्ट फ़ाइलों की तरह ही KO का उपयोग कर सकते हैं।

उम्मीद है की यह मदद करेगा।

Answer 6

मैं https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/ का उपयोग कर रहा हूं और इसमें नॉकआउट के सभी इंटरफेस हैं।