我过去曾经使用过JSRender,JSViews和JSObservables。这一次,我开始了一个新项目但是使用TypeScript并且我不确定如何使用它...我发现将引用放在.js,.d.ts,.ts等的地方非常混乱......
我可以请描述一下我所拥有的,失败的地方,以及你是否可以提供一些指导....这会给我一个很好的开始!
我的“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();
}
}
谢谢和问候,
克劳德
答案 0 :(得分:2)
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是关于类型的。大多数模块(从我到目前为止看到的)附带一个打字文件。但是,例如jQuery没有。因此,在执行npm install jquery
之后,您还需要运行npm install @types/jquery --save-dev