如何使用来自DefinitelyTyped的下划线库和打字稿？

Question

DefinitelyTyped提供了下划线声明文件，定义了List接口，并在代码中大量使用。

// Common interface between Arrays and jQuery objects
interface List {
    [index: number]: any;
    length: number;
}

interface UnderscoreStatic {
    sortBy(list: List, iterator?: any, context?: any): any;
    groupBy(list: List, iterator: any): any;
    countBy(list: List, iterator: any): any;
}

我正在尝试使用countBy 函数：

// <reference path="../DefinitelyTyped/underscore/underscore.d.ts" />

declare var _: UnderscoreStatic;

_.countBy([1,2,3], function(item) {
    return item%2;
});

当我编译文件时，它会抛出错误：

> tsc commons.ts

> E:/commons.ts(5,0): Supplied parameters do not match any signature of call target:
    Could not apply type 'List' to argument 1, which is of type 'number[]'

我不知道为什么会出现这个错误，因为number[]适合接口List。

哪里出了问题，如何解决？

Answer 1

2021 年更新

将以下依赖添加到package.json：

  "dependencies": {
    "underscore": "^1.13.1"
  },
  "devDependencies": {
    "@types/underscore": "^1.11.3"
  }

然后运行：

$ npm install

在您的 TypeScript 文件中，使用以下命令导入 underscore：

import * as _ from 'underscore';

Answer 2

使用 Typescript 2.0，您可以使用 import 语句导入下划线，如下所示：

import * as _ from "underscore";

然后，使用_.<function_name> 调用任何下划线函数。

PS：不要忘记使用 npm 安装下划线库。

Answer 3

先加下划线输入：

npm install typings --global
typings install dt~jasmine --save --global

然后在你的 .ts 源中引用这个文件

/// <reference path="../../../typings/underscore.d.ts" />

然后导入下划线以避免编译错误（注意 - 在这种情况下下划线库应安装为 npm 引用，而不是 bower：npm install underscore --save）

import _ = require('underscore');

然后像往常一样使用下划线使用 "_" 全局变量

_.isNumber(123);

Answer 4

检查下划线 TypeScript 定义文件是否与您使用的下划线版本匹配。 countBy 的签名发生了变化，如果 TS 定义与底层 JS 不匹配，你会得到一些意想不到的行为。

Answer 5

你需要传递一个与List接口兼容的对象，它是一个有长度的数组：

/// <reference path="underscore.d.ts" />

var list: List;
list[0] = 1;
list[1] = 2;
list[2] = 3;
list.length = 3;

_.countBy(list, function (item) {
    return item % 2;
});

老实说，数组在技术上实现了这一点，因为它具有长度属性 - 但上面的代码可以编译。

这个的简写版本有点恶心：

/// <reference path="underscore.d.ts" />

var list = <List><any> [1, 2, 3];

_.countBy(list, function (item) {
    return item % 2;
});