本篇将介绍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 下载插件包。工程结构如下所示:
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 }