녹아웃 JS가있는 TypeScript

137

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());
});
knockout.js  typescript 
— CallumVass
소스
6
스펙에서 Ambient Declarations 섹션을 찾을 때까지 "var"와 함께 사용 된 "declare"키워드에 다소 혼란 스러웠습니다. typescriptlang.org/Content/… : 이제 완벽하게 이해 됩니다.
— 렉스 밀러
2
Typescript 0.9에는 제네릭이 있는데, 이는 다음과 같이 입력 된 관찰 가능 항목을 제공합니다 ko.observable<number>(10). 좀 더 자세한 정보가 담긴
— Anders

답변:

108

DefinitelyTyped를 보십시오 .

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

— 조지 마 브리트 사 키스
소스
3
이것은 멍청한 질문 일지 모르지만 TypeScript 유형 정의가 정확히 무엇인지 / 설명 할 수 있습니까? 컴파일러가 불평하지 않고 TypeScript 컴파일 파일에서 라이브러리 함수를 사용할 수 있도록 순수하게 작성 되었습니까? 이 경우 ts 파일을 컴파일 할 때 응용 프로그램에서 정의를 참조 할 필요가 없습니다. 맞습니까?
— 부정 할 수 없음
9
바로 그런 경우입니다. 입력 코드를 메모장에서 작성하는 경우 컴파일 타임에 정의 만 필요합니다. 반면에 typescript의 좋은 점 중 하나는 Visual Studio (및 플러그인을 통해 다른 편집자)가 코드를 이해하는 것이 더 쉽고 자동 완성과 유형 및 오류 검사를 수행하는 데 많은 도움이된다는 것입니다. JavaScript보다). 이것이 타입 스크립트 유형 검사를 제공하기 위해 JavaScript로 작성된 코드에 정의 파일을 사용하는 이유입니다. 물론 libs를 "any"로 선언 할 수는 있지만 이것은 좋지 않습니다.
— 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 ()를 동일한 패턴으로 쉽게 추가 할 수 있습니다. 업데이트 : subscribe () 서명을 수정하고 computed () 및 observableArray ()의 예를 추가했습니다.

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

/// <reference path="./Knockout.d.ts" />
declare var ko: Knockout;
— 스텐 L
소스
2
@JcFx : Anders가 언급 한 것은 아마도 TypeScript .ts 파일을 가져 와서 인터페이스 선언 파일 .d.ts를 출력하는 옵션 일 것입니다. 형식화되지 않은 일반 JavaScript를 가져 와서 형식을 마술처럼 발견 할 수있는 방법이 없습니다. JS (TypeScripts가 해결하려고 시도하는)의 문제는 프로그래머가 변수가 특정 유형을 준수해야한다는 의사를 선언 할 수있는 방법이 없다는 것입니다. x = 'hello'JS에서 말할 때 나중에 코드에서 말하려는 의도가 있는지 알 수 없습니다 x = 34. 우리는 x의 유형에 대해 아무것도 유추 할 수 없습니다.
— Sten L
@JcFx : 실제로 일부 제한된 유형 정보는 일반 JS에서 파생 될 수 있습니다. 당신이 시도 할 때 어떻게되는지 알려주세요!
— Sten L
typescript가 제네릭을 추가하고 있습니다.
— Daniel A. White
6

녹아웃 바인딩이 마크 업에서 선언되는 방식에 대해서는 아무것도 바뀌지 않지만 녹아웃 라이브러리에 대한 인터페이스가 작성되면 인텔리전스를 얻을 수 있습니다. 이와 관련하여 대부분의 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>
— 제레미 다 요우
소스
1
모든 생성자 종류에 대해 ko로 게시되지는 않습니다
— Simon_Weaver 10
3

다음 명령을 사용하여 녹아웃 유형 또는 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를 사용할 수 있습니다.

여기에 이미지 설명을 입력하십시오

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

— SimperT
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.