নকআউটজেএস সহ টাইপস্ক্রিপ্ট

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

"বর্ণ" এর সাথে একত্রে ব্যবহৃত "ঘোষিত" কীওয়ার্ড দ্বারা আমি কিছুটা বিভ্রান্ত হয়ে পড়েছিলাম যতক্ষণ না আমি অনুমানের অ্যাম্বিয়েন্ট ডিক্লারেশনে বিভাগটি না পেয়েছি। এখন নিখুঁত জ্ঞান তৈরি করে: typcriptlang.org/Content/… ।

— রেক্স মিলার 21

টাইপ করা বিষয় 0.9 আমরা জেনেরিক্স আপনি observables টাইপ দেয় আছে: ko.observable<number>(10)। আমি আরও কিছু বিশদ তথ্যের সাথে একটি ব্লগপোস্ট লিখেছি: ধারণাof.andersaberg.com/idea/12/…

— অ্যান্ডার্স

Answer 1

এ DefinitelyTyped ।

"জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরির জন্য টাইপস্ক্রিপ্ট ধরণের সংজ্ঞা সংগ্রহস্থল"

Comments

এটি একটি বোবা প্রশ্ন হতে পারে, তবে আপনি কি টাইপসক্রিপ্ট টাইপ সংজ্ঞাটি সঠিকভাবে / কি তা ব্যাখ্যা করতে পারেন? এটি কি নিখুঁতভাবে যাতে আপনি সংকলক অভিযোগ না করে টাইপস্ক্রিপ্ট-সংকলিত ফাইলে লাইব্রেরি ফাংশন ব্যবহার করতে পারেন? যদি এটি হয় তবে আপনার অ্যাপ্লিকেশনটিতে সংজ্ঞাটি উল্লেখ করার দরকার নেই, আপনি যখন টিএস ফাইলগুলি সংকলন করেন, ঠিক?

— undeniablyrob

হুবহু কেস। আপনি যদি নোটপ্যাডে আপনার টাইপ স্ক্রিপ্ট কোডটি লিখছিলেন তবে আপনার কেবল সংকলনের সময় সংজ্ঞাগুলির প্রয়োজন হবে। অন্যদিকে, টাইপস্ক্রিপ্টের একটি ভাল বিষয় হ'ল ভিজ্যুয়াল স্টুডিওতে (এবং প্লাগিনগুলির মাধ্যমে অন্যান্য সম্পাদক) বুদ্ধিমান আপনার কোড বোঝা সহজ এবং এটি আপনাকে স্বয়ংক্রিয়ভাবে সমাপ্তি এবং টাইপ এবং ত্রুটি পরীক্ষা করতে সহায়তা করে (আরও অনেক কিছু জাভাস্ক্রিপ্ট চেয়ে)। এজন্য আমরা জাভাস্ক্রিপ্টে লিখিত কোডের জন্য সংজ্ঞা ফাইলগুলি ব্যবহার করি যাতে টাইপস্ক্রিপ্ট প্রকারের পরীক্ষা করা যায়। অবশ্যই আপনি "যে কোনও" হিসাবে লিবস ঘোষণা করতে পারেন, তবে এটি ভাল নয়! আমি সাহায্য করেছি!

— জর্জ মাভ্রিতসাকিস

নোট করুন যে কীটি /// <reference path="knockout-2.2.d.ts" />আপনার .ts ফাইলের শীর্ষে যুক্ত করা যাতে এটি সংজ্ঞা গ্রহণ করে।

— আইডান রায়ান

আমি তালিকার কোথাও নকআউট দেখছি না .... অপসারণ ?? সরানো ?? হতাশ

— জেস্টের

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.computes () এবং ko.observableArray ()। আপডেট: আমি সাবস্ক্রাইব () এবং স্বীকৃত () এবং পর্যবেক্ষণযোগ্য অ্যারে () এর উদাহরণগুলি যুক্ত করার জন্য স্বাক্ষরগুলি স্থির করেছি।

আপনার নিজের ফাইল থেকে ব্যবহার করতে, শীর্ষে এটি যুক্ত করুন:

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

Comments

@ জেসিএফএক্স: অ্যান্ডারস যা উল্লেখ করেছেন সম্ভবত এটি কোনও টাইপসক্রিপ্ট .ts ফাইল এবং আউটপুট একটি ইন্টারফেস ডিক্লেয়ারেশন ফাইল .d.ts নেওয়ার বিকল্প ছিল। নিয়মিত টাইপযুক্ত জাভাস্ক্রিপ্ট নেওয়ার কোনও উপায় নেই এবং যাদুকরভাবে প্রকারগুলি আবিষ্কার করুন। জেএসের সাথে সমস্যা (যে টাইপস্ক্রিপ্টগুলি সমাধান করার চেষ্টা করে) তা হ'ল প্রোগ্রামারটির পক্ষে তার অভিপ্রায় প্রকাশের কোনও উপায় নেই যে ভেরিয়েবল একটি নির্দিষ্ট ধরণের সাথে খাপ খায়। আপনি যখন x = 'hello'জেএস-এ বলেন, আমরা জানি না যে আপনি পরে আপনার কোডটি কোথাও বলতে চেয়েছিলেন কিনা x = 34। হ্যান্স আমরা এক্স এর ধরণের সম্পর্কে কিছুই অনুমান করতে পারি না।

— স্টেন এল

@ জিসিএফএক্স: আসলে, আপনি সঠিক হতে পারেন যে কিছু সীমাবদ্ধ প্রকারের তথ্য সরল জেএস থেকে নেওয়া যেতে পারে। আমাকে চেষ্টা করুন যখন আপনি চেষ্টা করুন!

— স্টেন এল

টাইপসক্রিপ্ট জেনেরিক যোগ করা হয়।

— ড্যানিয়েল এ। হোয়াইট

Answer 3

আমার টাইপস্ক্রিপ্ট ইন্টারফেসের ঘোষণাগুলি উপলব্ধ করার চেষ্টা করুন (সাধারণ উদাহরণ সহ)
https://github.com/sv01a/TypeScript-Knockoutjs

Answer 4

মার্কআপে নকআউট বাইন্ডিংগুলি যেভাবে ঘোষণা করা হয় তার দিক থেকে কোনও পরিবর্তন হবে না তবে নকআউট লাইব্রেরির জন্য ইন্টারফেসগুলি লেখার পরে আমরা ইন্টেলিজেন্সের সদ্ব্যবহারটি পাব। এই ক্ষেত্রে এটি jquery নমুনার মতো কাজ করবে , যার বেশিরভাগ jQuery এপিআই-এর ইন্টারফেস রয়েছে এমন একটি টাইপ স্ক্রিপ্ট ফাইল রয়েছে ।

আমি মনে করি আপনি যদি কো এবং code আপনার কোড দুটি কার্যকর করতে দুটি পরিবর্তনশীল ঘোষণা থেকে মুক্তি পান। এগুলি আসল কো এবং $ ভেরিয়েবলগুলি গোপন করছে যা নকআউট এবং জ্যাকুরি স্ক্রিপ্টগুলি লোড করার সময় তৈরি হয়েছিল।

নকশআউটে ভিজ্যুয়াল স্টুডিও টেম্পলেট প্রকল্পটি পোর্ট করতে আমাকে এটি করতে হয়েছিল:

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

ঠিক আছে তাই নকআউট প্রকার বা টিডিএস আমদানি করতে নিম্নলিখিত কমান্ডটি ব্যবহার করুন।

npm install @types/knockout

এটি আপনার প্রকল্প নোড_মডিউলগুলি ডিরেক্টরিতে একটি @ টাইপ ডিরেক্টরি তৈরি করবে এবং সূচক নকআউট টাইপের সংজ্ঞা ফাইলটি নকআউট নামের একটি ডিরেক্টরিতে থাকবে। এর পরে, প্রকারের ফাইলটিতে একটি ট্রিপল-স্ল্যাশ রেফারেন্সের মাধ্যমে। এটি দুর্দান্ত আইডিই এবং টাইপস্ক্রিপ্ট বৈশিষ্ট্য দেবে।

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

পরিশেষে, কো ভেরিয়েবলটিকে স্কোপে আনার জন্য কেবল একটি ডিক্লেয়ার স্টেটমেন্ট ব্যবহার করুন। এটি দৃ strongly়ভাবে টাইপ করা হয়েছে তাই হ্যালো ইন্টেলিজেন্স।

declare var ko: KnockoutStatic;

সুতরাং এখন আপনি জাভাস্ক্রিপ্ট ফাইলগুলির মতোই কেও ব্যবহার করতে পারেন।

আশাকরি এটা সাহায্য করবে.

Answer 6

আমি https://www.nuget.org/packages/knockout.edabless.TypeScript.DefinitelyTypeed/ ব্যবহার করছি এবং এটি নকআউটের জন্য সমস্ত ইন্টারফেস রয়েছে।