Javascript 使用JsObservable with TypeScript需要帮助吗？_Javascript_Typescript_Jsrender_Jsviews

Javascript 使用JsObservable with TypeScript需要帮助吗？

javascript typescript

Javascript 使用JsObservable with TypeScript需要帮助吗？,javascript,typescript,jsrender,jsviews,Javascript,Typescript,Jsrender,Jsviews,过去我已经使用过JSRender、JSView和JSObservable。这一次，我开始了一个新的项目，但使用的是TypeScript，我不知道如何使用它。。。我发现在哪里放置对.js、.d.ts、.ts的引用非常混乱我能描述一下我有什么，它失败的地方，如果你能提供一些指导。。。。这会给我一个好的开始我的“脚本”文件夹包含以下文件： ~\Typings\jQuery\jQuery.d.ts installed from this NuGet package: jquery.TypeScrip

过去我已经使用过JSRender、JSView和JSObservable。这一次，我开始了一个新的项目，但使用的是TypeScript，我不知道如何使用它。。。我发现在哪里放置对.js、.d.ts、.ts的引用非常混乱

我能描述一下我有什么，它失败的地方，如果你能提供一些指导。。。。这会给我一个好的开始

我的“脚本”文件夹包含以下文件：

~\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>


{^{对于映射类型}}
{{:name}
{{/for}}

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

//
/// 
类未知应用程序{
游戏：未知游戏；
init（）{
this.game=新的未知游戏（）；
这个.game.loadMap（）；
}
}
window.onload=（）=>{
var app=新的未知app（）；
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();
    }
}

//
/// 
班级未知游戏{
构造函数（）{
}
/*****$.observe（）行出错*****/
loadMap（）{
this.linkTemplate（“选项”，“选项TMPL”，this）.done（函数（currentGame）{
$.observe（currentGame，“*”，currentGame.modelChangeHandler）；
});
}
modelChangeHandler（ev、eventArgs）{
如果（ev.type==“属性更改”）{
var_博弈：未知博弈=ev.currentTarget；
if（eventArgs.path==“mapType”）{
试一试{
_game.myMap.setMapType（mapTypeNames[newValue]）；
}
捕获（ex）{
}
}
}
}
loadTemplate（tmplName:string）{
var deferredLoad=$.Deferred（）；
试一试{
var filePath:string=“../tmpl/”+tmplName+”.tmpl.html”；
$.get（文件路径）.then（函数（templateText）{
$.templates（tmplName，templateText）；
deferredLoad.resolve（）；
})
}
捕获（e）{
deferredLoad.reject（）；
}
返回deferredLoad.promise（）；
}
linkTemplate（tmplName:string，targetId:string，model:UnchartedGame）{
var deferredLink=$.Deferred（）；
试一试{
此.loadTemplate（tmplName）.done(
函数（）{
$.templates[tmplName].link（targetId，model）；
deferredLink.resolve（模型）；
});
}
捕获（e）{
deferredLink.reject（）；
}
返回deferredLink.promise（）；
}
}

感谢和问候

Claude

TypeScript希望您使用ES6导入语句，即：

import*作为来自“jQuery”的jQuery

另一种方法是在模块加载器中引用脚本（例如jquery），然后在整个应用程序中使用

declare const jquery:any

。另一种方法是引用tsconfig中的键入：

使用导入语句的第一种方法：

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"]
  }
}

另一种可能的方法是转到主模块并使用以下行：

导入“jquery”；//通过npm安装jquery安装jquery

我注意到这就是我在我的一个项目中使用它的方式（必需的@types文件）

我还建议不要使用引用路径，因为TypeScript是关于类型的。大多数模块（我到目前为止看到的）都带有打字文件。但是，例如jQuery就没有。因此，在执行

npm install jquery

之后，您需要通过运行

npm install@types/jquery--save dev

来另外安装它的打字功能。您使用的是Visual Studio代码吗？如果您使用

jQuery

而不是

，会怎么样？谢谢Cristy，我仍然使用VS2015。我将测试MWilson的答案，并记住您的答案。你好，克劳德