TypeScript 项目使用 npm 模块

简介

npm 模块都是 JavaScript 代码。即使模块是用 TypeScript 写的，还是必须编译成 JavaScript 再发布，保证模块可以在没有 TypeScript 的环境运行。

问题就来了，TypeScript 项目开发时，加载外部 npm 模块，如果拿不到该模块的类型信息，就会导致无法开发。所以，必须有一个方法，可以拿到模块的类型信息。

有些 npm 模块本身可能包含.d.ts文件甚至完整的 TypeScript 代码。它的package.json文件里面有一个types字段，指向一个.d.ts文件，这就是它的类型声明文件。

  1. {
  2.  "name": "left-pad",
  3.  "version": "1.3.0",
  4.  "description": "String left pad",
  5.  "main": "index.js",
  6.  "types": "index.d.ts",
  7.  // ...
  8. }

如果某个模块没有.d.ts文件，TypeScript 官方和社区就自发为常用模块添加类型描述，可以去官方网站搜索，然后安装网站给出的 npm 类型模块，通常是@types/[模块名]。

  1. $ npm install --save lodash
  2. $ npm install --save @types/lodash

lodash 的类型描述就是@types/lodash的文件index.d.ts。

TS 模块转 npm 模块

TS 代码放在ts子目录，编译出来的 CommonJS 代码放在dist子目录。

如何写 TypeScript 模块

首先，创建模块目录，然后在该目录里面新建一个tsconfig.json。

  1. {
  2.   "compilerOptions": {
  3.     "module": "commonjs",
  4.     "target": "es2015",
  5.     "declaration": true,
  6.     "outDir": "./dist"
  7.   },
  8.   "include": [
  9.     "src/**/*"
  10.   ]
  11. }
  • "declaration": true：生成 .d.ts 文件，方便其他使用 TypeScript 的开发者加载你的库。
  • "module": "commonjs"：编译后的模块格式为commonjs，表示该模块供 Node.js 使用。如果供浏览器使用，则要写成"module": "esnext"。
  • "target": "es2015"：生成的 JavaScript 代码版本为 ES2015，需要 Node.js 8 以上版本。
  • "outDir": "./dist"：编译后的文件放在./dist目录。
  • include：指定需要编译的文件。

然后，使用 TypeScript 编写仓库代码。可以在src子目录里面，编写一个入口文件index.ts。

最后，编写package.json。

  1. {
  2.   "name": "hwrld",
  3.   "version": "1.0.0",
  4.   "description": "Can log \"hello world\" and \"goodbye world\" to the console!",
  5.   "main": "dist/index.js",
  6.   "types": "dist/index.d.ts",
  7.   "files": [
  8.     "/dist"
  9.   ]
  10. }

里面的"types": "dist/index.d.ts"字段指定类型声明文件，否则使用这个库的 TypeScript 开发者找不到类型声明文件。files属性指定打包进入 npm 模块的文件。

然后，就是编译和发布。

  1. $ tsc
  2. $ npm publish

参考链接