2

我正在学习 TypeScript，我怕我咬的比我能嚼的还多。我找到了教程和示例

但我就是不能一下子让它全部工作。

我有 3 个文件，都包含单独的 jQuery 插件，但共享一些常量。我有使用这些的所有页面的单独 ts 文件。我想在我的 cshtml 中引用这些每页的 TS 文件<script data-main="app/this-page" type="text/javascript" src="lib/require.js"></script>，并让这个页面说“导入我的插件，然后$("#someId").runMyPlugin(someSettings);”

谁能推荐我一种方法？应该说什么出口？我应该导入什么？一节课有什么？

4

3 回答 3

2

在按照 blorkfish 的回答配置 require 后，问题是说服 typescript 将依赖项编译为 jquery 插件作为 AMD 依赖项。这可以使用晦涩的 /// <amd-dependency path="..."> 指令来完成。

以 jquery.cookie 为例，您可以将其添加到您的 typecipt 模块中：

/// <amd-dependency path="jquery.cookie">
import $ = require("jquery");
import ko = require("knockout");
export = yourmodule;

module yourmodule {
    ...
}

这将编译成：

define(["require", "exports", "jquery", "knockout", "jquery.cookie"],
        function (require, exports, $, ko) {
    var yourmodule;
    ...
}

所以现在你可以在你的 typescript 模块中使用这个插件了。

于 2015-02-13T12:19:36.537 回答
1

如果您的常量是在一个类中定义的，即 Constants.ts 

export class Constants {
   constant1: string = "firstConstant";
   constant2: string = "secondConstant";
}

然后导出这个类，并在需要的地方导入。
IE 

import ref_Constants = module("./Constants");  
var firstConstant = ref_Constants.Constants.constant1;

然后，使用 AMD 模块将在需要时自动加载 Constants.js。

更新 好的，所以要使用 JQuery 的 require.js 导出插件，您需要导出到 $ 符号：
这只能通过 require.config 和 shim 属性来完成。您将需要以下内容： 

require.config({
    baseUrl: '../',
    paths: {
        'jquery': 'lib/jquery-1.7.2',
        'myjqueryextension': 'lib/myjqueryextension' // note this is the .js file
    }, 
    shim: {
        jquery: {
            exports: '$'
        },
        myjqueryextension: {
            exports: '$'
        }
    }
});

require(['jquery','myjqueryextension'], 
    ($, myjqueryextension) => {
        // note that your extension will be attached to $ here, because of the shim
        $('#test').myExtensionFunction('foo', 'bar');
    });

这里的重要部分是 shim 中的 export: '$' 行。这会将您的扩展附加到 $。

于 2013-03-07T14:38:25.657 回答
0

我在设置和 AMD/RequireJS Typescript 工作流程时遇到了类似的问题。我刚刚在 Github 上发布了一个项目示例。

我结合了 Gulp、RequireJS 和 Typescript，而不需要 shim 文件。它还包括获取 Require 和任何供应商文件的任务，将它们与应用程序文件捆绑在一起，并生成一个缩小的 JS 文件，该文件将运行整个应用程序。希望这可以帮助人们。

https://github.com/abogartz/typescript-amd-gulp-example

于 2015-04-19T23:30:13.150 回答