使用带有打字稿的 slick-carousel答案

【问题标题】：using slick-carousel with typescript使用带有打字稿的 slick-carousel
【发布时间】：2016-12-17 23:16:37
【问题描述】：

我是 typescript 的新手，我试图了解模块/包如何在 typescript 中工作的概念。

我目前需要使用 slick-carousel 来创建一个简单的图像滑块。

但是.. 我已经设法安装 jquery.. 但我不太明白如何巧妙地使用 typescript。

到目前为止，我已经使用 npm typings 来安装我的包。

所以我只运行了typings install slick-carousel.. 并且定义文件显示良好.. 然而.. 定义文件不包含声明只有接口.. 所以我不能真正“导入” slick-carousel 到我需要使用它的文件中（我可能错了）..所以我猜这个包应该以某种原因扩展已经存在的 jquery 导入..

但是.. 如果我这样做：

import * as $ from 'jquery';

class Splash {
    init() {
        $.slick();
    }
}

然后

$.slick();

无法解决..

所以.. 你如何“导入”一个只扩展像 jquery 这样的预先存在的包的包？

提前致谢！

【问题讨论】：

标签： typescript slick.js typescript-typings

【解决方案1】：

使用 AMD 模块加载器（例如 RequireJS）可确保您的代码仅在所有外部模块及其依赖项均已加载后运行。

这是一个使用RequireJS 和shim config 的示例：

index.html

<head>
    <title>jQuery++Slick+RequireJS Sample Page</title>
    <script data-main="app" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.js"></script>
</head>

<body>
    <h1>jQuery++Slick+RequireJS Sample Page</h1>
    <p>Look at source or inspect the DOM to see how it works.</p>
</body>

</html>

app.js（从 app.ts 编译后）

requirejs.config({
    baseUrl: ".",
    paths: {
        "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"
        "slick": "https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"
    },
    shim: {
        'jquery': {
            exports: '$'
        }
        'slick': {
            deps: ['jquery'],
            exports: '$.fn.slick'
        }
    }
});

requirejs(["jquery", "slick"], function($) {

    // Code within this function will only execute
    // once jQuery and Slick have been loaded.
    //
    // The configuration above ensures jQuery will always 
    // be loaded before slick.

    $.slick();

});

RequireJS documentation 在how to use with jQuery 上有一个完整的部分

【讨论】：

为什么你更喜欢 require.js 而不是标准的 TypeScript 导入？从技术角度来看，如果将兼容性级别设置为 ES5，import 语句甚至会编译为 require.js 导入。
我的示例旨在展示如何确保在尝试使用依赖项之前已加载它们。如果您在“module”标志设置为“amd”的情况下进行编译，那么 TypeScript 将编译为 AMD 模块（require.js 是 AMD 模块加载器）是正确的。从 ES6 开始，您将能够本地加载模块（无需任何类型的模块加载器），那时我肯定会使用本地模块加载功能。并不是我喜欢 require.js，只是使用模块加载器可以为您提供更多的浏览器覆盖率。希望这能回答您的问题？

【解决方案2】：

您需要声明 $ 。你可以使用declare var $: any;

declare var $: any;
class Splash {
    init() {
        $.slick();
    }
}

它不会再给你错误了:)。

【讨论】：

【解决方案3】：

安装jquery
安装slick-carousel
安装@typings\slick-carousel
从node_modules 添加slick.css
可选：添加 slick-theme.css。

在 TS 文件的顶部添加这 2 个导入：

import $ from 'jquery';
import 'slick-carousel';

然后像下面这样使用它：

$('.your-class').slick()

【讨论】：