녹아웃 기능이 있는 TypeScriptJS
KnockoJ에서 TypeScript를 사용하는 샘플이 있습니까?난 단지 그들이 어떻게 함께 일할 수 있는지 궁금할 뿐이야.
편집
여기 내가 가진 게 있어, 효과가 있는 것 같아.
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());
});
"일반적인 JavaScript 라이브러리를 위한 TypeScript 유형 정의 저장소"
Knocko의 스태틱 타입을 얻기 위해 이 작은 인터페이스를 만들었습니다.
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 변수 및 $ 변수를 숨깁니다.
비주얼 스튜디오 템플릿 프로젝트를 녹아웃으로 전환하기 위해 이 작업을 수행해야 했습니다.
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>
OK, 다음 명령어를 사용하여 녹아웃타입 또는 tds를 Import합니다.
npm install @types/knockout
그러면 projects node_modules 디렉토리에 @types 디렉토리가 생성되고 인덱스 녹아웃 유형 정의 파일이 kno라는 이름의 디렉토리에 저장됩니다.다음으로 types 파일에 대한 트리플 슬래시 참조를 사용합니다.이것에 의해, IDE 와 TypeScript 의 기능이 향상됩니다.
/// <reference path="../node_modules/@types/knockout/index.d.ts" />
마지막으로 선언문을 사용하여 ko 변수를 범위로 가져옵니다.이것은 튼튼하게 만들어진 것이어서 안녕하세요 인텔리센스입니다.
declare var ko: KnockoutStatic;
이제 javascript 파일처럼 KO를 사용할 수 있습니다.
이게 도움이 됐으면 좋겠다.
저는 https://www.nuget.org/packages/knockout.editables.TypeScript.DefinitelyTyped/을 사용하고 있으며 Knockout의 모든 인터페이스를 갖추고 있습니다.
언급URL : https://stackoverflow.com/questions/12689716/typescript-with-knockoutjs
'programing' 카테고리의 다른 글
| js 스크립트 파일의 WordPress 경로 URL (0) | 2023.03.29 |
|---|---|
| $ref 사용에 관한 JSON 스키마 (0) | 2023.03.29 |
| 각도 테스트 방법JS 디렉티브 (0) | 2023.03.29 |
| 헤더 값: application/vnd.api+json (0) | 2023.03.29 |
| 악성코드가 CORS를 악용하기 위해 "Origin" 헤더를 스푸핑하는 것을 방지하려면 어떻게 해야 합니까? (0) | 2023.03.29 |