TypeScript 项目使用 npm 模块

typescript

npm 模块都是 JavaScript 代码

TypeScript 项目使用 npm 模块

简介

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

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

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

{
 "name": "left-pad",
 "version": "1.3.0",
 "description": "String left pad",
 "main": "index.js",
 "types": "index.d.ts",
 // ...
}

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

$ npm install --save lodash
$ npm install --save @types/lodash

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

TS 模块转 npm 模块

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

如何写 TypeScript 模块

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

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2015",
    "declaration": true,
    "outDir": "./dist"
  },
  "include": [
    "src/**/*"
  ]
}
  • "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。

{
  "name": "hwrld",
  "version": "1.0.0",
  "description": "Can log \"hello world\" and \"goodbye world\" to the console!",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": [
    "/dist"
  ]
}

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

然后，就是编译和发布。

$ tsc
$ npm publish