TypeScript với KnockoutJS

Có mẫu nào sử dụng TypeScript với KnockoutJS không? Tôi chỉ tò mò về cách họ sẽ làm việc cùng nhau?

Biên tập

Đây là những gì tôi có, dường như làm việc

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

}

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

Điều này tạo ra Javascript sau:

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

Nhìn vào DefiniteTyped .

"Kho định nghĩa kiểu TypeScript cho các thư viện JavaScript phổ biến"

Tôi đã tạo giao diện nhỏ này để lấy các kiểu tĩnh cho Knockout:

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

Đặt nó trong "Knockout.d.ts" và sau đó tham chiếu nó từ các tệp của riêng bạn. Như bạn có thể thấy, nó sẽ được hưởng lợi rất nhiều từ thuốc generic (đang đến theo thông số kỹ thuật).

Tôi chỉ tạo một vài giao diện cho ko.observable (), nhưng ko.computing () và ko.observableArray () có thể dễ dàng thêm vào trong cùng một mẫu. Cập nhật: Tôi đã sửa các chữ ký cho đăng ký () và thêm các ví dụ về tính toán () và obsableArray ().

Để sử dụng từ tệp của riêng bạn, hãy thêm phần này ở trên cùng:

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

Hãy thử nhận ra các khai báo giao diện TypeScript của tôi (với ví dụ đơn giản)
https://github.com/sv01a/TypeScript-Knockoutjs

Không có gì thay đổi về cách thức các ràng buộc loại trực tiếp được tuyên bố trong đánh dấu, tuy nhiên chúng ta sẽ có được sự tốt đẹp trong khi các giao diện được viết cho thư viện loại trực tiếp. Về mặt này, nó sẽ hoạt động giống như Mẫu jquery , có tệp bản thảo chứa các giao diện cho hầu hết các api jQuery .

Tôi nghĩ rằng nếu bạn thoát khỏi hai khai báo biến cho ko và $ thì mã của bạn sẽ hoạt động. Chúng đang ẩn các biến ko và $ thực tế đã được tạo khi các tập lệnh loại trực tiếp và jquery được tải.

Tôi đã phải làm điều này để chuyển dự án mẫu phòng thu trực quan sang loại trực tiếp:

ứng dụng:

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

mặc định.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>

Ok, chỉ cần sử dụng lệnh sau để nhập các loại hoặc loại trực tiếp.

npm install @types/knockout

Điều này sẽ tạo một thư mục @types trong thư mục dự án node_modules của bạn và tệp định nghĩa loại trực tiếp chỉ mục sẽ nằm trong một thư mục có tên loại trực tiếp. Tiếp theo, thông qua một tham chiếu ba dấu gạch chéo vào tệp loại. Điều này sẽ cung cấp cho các tính năng IDE và TypeScript tuyệt vời.

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

Cuối cùng, chỉ cần sử dụng một câu lệnh khai báo để đưa biến ko vào phạm vi. Điều này được đánh máy mạnh mẽ vì vậy xin chào intellisense.

declare var ko: KnockoutStatic;

Vì vậy, bây giờ bạn có thể sử dụng KO giống như trong các tệp javascript của bạn.

Hi vọng điêu nay co ich.

Tôi đang sử dụng https://www.nuget.org/packages/knockout.editables.TypeScript.DefiniteTyped/ và nó có tất cả các giao diện cho Knockout.