TypeScript 和 jQuery 等库（带有 .d.ts 文件）

Posted 2023-03-13

【中文标题】TypeScript 和 jQuery 等库（带有 .d.ts 文件）

【英文标题】：TypeScript and libraries such as jQuery (with .d.ts files)

【发布时间】：2014-12-19 20:00:49

【问题描述】：

我已经浏览了整个互联网，但我还没有找到一个全面的指南来告诉我如何使用 jquery 之类的库并在 TypeScript 项目中使用它。如果存在指南，我很想知道这些是我真正需要知道的事情：

我知道 .d.ts 文件仅用于智能感知，所以我需要什么才能让 jquery 真正工作（编译为 ts？） 在使用 VS2013 时，我是否需要 requires 或 //reference，如果需要，它实际上在做什么？ 从这些 .d.ts 和 jquery js 文件到在我的 ts 项目中使用库（或任何库）的任何事情。

我已经能够弄清楚几乎所有其他的事情，但这一点相当令人沮丧。

【问题讨论】：

哦，这里也有答案：***.com/questions/12682028/…

同样，这仅对希望使用智能感知的非 Visual Studio 用户有用。我有智能感知工作，并希望让图书馆工作！

【参考方案1】：

TypeScript 中的约定是在您的项目中有一个 reference.ts 或 reference.d.ts 文件，它将引入这些外部引用。

所以在您的reference.ts 文件中添加您的jquery.d.ts 的路径（该路径将相对于reference.ts 文件）：

/// <reference path="../relative/path/to/jquery.d.ts"/>

那么你应该可以在你的项目中使用 jQuery 定义了。

注意：reference.ts 文件是一个约定，但如果需要，您实际上可以将 <reference path="..."/> 指令添加到任何 TypeScript 文件。

---

来自TypeScript Language Specificiation (PDF)11.1.1：

/// <reference path="…"/> 形式的注释添加了对源文件的依赖 在路径参数中指定。路径是相对于包含的目录解析的 源文件。

【讨论】：

这仅适用于自动完成/智能感知，但实际上并没有为我提供库的功能。我想真正使用图书馆！也许这非常简单，但我还是很迷茫。仅供参考，这在 Visual Studio 中不再需要。它会自动为所有 .d.ts 文件执行此操作。

然后只在页面上包含 jQuery。 .d.ts 告诉 TypeScript jQuery 提供了哪些接口和类型，然后由 jQuery 实际提供实现。

另外，自从我发布了这个答案，有一个新的@types 项目可以让你做import * as $ from 'jquery' 并获得正确的类型信息：typescriptlang.org/docs/handbook/…

【参考方案2】：

你不需要将 jquery 编译成 typescript，你只需要使用一个定义文件来告诉 Typescript javascript 库是如何工作的。

在此处获取定义： https://github.com/DefinitelyTyped/DefinitelyTyped

如果使用 Visual Studio，则来自 NuGet。

然后像往常一样编写你的打字稿，并在需要时声明你的库：

declare var library : libraryTypedName

例如 jquery 的 d.ts 文件已经为你做了这个（检查底部）：

declare module "jquery" 
    export = $;

declare var jQuery: JQueryStatic;
declare var $: JQueryStatic;

https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/jquery

现在在您的 .ts 文件中，当您键入 $ 时，它应该会为您提供 typescript intellisense。

现在您想要包含在 bundleconfig / <script> 中的唯一内容是 .js 文件，包括您的和 jquery / 其他库。打字稿只有编译时间！

【讨论】：

我有那个 .d.ts 并且我收到了这个错误：ms-appx://io.cordova.ohdh/www/js/game.js 0x800a1391 中第 1 行第 1 列的未处理异常- JavaScript 运行时错误：'$' 未定义

我有 scr="jquery-2.1.1-min.js"！但这确实帮助我了解发生了什么以及为什么，谢谢！

..."并在需要时声明你的库："，你能说一下为什么吗？如果发生这种情况，您的意思是在 d.ts 中表示正在编写的 lib？

@CRice 适用于尚未为您执行此操作的库，如果您使用绝对类型或其他定义源，它们中的大多数会执行此操作。如果您有更具体的问题，您可能想开始一个新问题:)

如何导入jquery

【参考方案3】：

我在 VS 2015 中使用它，而且我是 typescript 的新手。我在我的项目中使用了 jQuery 和传单。我的解决方案是：

从 VS 2015 中的 NuGet 管理器下载所有这些库。

按照本教程中的说明拖动库文件 (.js)：

https://taco.visualstudio.com/en-us/docs/get-started-first-mobile-app/

通过添加这些行来修改 index.html 文件。

<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/leaflet.css" />

<script src="scripts/jquery-2.2.3.min.js"></script>
<script src="scripts/jquery.mobile-1.4.5.min.js"></script>
<script src="scripts/leaflet-0.7.3.min.js"></script>

修改 index.ts 文件。首先将这些行添加到顶部以引用您的库。您可能需要更改路径。

在 onDeviceReady() 中添加您赢得的代码，否则您可能会收到 javascript 运行时错误，例如未定义 sysmbol "$"。我猜这是因为代码尝试在设备尚未准备好时加载某些功能。这对我有用。希望对你也有帮助。

    function onDeviceReady() 

    document.addEventListener('pause', onPause, false);
    document.addEventListener('resume', onResume, false);


    var parentElement = document.getElementById('deviceready');
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');
    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');

    // your code goes here

    

【参考方案4】：

此解决方案不适用于打字稿纯粹主义者 :)，但如果您更喜欢单行解决方案，只需将此行添加到您的 .ts 文件中：

declare var $: any

然后在您的打字稿代码中的任何位置使用$，就像您在 js 代码中一样。