typescript 编译器标志需要将 shim 定义为错误。如何解决？答案

【问题标题】：typescript compiler flags requirejs shim definitions as errors. How to fix it?typescript 编译器标志需要将 shim 定义为错误。如何解决？
【发布时间】：2016-11-17 01:59:25
【问题描述】：

我正在尝试专门在 ASP.Net MVC 应用程序前端的 typescript 中工作。这在没有模块的情况下现在可以工作，并且依赖项跟踪变得越来越繁重。所以是时候引入 RequireJS 并使用 Typescript 对 AMD 的支持了。

我已经阅读了很多关于此的内容，并且我认为我非常接近。但是，我遇到了 typescript 的 import 语句的问题，说它找不到在 requireJS 配置中定义的 shim 模块。因此，如果 typescript 只是将模块的名称传递给 JS 代码中的 require 函数，那么一切都会很好。但它没有，它只是抛出一个错误。所以问题是我应该如何为这些 JS 垫片编写导入语句？

这是一个例子： app.ts

import g = require("Api/greeter");
import $ = require("jquery");
import respond = require("respond");

var greeter = new g.Greeter("#content");
greeter.start();

假设这是一个页面的主要 TS，而 greeter 是该页面的视图模型。但我知道我需要页面上的 jquery 和 bootstrap。我的 requireJS 配置有这个设置：

///

requirejs.config({
    baseUrl: 'Scripts',
    paths: {
        "jquery": "libs/jquery-3.1.1",
        "bootstrap": "libs/bootstrap.min",
        "respond" : "libs/respond"
    },
    shim: {
        "bootstrap": { deps: ["jquery"] },
        "respond": { deps: ["bootstrap"] }
    }
});

require(['App/app']);

请注意，我已响应需要引导程序和需要 jQuery 的引导程序。因此，让 app.ts 需要响应应该（并且确实）引入响应、引导程序和 jQuery。

我知道我在 app.ts 中有一个多余的 require("jQuery")。这仅用于说明目的。即，该行工作正常 - TS 将 jQuery 识别为有效的模块名称并将其放入生成的编译 JS 文件中。但是 TS 无法将“respond”识别为模块名称，并且出现编译错误：

Cannot find module 'respond'.

我的文件是这样排列的：

Scripts
->Api
    --> Greeter.ts
-> App
    --> App.ts
-> libs
    --> jQuery-3.1.1.js
    --> bootstrap.js
    --> respond.js

我认为当 jQuery 工作时我做得很好，但我如何获得响应或我必须拉入工作的任何其他纯 JS 库？从我在 TS 文档中可以看出， require() 的参数应该是 JS 文件的有效路径，因为这是编译器获取类型信息的方式。但如果是这样的话，为什么 jQuery 会按照我定义的方式工作？它与respond.js没有什么不同。

谢谢格雷格

【问题讨论】：

我可能刚刚回答了我自己的问题。我认为这里的重要信息是我安装了 jQuery.d.ts 和 require.d.ts 但我没有得到一个 .d.ts 文件来响应。当我试图推进包括淘汰赛时，我想通了这一点。 VS 在击倒时给了我与响应时相同的错误。然后我安装了 knockout.d.ts，突然我的错误消失了。

标签： typescript requirejs amd

【解决方案1】：

我遇到了这个part of the typescript documentation，它处理使用 requireJS 加载淘汰赛。

在其中，他们简要地告诉您加载类型定义文件以进行淘汰：

我们还将获取 Knockout 的声明文件来描述 TypeScript 库的形状。

npm install --save @types/knockout

事实证明，这是 typescript 编译器停止抱怨未知包所需的魔法。

在我上面列出的示例中，我已经安装了 jQuery 的类型定义文件，因此编译器没有抱怨 jQuery。但是我没有respond.js 的类型定义文件。由于没有respond.js 的类型定义文件，编译器然后去寻找respond.js，它假设require 语句的参数是它可以找到要导入的文件的路径。我相信 require 假定该文件是一个打字稿文件并寻找一个 .ts 因为我也无法获得 require 语句来找到 response.js 文件。

最重要的是，当配置为使用 AMD 时，导入以两种方式工作（我还不能谈论其他配置）。

它使用模块的名称来匹配它知道的类型定义文件。如果它与类型定义文件匹配，则假定模块的名称就是该参数名称，并将其传递给生成的 javascript 中的 require 命令。此时，您有责任构建基础架构来加载该模块（即，您的 html 页面直接加载文件，或者更可能的是，您的 requireJS 配置知道如何加载该模块）

即导入 $ = 要求（“jQuery”）； // 通过 requireJS 配置加载
它使用名称在您的项目中查找源文件。指定的参数是源文件的相对路径。

即import g = require("组件/迎宾"); // 从项目的 Components 目录加载 greeter.ts 模块。这也应该设置为通过 requireJS 加载。

我希望这对将来的其他人有所帮助。

【讨论】：