[knockout.js] 녹아웃 JS가있는 TypeScript

KnockoutJS에서 TypeScript를 사용하는 샘플이 있습니까? 나는 그들이 어떻게 함께 작동하는지 궁금합니다.

편집하다

여기 내가 가진 것, 작동하는 것 같습니다

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

답변

DefinitelyTyped를 보십시오 .

“인기있는 JavaScript 라이브러리를위한 TypeScript 유형 정의 저장소”

답변

녹아웃에 대한 정적 유형을 얻기 위해이 작은 인터페이스를 만들었습니다.

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 ()를 동일한 패턴으로 쉽게 추가 할 수 있습니다. 업데이트 : subscribe () 서명을 수정하고 computed () 및 observableArray ()의 예를 추가했습니다.

자신의 파일에서 사용하려면 맨 위에 이것을 추가하십시오.

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

답변

TypeScript 인터페이스 선언을 실현 해보십시오 (간단한 예제 사용)
https://github.com/sv01a/TypeScript-Knockoutjs

답변

녹아웃 바인딩이 마크 업에서 선언되는 방식에 대해서는 아무것도 바뀌지 않지만 녹아웃 라이브러리에 대한 인터페이스가 작성되면 인텔리전스를 얻을 수 있습니다. 이와 관련하여 대부분의 jQuery API에 대한 인터페이스를 포함 하는 typescript 파일 이있는 jquery Sample 과 동일하게 작동 합니다.

ko와 $에 대한 두 개의 변수 선언을 제거하면 코드가 작동한다고 생각합니다. 이들은 knockout 및 jquery 스크립트가로드 될 때 생성 된 실제 ko 및 $ 변수를 숨기고 있습니다.

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>

답변

다음 명령을 사용하여 녹아웃 유형 또는 td를 가져 오십시오.

npm install @types/knockout

그러면 프로젝트 node_modules 디렉토리에 @types 디렉토리가 생성되고 인덱스 녹아웃 유형 정의 파일은 knockout 디렉토리에 있습니다. 다음으로 형식 파일에 대한 트리플 슬래시 참조를 통해. 이것은 훌륭한 IDE 및 TypeScript 기능을 제공합니다.

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

마지막으로, 선언문을 사용하여 ko 변수를 범위로 가져옵니다. 이것은 강력하게 형식화되어 있으므로 안녕하세요.

declare var ko: KnockoutStatic;

이제 자바 스크립트 파일 에서처럼 KO를 사용할 수 있습니다.

도움이 되었기를 바랍니다.

답변

https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/를 사용
하고 있으며 녹아웃에 대한 모든 인터페이스가 있습니다.