使用 TypeScript 声明 RequireJS 依赖项答案

【问题标题】：Declaring RequireJS dependencies with TypeScript使用 TypeScript 声明 RequireJS 依赖项
【发布时间】：2017-06-05 07:06:25
【问题描述】：

我将 TypeScript 与 RequireJS 一起使用。如下图所示，我使用 RequireJS 配置定义了一些导入；当然，这些导入来自<script> 标签：

TypeScript 看不到这些声明，所以我想将它们声明为全局变量或其他东西，以避免编译错误。在这种情况下，最好的办法是什么？一切似乎都运行良好，但我确实遇到了更多编译错误，当然还有红色语法高亮显示。

在第一张图片中，我们看到 requirejs 无法识别，在下图中我们也看到 TypeScript 不知道 'redux' 是什么，（但它在 RequireJS 配置中）。

所以我想做的是告诉 TypeScript 以下依赖项：requirejs、redux、react、rxjs、socketio 等

【问题讨论】：

顺便说一句，除了问题中提到的问题之外，RequireJS 似乎与 TS 配合得很好； TS 只会在您转译时使用 AMD 语法包装您的代码，然后 RequireJS 将单独加载您的文件（在开发模式下）。
你试过npm install --save-dev @types/redux吗？（以及其他依赖项也是如此？）
当您执行npm install --save-dev @types/redux 时，您并没有安装依赖项。您正在为该依赖项安装相应的类型。无论如何，您通常必须单独执行此操作。
我不确定你还需要什么！你有来自 require 的 js 库和来自 npm install 的类型。你应该很高兴。
为什么它需要知道它来自哪里？多亏了requirejs，它才拥有它，并且由于定义它知道它的样子。 TS 还需要知道什么？

标签： javascript typescript requirejs frontend

【解决方案1】：

所以部分问题是我需要运行：

npm install -D @types/requirejs
npm install -D @types/redux

然后在我的tsconfig.json，添加：

  "types": [
      "node",
      "lodash",
      "react",
      "react-dom",
      "redux",
      "react-redux",
      "async",
      "requirejs"
    ],
    "typeRoots": [
      "node_modules/@types"
    ],

另外，为了解决 TypeScript 不明白前端的 <script> 标签依赖来自哪里的问题，看起来我们可以这样做：

https://weblog.west-wind.com/posts/2016/Sep/12/External-JavaScript-dependencies-in-Typescript-and-Angular-2

取消引用全局变量以使 Typescript 编译器满意并且不会以编译错误告终，或者有大量类型的负载您可能只使用一次或两次的导入，有时更容易只需自己管理外部库。使用常规脚本标记，或打包为单独的供应商捆绑包的一部分然后简单地在主页中引用。

所以我们可以直接导入而不是使用导入来拉入库像过去一样使用标签：

然后在您想要使用这些的任何 Typescript 类/组件中库通过显式取消引用每个库全局变量显式使用声明并将它们转换为任何：

declare var redux:any; 
declare var socketio: any;

【讨论】：