前端界日新月异,发展迅猛,起先从tsd->typings,现在它又变了,开始用npm来管理类型定义文件了。

现在,你仅需使用npm install @types/jquery --save-dev一条命令,就能将jQuery的类型定义加到你的项目里了。

最大的限制可能是需要TypeScript2.0+才能使用,但是这哪里是问题,前端界反正都是用着最新的再转译到es5发布的嘛。

以下为过气内容

周知TypeScriptJavaScript的超集,在我看来,最为明显的区别就是增加了强类型。那么,对于使用JavaScript实现的各种库,就有点麻烦了。

需要增加一个定义文件*.d.ts才能正常使用,本文讲以jQuery为例讲述获取该文件整个流程。

太长不看的话: typings install dt~jquery --save --global, 下一个。


其实在早先,这个声明文件是通过tsd来管理的,但是这个工具已经被抛弃

现在推荐使用的是typings,其实这个链接点进去就够了的(

如果尚未安装,可通过npm install typings --global来获取,如果连npm都没有的话,请安装Node.js

  • 在项目所在文件夹执行typings init(可省略,安装后会自动生成)

  • 搜索所需的库,如

> typings search jquery --ambient
Viewing 20 of 110

NAME                 SOURCE HOMEPAGE                                                DESCRIPTION VERSIONS UPDATED
chai-jquery          dt     https://github.com/chaijs/chai-jquery                               2        2016-12-29T04:01:00.000Z
jasmine-jquery       dt     https://github.com/velesin/jasmine-jquery                           1        2016-11-28T18:40:45.000Z
jquery               dt     http://jquery.com/                                                  2        2016-11-19T04:42:46.000Z
jquery-ajax-chain    dt     https://github.com/humana-fragilitas/jQuery-Ajax-Chain/             1        2016-05-10T01:06:27.000Z
jquery-alertable     dt     https://github.com/claviska/jquery-alertable                        1        2016-10-05T18:40:00.000Z
jquery-backstretch   dt     https://github.com/srobbin/jquery-backstretch                       1        2016-05-10T01:06:27.000Z

...

会获得近似上述的结果

如果曾经有使用tsd的经验,可能使用这样的命令来安装,然而在typings里这样是不对的

> typings install jquery --save --global
typings ERR! message Unable to find "jquery" ("npm") in the registry.
typings ERR! message However, we found "jquery" for 1 other source: "dt"
typings ERR! message You can install these using the "source" option.
typings ERR! message We could use your help adding these typings to the registry: https://github.com/typings/registry
typings ERR! caused by https://api.typings.org/entries/npm/jquery/versions/latest responded with 404, expected it to equal 200

...

报错大概长这样,其实,仔细查看文档就可得知,

  • 正确的安装命令如下
> typings install dt~jquery --save --global
jquery
`-- (No dependencies)

然后就可获得这样的反馈表示安装成功

至此,项目文件夹下的结构大致如下

.
├── sample.ts
├── tsconfig.json
├── typings
│   ├── globals
│   │   └── jquery
│   │       ├── index.d.ts
│   │       └── typings.json
│   └── index.d.ts
└── typings.json

于是我们就能在TypeScript中引用它了

/// <reference path="typings/globals/jquery/index.d.ts" />

function foo(message: string) {
    var jq: JQuery = $("#debug");
    jq.append(message + '<br>');
}