TypeScript พร้อม KnockoutJS

137

มีตัวอย่างของการใช้ TypeScript กับ KnockoutJS หรือไม่? ฉันแค่อยากรู้ว่าพวกเขาจะทำงานร่วมกันอย่างไร

แก้ไข

นี่คือสิ่งที่ฉันมีดูเหมือนว่าจะทำงาน

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

}

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

สิ่งนี้จะสร้างเป็น 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

— CallumVass
แหล่งที่มา

6

ฉันค่อนข้างสับสนด้วยคำหลัก "ประกาศ" ที่ใช้ร่วมกับ "var" จนกว่าฉันจะพบส่วนของการประกาศแอมเบียนต์ในข้อมูลจำเพาะ ทำให้รู้สึกดีขณะนี้: typescriptlang.org/Content/...

— Rex Miller

2

ใน typescript 0.9 เรามียาสามัญซึ่งจะช่วยให้คุณพิมพ์ ko.observable<number>(10)observables: ฉันเขียนบล็อกโพสต์พร้อมข้อมูลรายละเอียดเพิ่มเติม: ideasof.andersaberg.com/idea/12/…

— Anders

108

ดูDefinitelyTyped

"ที่เก็บคำจำกัดความประเภท TypeScript สำหรับไลบรารี JavaScript ยอดนิยม"

— George Mavritsakis
แหล่งที่มา

3

นี่อาจเป็นคำถามที่โง่ แต่คุณสามารถอธิบายได้ว่าคำจำกัดความของ TypeScript คืออะไร / ไม่? มันหมดจดหรือเปล่าที่คุณสามารถใช้ฟังก์ชั่นห้องสมุดในไฟล์ที่รวบรวมโดย TypeScript โดยไม่ต้องคอมไพเลอร์บ่น? หากเป็นเช่นนั้นคุณไม่จำเป็นต้องอ้างอิงคำจำกัดความในแอปพลิเคชันของคุณเมื่อรวบรวมไฟล์ ts ถูกต้องหรือไม่

— ปฏิเสธไม่ได้

9

นั่นคือกรณีที่ หากคุณกำลังเขียนรหัส typescript ของคุณในแผ่นจดบันทึกคุณจะต้องใช้คำจำกัดความในเวลารวบรวม ในทางตรงกันข้ามหนึ่งในข้อดีที่ดีของ typescript ก็คือการที่ intellisence visual Studio (และบรรณาธิการอื่น ๆ ผ่าน plugins) สามารถเข้าใจโค้ดของคุณได้ง่ายขึ้นและช่วยให้คุณทำงานอัตโนมัติและตรวจสอบชนิดและข้อผิดพลาดได้มากขึ้น กว่าจาวาสคริปต์) นั่นคือเหตุผลที่เราใช้ไฟล์คำจำกัดความสำหรับรหัสที่เขียนใน JavaScript เพื่อให้การตรวจสอบประเภท typescript แน่นอนคุณสามารถประกาศ libs เป็น "ใด ๆ " แต่นี่ไม่ดีหวังว่าฉันช่วยได้!

— George Mavritsakis

5

โปรดทราบว่ากุญแจสำคัญคือการเพิ่ม/// <reference path="knockout-2.2.d.ts" />ไปที่ด้านบนของไฟล์. ts ของคุณเพื่อที่จะเลือกคำจำกัดความ

— Aidan Ryan

ฉันไม่เห็นสิ่งที่น่าพิศวงในรายการ .... ถูกลบออก ?? ย้าย ?? ผิดหวัง

— Jester

58

ฉันสร้างอินเทอร์เฟซเล็ก ๆ นี้เพื่อรับประเภทคงที่สำหรับการทำให้ล้มลง:

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 () สามารถเพิ่มได้อย่างง่ายดายในรูปแบบเดียวกัน อัปเดต:ฉันแก้ไขลายเซ็นสำหรับสมัครสมาชิก () และเพิ่มตัวอย่างของการคำนวณ () และ observableArray ()

หากต้องการใช้จากไฟล์ของคุณเองให้เพิ่มที่ด้านบน:

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

— สเตนแอล
แหล่งที่มา

2

@JcFx: สิ่งที่ Anders อ้างถึงอาจเป็นตัวเลือกในการใช้ไฟล์ TypeScript .ts และส่งออกไฟล์ประกาศอินเตอร์เฟส. d.ts ไม่มีวิธีที่จะใช้ JavaScript ที่ไม่ได้พิมพ์ตามปกติและค้นพบประเภทอย่างน่าอัศจรรย์ ปัญหาของ JS (TypeScripts นั้นพยายามแก้ไข) คือไม่มีทางที่โปรแกรมเมอร์จะประกาศความตั้งใจของเธอว่าตัวแปรควรเป็นไปตามชนิดที่เฉพาะเจาะจง เมื่อคุณพูดx = 'hello'ใน JS เราไม่รู้ว่าคุณตั้งใจจะใช้รหัสในภายหลังหรือx = 34ไม่ Hance เราไม่สามารถอนุมานเกี่ยวกับประเภทของ x

— Sten L

@JcFx: จริง ๆ แล้วคุณอาจจะถูกต้องว่าข้อมูลประเภทที่ จำกัด บางอย่างอาจมาจาก JS ธรรมดา ให้ฉันรู้ว่ามันจะไปอย่างไรเมื่อคุณลอง!

— Sten L

typescript กำลังเพิ่มยาชื่อสามัญ

— Daniel A. White

14

ลองใช้การประกาศอินเทอร์เฟซ TypeScript ของฉัน (ด้วยตัวอย่างง่าย ๆ )
https://github.com/sv01a/TypeScript-Knockoutjs

— Sv01a
แหล่งที่มา

6

จะไม่มีอะไรเปลี่ยนแปลงในแง่ของวิธีการประกาศการผูกมัดที่น่าพิศวงในมาร์กอัป แต่เราจะได้รับความดีในการใช้งานเมื่ออินเทอร์เฟซถูกเขียนขึ้นสำหรับไลบรารี่ที่น่าพิศวง ในแง่นี้มันจะทำงานเหมือนกับตัวอย่าง jqueryซึ่งมีไฟล์ typescript ที่มีอินเตอร์เฟสสำหรับ jQuery api ส่วนใหญ่

ฉันคิดว่าถ้าคุณกำจัดประกาศสองตัวแปรสำหรับ ko และ $ โค้ดของคุณจะใช้งานได้ สิ่งเหล่านี้จะซ่อนตัวแปร ko และ $ จริงที่สร้างขึ้นเมื่อมีการโหลดสคริปต์น็อคเอาต์และ jquery

ฉันต้องทำสิ่งนี้เพื่อทำพอร์ตโครงการเทมเพลต visual studio เพื่อทำให้ล้มลง:

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>

— Jeremy Danyow
แหล่งที่มา

1

ไม่โพสต์ใน ko กับ overkill คอนสตรัคทุกประเภท

— Simon_Weaver

3

ตกลงดังนั้นเพียงใช้คำสั่งต่อไปนี้เพื่อนำเข้าชนิด knockout หรือ tds

npm install @types/knockout

สิ่งนี้จะสร้างไดเร็กทอรี @types ในไดเร็กทอรีโครงการ node_modules ของคุณและไฟล์นิยามชนิดการทำให้ล้มลงดัชนีจะอยู่ในไดเร็กทอรีที่ชื่อ knockout ถัดไปผ่านการอ้างอิงแบบสามสแลชกับไฟล์ประเภท สิ่งนี้จะให้คุณสมบัติ IDE และ TypeScript ที่ยอดเยี่ยม

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

ในที่สุดให้ใช้คำสั่งประกาศเพื่อทำให้ตัวแปร ko อยู่ในขอบเขต นี่คือพิมพ์อย่างมากดังนั้นสวัสดี intellisense

declare var ko: KnockoutStatic;

ดังนั้นตอนนี้คุณสามารถใช้ KO ได้เหมือนในไฟล์ javascript ของคุณ

หวังว่านี่จะช่วยได้

— ซิมเพิร์ต
แหล่งที่มา

2

ฉันใช้https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/ และมีส่วนต่อประสานทั้งหมดที่น่าพิศวง

— JavaScript Linq
แหล่งที่มา