typescript - 如何正确地将 .js 库添加到我的应用程序，以便我可以将它们导入 TypeScript 模块

Question

如果我想使用像 jQuery 这样的 js 库，在了解 TypeScript 模块的工作原理之前，我会简单地添加一个引用该库的 script 标签，但现在我正在使用 TypeScript我经常找到这样的例子:

import * as $ from 'jquery'

但是 jQuery 不是 TypeScript 模块，那么它是如何工作的呢？我应该如何向我的模块添加外部非 typescript 库？

编辑#1

---

tsconfig.json

明确告诉 typescript 使用 AMD 格式(我选择这个而不是 commonjs 因为我读到因为 AMD 异步加载模块，它更适合 web 应用程序)

{
  "compilerOptions": {
    "sourceMap": false,
    "target": "es5",
    "module": "amd",
    "outDir": "Scripts"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

要安装类型定义，我使用 typings

typings install dt~jquery --global --save

在提到我实际使用的内容之后，我不明白的是，当我在 require.js 加载

<script data-main="Scripts/app/app" src="Scripts/require.js"></script>  

我尝试在 require.js 的脚本标签之前和之后为 jquery.js 文件添加脚本标签，但没有成功。那么我应该如何告诉 require.js “我需要这个 x 文件，去帮我加载它”？

我问这个是因为如果我正确理解类型定义的目的，它们的存在只是为了给我们提供类型检查，仅此而已，我们仍然需要添加我们想要使用的实际库。

---

编辑 #2

所以最后这就是我最终做的:

I) 根据此页面 http://requirejs.org/docs/api.html#data-main , data-main 仅适用于页面只有一个主入口点的情况，当你需要其他js文件时它会失败，所以应该使用以下配置:

<script src="~/Scripts/require.js"></script>
<script>
        require.config({
            paths: {
                "lodash": "Scripts/lodash"
            }
        });
        require(["Scripts/app/js/app"]);
</script>

在这里，我明确告诉 require.js 在哪里可以找到我想使用的库的源代码，在本例中是 lodash.js。只有完成所有路径映射后，我才指示 require 加载 app.js

二) app.ts

   /// <reference path="../../typings/index.d.ts" />
    import * as _ from "lodash";
    console.log('Using Lodash: ' + _.snakeCase("For Whom the Bells Toll");

要使类型定义正常工作，您必须包含一个reference 标记

就是这样。

要测试是否一切正常，我所要做的就是检查控制台并查看一切是否按预期工作:

有一件事我还不是很清楚，所有的魔法是如何在幕后运作的，但是看看为 app.js 生成的 js 代码，我猜第三个依赖 "lodash " 在 require.config

中指定的所有路径中查找

define(["require", "exports", "lodash"], function (require, exports, _) {
    "use strict";
    console.log('Using Lodash: ' + _.snakeCase("For Whom the Bells Toll"));
});

哦，还有最后一件事，如果您不想在需要使用 d.ts 时在 ts 文件中包含 reference 标签文件，您可以在 tsconfig.json 文件中添加 index.d.ts 的路径，如下所示:

{
  "compilerOptions": {
    "sourceMap": false,
    "target": "es5",
    "module": "amd",
    "outDir": "js"
  },
  "include": [
    "src/**/*.ts",
    "../typings/index.d.ts"
  ] 
}

Answer 1

首先，我要指出 TypeScript 不会强制您将 jQuery 用作模块。从技术上讲，您可以将其用作全局。

你说得对，jQuery 不是作为 TypeScript 模块编写的。但有两点需要注意:

1. jQuery 是以一种格式编写的，因此它可以在 CommonJS、AMD/Require.js 等模块系统中使用。由于 TypeScript 覆盖了 ES6 模块以抽象出这些系统，因此它更易于使用。
2. 不是用 TypeScript 编写的库可以使用 TypeScript 声明文件(也称为 .d.ts 文件)来描述。这些文件告诉 TypeScript 已经存在的 JavaScript 代码，以便您可以获得更好的工具和错误检测。

(2) 即使您不决定使用模块也适用。但是通过这种组合，您可以使用 TypeScript 以您指定的方式使用 jQuery。

首先，让我们获取 jQuery 的声明文件:

npm install -S @types/jquery

马上，您应该能够在 TypeScript 中引用 jQuery。如果没有，请添加 "jquery"到 "types"在你的字段 tsconfig.json如下:

{
    "compilerOptions": {
        "types": ["jquery"]
    }
}

此时，只要您的文件不使用任何导入/导出，您就可以像以前一样使用 jQuery。

如果您这样做，请确保您仍然使用 <script>在 HTML 中为 jQuery 标记。

---

现在，您仍然可以决定使用模块 - 在这种情况下，这会变得更加复杂，您需要选择要使用的模块系统。

一般来说，在新的 JavaScript 中使用模块被认为是最佳实践，但它可能让人感觉有点不知所措。这不是 TypeScript 的问题，而是生态系统中的实践如何围绕模块浮出水面的问题。

---

如果您使用的是 Webpack 或 Browserify，则添加 "module": "commonjs"到你的编译器选项 tsconfig.json .然后你就可以写了

npm install -S jquery

Webpack 使用 ts-loader会处理剩下的事情。参见 our guide here了解如何设置 Webpack。请注意，在链接设置中，您仍然需要使用 <script>您决定添加到 externals 的任何库的标签字段。

---

如果您使用的是 Require.js，请添加 "module": "amd" tsconfig.json 中的编译器选项. Require.js 需要一些配置才能开始，但我们有 a guide here使用 AMD 模块。

你必须让 Require.js 知道应该将 jQuery 的导入重定向到哪里:

这可以自己写.ts名为 require-config.ts 的文件

declare var require: any;
require.config({
    paths: {
        "jquery": "Scripts/externals/jquery-3.1.1",
    }
});

然后您可以将适当的脚本标签添加到您的页面:

    <script src="./Scripts/externals/require.js"></script>
    <script src="./Scripts/app/require-config.js"></script>
    <script>
        require(["Scripts/app/app"]);
    </script>