Машинопись с KnockoutJS

Question

Машинопись с KnockoutJS

голоса

132

Есть ли пример использования машинописи с 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

Задан 02/10/2012 в 12:52
источник пользователем CallumVass

На других языках...

6 ответов

голоса

57

Я сделал этот маленький интерфейс, чтобы получить статические типы для выбивания:

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;

Ответил 02/10/2012 в 15:23
источник пользователем Sten L

голоса

14

Попробуйте мою реализацию машинопись деклараций интерфейса (с простым примером)
https://github.com/sv01a/TypeScript-Knockoutjs

Ответил 05/10/2012 в 06:47
источник пользователем Sv01a

голоса

6

Ничто не изменит с точки зрения того , как нокаут привязок объявлены в разметке , однако мы получили бы Intellisense благость , как только интерфейсы написаны для библиотеки нокаута. В этом отношении он будет работать так же , как Jquery образец , который имеет файл машинопись , содержащие интерфейсы для большинства API JQuery .

Я думаю, если вы избавитесь от двух переменных деклараций для КО и $ ваш код будет работать. Они скрывают фактический нокаут и $ переменные, которые были созданы, когда выколотки и 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>

Ответил 02/10/2012 в 15:02
источник пользователем Jeremy Danyow

голоса

2

Я использую https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/ и она имеет все интерфейсы для выбивания.

Ответил 17/08/2015 в 11:34
источник пользователем JavaScript Linq

голоса

0

ИТАК просто использовать следующую команду, чтобы импортировать типы нокаута или ТДС.

npm install @types/knockout

Это создаст каталог @types в каталоге ваших проектов node_modules и файл определение типа индекса нокаут будет находиться в директории с именем нокаута. Далее, с помощью ссылки тройного слэша в файл типов. Это даст большой IDE и функцию машинописи.

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

И, наконец, просто использовать объявлять о принести переменную kò в область видимости. Это сильно типизированных так привет IntelliSense.

declare var ko: KnockoutStatic;

Итак, теперь вы можете использовать KO так же, как в ваших файлов JavaScript.

Надеюсь это поможет.

Ответил 04/10/2017 в 22:35
источник пользователем SimperT

George Mavritsakis · Accepted Answer · 2012-10-26 11:46

голоса

105

Автор вопроса принял этот ответ как лучший.

Посмотрите на DefinitelyTyped .

«Определение машинописи типа хранилище для популярных библиотек JavaScript»

Ответил 26/10/2012 в 11:46
источник пользователем George Mavritsakis