在将 JsObservable 与 TypeScript 结合使用时需要帮助吗?
Need help using JsObservable with TypeScript?
我过去曾使用过 JSRender、JSViews 和 JSObservables。这一次,我开始了一个新项目,但使用的是 TypeScript,但我不确定如何使用它...我发现在何处放置对 .js、.d.ts、.ts...[= 的引用非常令人困惑15=]
我能描述一下我有什么吗,哪里失败了,如果你能给我一些指导....这将给我一个很好的开始!
我的 "scripts" 文件夹包含这些文件:
~\Typings\jQuery\jQuery.d.ts
installed from this NuGet package: jquery.TypeScript.DefinitelyTyped v0.0.1
~\Typings\jsrender\jsrender.d.ts
installed from this NuGet package: jsrender.TypeScript.DefinitelyTyped v0.1.8
文件:~/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="scripts/jquery-3.1.1.js"></script>
<script src="scripts/jsviews.js"></script>
<script src="scripts/game/game.js"></script>
<script src="scripts/game/app.js"></script>
</head>
<body>
<div id="view">
<div id="myMap"></div>
<div id="optionsTmpl"></div>
</div>
</body>
</html>
文件:~/tmpl/options.tmpl.html
<div class="optionsFrame">
<select data-link="mapType">
{^{for mapTypes}}
<option value="{{:id}}">{{:name}}</option>
{{/for}}
</select>
<input type="button" value="test">
</div>
文件:app.ts
/// <reference path="../typings/jquery/jquery.d.ts" />
/// <reference path="../typings/jsrender/jsrender.d.ts" />
class UnchartedApp {
game: UnchartedGame;
init() {
this.game = new UnchartedGame();
this.game.loadMap();
}
}
window.onload = () => {
var app = new UnchartedApp();
app.init();
};
文件:game.ts
/// <reference path="../typings/jquery/jquery.d.ts" />
/// <reference path="../typings/jsrender/jsrender.d.ts" />
class UnchartedGame {
constructor() {
}
/***** Error on the $.observe() line !! *****/
loadMap() {
this.linkTemplate("options", "#optionsTmpl", this).done(function (currentGame) {
$.observe(currentGame, "*", currentGame.modelChangeHandler);
});
}
modelChangeHandler(ev, eventArgs) {
if (ev.type == "propertyChange") {
var _game: UnchartedGame = ev.currentTarget;
if (eventArgs.path == "mapType") {
try {
_game.myMap.setMapType(mapTypeNames[newValue]);
}
catch (ex) {
}
}
}
}
loadTemplate(tmplName: string) {
var deferredLoad = $.Deferred();
try {
var filePath: string = "../tmpl/" + tmplName + ".tmpl.html";
$.get(filePath).then(function (templateText) {
$.templates(tmplName, templateText);
deferredLoad.resolve();
})
}
catch (e) {
deferredLoad.reject();
}
return deferredLoad.promise();
}
linkTemplate(tmplName: string, targetId: string, model: UnchartedGame) {
var deferredLink = $.Deferred();
try {
this.loadTemplate(tmplName).done(
function () {
$.templates[tmplName].link(targetId, model);
deferredLink.resolve(model);
});
}
catch (e) {
deferredLink.reject();
}
return deferredLink.promise();
}
}
感谢和问候,
克劳德
TypeScript 希望您使用 ES6 导入语句,即:import * as jQuery from 'jquery';
另一种方法是在您的模块加载器中引用脚本(例如 jquery,然后使用 declare const jQuery: any
在整个应用程序中使用。另一种方法是在 tsconfig 中引用类型:
第一种使用 import 语句的方式:
import * as jQuery from 'jquery'; // jquery installed via npm install jquery
import * as jsrender from 'jsrender'; // jsrender installed via npm install jsrender
// === OR ===
declare const jQuery: any; // Reference the script in your module loader/html
declare const jsrender: any; // Reference the script in your module loader/html
class UnchartedGame {
constructor() {
}
/***** Error on the $.observe() line !! *****/
loadMap() {
this.linkTemplate("options", "#optionsTmpl", this).done(function (currentGame) {
$.observe(currentGame, "*", currentGame.modelChangeHandler);
});
}
modelChangeHandler(ev, eventArgs) {
if (ev.type == "propertyChange") {
var _game: UnchartedGame = ev.currentTarget;
if (eventArgs.path == "mapType") {
try {
_game.myMap.setMapType(mapTypeNames[newValue]);
}
catch (ex) {
}
}
}
}
loadTemplate(tmplName: string) {
var deferredLoad = $.Deferred();
try {
var filePath: string = "../tmpl/" + tmplName + ".tmpl.html";
$.get(filePath).then(function (templateText) {
$.templates(tmplName, templateText);
deferredLoad.resolve();
})
}
catch (e) {
deferredLoad.reject();
}
return deferredLoad.promise();
}
linkTemplate(tmplName: string, targetId: string, model: UnchartedGame) {
var deferredLink = $.Deferred();
try {
this.loadTemplate(tmplName).done(
function () {
$.templates[tmplName].link(targetId, model);
deferredLink.resolve(model);
});
}
catch (e) {
deferredLink.reject();
}
return deferredLink.promise();
}
}
使用 TSConfig:
{
"compilerOptions": {
"types": ["jquery", "jsrender"]
}
}
另一种可能的方法是转到主模块并使用以下行:
import 'jquery'; // jquery installed via npm install jquery
我注意到这就是我在我的一个项目中使用它的方式(需要 @types 文件)。
我还建议不要使用引用路径,因为 TypeScript 就是关于类型的。大多数模块(据我目前所见)都带有一个 typings 文件。但是,例如 jQuery 则不会。因此,在执行 npm install jquery
之后,您还需要通过 运行 npm install @types/jquery --save-dev
安装它的类型
我过去曾使用过 JSRender、JSViews 和 JSObservables。这一次,我开始了一个新项目,但使用的是 TypeScript,但我不确定如何使用它...我发现在何处放置对 .js、.d.ts、.ts...[= 的引用非常令人困惑15=]
我能描述一下我有什么吗,哪里失败了,如果你能给我一些指导....这将给我一个很好的开始!
我的 "scripts" 文件夹包含这些文件:
~\Typings\jQuery\jQuery.d.ts
installed from this NuGet package: jquery.TypeScript.DefinitelyTyped v0.0.1
~\Typings\jsrender\jsrender.d.ts
installed from this NuGet package: jsrender.TypeScript.DefinitelyTyped v0.1.8
文件:~/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="scripts/jquery-3.1.1.js"></script>
<script src="scripts/jsviews.js"></script>
<script src="scripts/game/game.js"></script>
<script src="scripts/game/app.js"></script>
</head>
<body>
<div id="view">
<div id="myMap"></div>
<div id="optionsTmpl"></div>
</div>
</body>
</html>
文件:~/tmpl/options.tmpl.html
<div class="optionsFrame">
<select data-link="mapType">
{^{for mapTypes}}
<option value="{{:id}}">{{:name}}</option>
{{/for}}
</select>
<input type="button" value="test">
</div>
文件:app.ts
/// <reference path="../typings/jquery/jquery.d.ts" />
/// <reference path="../typings/jsrender/jsrender.d.ts" />
class UnchartedApp {
game: UnchartedGame;
init() {
this.game = new UnchartedGame();
this.game.loadMap();
}
}
window.onload = () => {
var app = new UnchartedApp();
app.init();
};
文件:game.ts
/// <reference path="../typings/jquery/jquery.d.ts" />
/// <reference path="../typings/jsrender/jsrender.d.ts" />
class UnchartedGame {
constructor() {
}
/***** Error on the $.observe() line !! *****/
loadMap() {
this.linkTemplate("options", "#optionsTmpl", this).done(function (currentGame) {
$.observe(currentGame, "*", currentGame.modelChangeHandler);
});
}
modelChangeHandler(ev, eventArgs) {
if (ev.type == "propertyChange") {
var _game: UnchartedGame = ev.currentTarget;
if (eventArgs.path == "mapType") {
try {
_game.myMap.setMapType(mapTypeNames[newValue]);
}
catch (ex) {
}
}
}
}
loadTemplate(tmplName: string) {
var deferredLoad = $.Deferred();
try {
var filePath: string = "../tmpl/" + tmplName + ".tmpl.html";
$.get(filePath).then(function (templateText) {
$.templates(tmplName, templateText);
deferredLoad.resolve();
})
}
catch (e) {
deferredLoad.reject();
}
return deferredLoad.promise();
}
linkTemplate(tmplName: string, targetId: string, model: UnchartedGame) {
var deferredLink = $.Deferred();
try {
this.loadTemplate(tmplName).done(
function () {
$.templates[tmplName].link(targetId, model);
deferredLink.resolve(model);
});
}
catch (e) {
deferredLink.reject();
}
return deferredLink.promise();
}
}
感谢和问候,
克劳德
TypeScript 希望您使用 ES6 导入语句,即:import * as jQuery from 'jquery';
另一种方法是在您的模块加载器中引用脚本(例如 jquery,然后使用 declare const jQuery: any
在整个应用程序中使用。另一种方法是在 tsconfig 中引用类型:
第一种使用 import 语句的方式:
import * as jQuery from 'jquery'; // jquery installed via npm install jquery
import * as jsrender from 'jsrender'; // jsrender installed via npm install jsrender
// === OR ===
declare const jQuery: any; // Reference the script in your module loader/html
declare const jsrender: any; // Reference the script in your module loader/html
class UnchartedGame {
constructor() {
}
/***** Error on the $.observe() line !! *****/
loadMap() {
this.linkTemplate("options", "#optionsTmpl", this).done(function (currentGame) {
$.observe(currentGame, "*", currentGame.modelChangeHandler);
});
}
modelChangeHandler(ev, eventArgs) {
if (ev.type == "propertyChange") {
var _game: UnchartedGame = ev.currentTarget;
if (eventArgs.path == "mapType") {
try {
_game.myMap.setMapType(mapTypeNames[newValue]);
}
catch (ex) {
}
}
}
}
loadTemplate(tmplName: string) {
var deferredLoad = $.Deferred();
try {
var filePath: string = "../tmpl/" + tmplName + ".tmpl.html";
$.get(filePath).then(function (templateText) {
$.templates(tmplName, templateText);
deferredLoad.resolve();
})
}
catch (e) {
deferredLoad.reject();
}
return deferredLoad.promise();
}
linkTemplate(tmplName: string, targetId: string, model: UnchartedGame) {
var deferredLink = $.Deferred();
try {
this.loadTemplate(tmplName).done(
function () {
$.templates[tmplName].link(targetId, model);
deferredLink.resolve(model);
});
}
catch (e) {
deferredLink.reject();
}
return deferredLink.promise();
}
}
使用 TSConfig:
{
"compilerOptions": {
"types": ["jquery", "jsrender"]
}
}
另一种可能的方法是转到主模块并使用以下行:
import 'jquery'; // jquery installed via npm install jquery
我注意到这就是我在我的一个项目中使用它的方式(需要 @types 文件)。
我还建议不要使用引用路径,因为 TypeScript 就是关于类型的。大多数模块(据我目前所见)都带有一个 typings 文件。但是,例如 jQuery 则不会。因此,在执行 npm install jquery
之后,您还需要通过 运行 npm install @types/jquery --save-dev