本篇将介绍TypeScript的声明文件,并简单演示一下如何编写和使用声明文件。本篇也是这个系列的最后一篇。

一、声明文件简介

TypeScript作为JavaScript的超集,在开发过程中不可避免要引用其他第三方的JavaScript的库。虽然通过直接引用可以调用库的类和方法,但是却无法使用TypeScript诸如类型检查等特性功能。为了解决这个问题,需要将这些库里的函数和方法体去掉后只保留导出类型声明,而产生了一个描述JavaScript库和模块信息的声明文件。通过引用这个声明文件,就可以借用TypeScript的各种特性来使用库文件了。

 

二、常见库的结构

有以下几种:全局库、CommonJS、AMD、UMD

全局库:

早期版本的jQuery就是使用了全局库的使用方式:

1 (function( window, undefined ) {
2     var jQuery = function( selector, context ) {
3         return new jQuery.fn.init( selector, context, rootjQuery );
4     }
5 
6     // ......
7     
8     window.jQuery = window.$ = jQuery;
9 })(window);

通常会看到:

    • 顶级的声明是 var 或者 function 
    • 有 window 或者 document 这些DOM对象存在
    • 对象一般会赋值到 window 上

CommonJS

NodeJs模块化采用的规范,声明和使用方式如下:

1 // 模块定义文件
2 exports.module_name = {};
3 
4 // 模块调用文件
5 var module = require('模块定义文件名');

通常会看到:

    • 赋值给 exports 或者 module.exports 
    • 无条件调用 require 

AMD

前端框架普遍采用的模块化的规范,声明和使用方式如下:

1 // 定义模块
2 define('模块名', ['jquery', ...], function($){
3     // ......
4 });
5 
6 // 调用模块
7 require(['模块名'], function(module) {
8     // ......
9 });

通常会看到:

    • 无条件调用 define 或者 require 

UMD

为了能同时支持上述所有风格的库声明方式,就有了通用模块规范(UMD)。一般会有下面这种声明方式:

 1 // moment.js
 2 (function (global, factory) {
 3     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
 4     typeof define === 'function' && define.amd ? define(factory) :
 5     global.moment = factory()
 6 }(this, function() {
 7     function hooks() {
 8         // ......
 9     }
10 
11     // ......
12     return hooks;
13 }));

通常会看到:

    • 在文件顶端会有一大串 typeof XXX 的判断
    • 同时有 exports 、 define 这种关键词

通过识别库的结构,采用不用的声明方式来编写声明文件。

 

三、如何编写声明文件

linq.js实现了在JavaScript里使用Linq语法,在C#有的Linq方法,在它里面几乎都有。下面将在nodejs环境里演示如何编写和使用linq.js的一个简单的声明文件。

1. 创建一个nodejs工程,并通过 npm install linq --save 下载插件包。工程结构如下所示:

 TypeScript学习笔记(八) - 声明文件

 1 {
 2   "name": "tstest",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1",
 8     "start": "node dist\\main.js"
 9   },
10   "author": "",
11   "license": "ISC",
12   "dependencies": {
13     "linq": "^3.0.5"
14   }
15 }
package.json

相关文章: