从外部节点模块导入打字稿答案

【问题标题】：Importing typescript from external node modules从外部节点模块导入打字稿
【发布时间】：2015-12-03 18:57:40
【问题描述】：

我想将我的应用程序拆分为不同的节点模块，并有一个主模块来构建所有其他模块，我想将 typescript 与 es6 模块一起使用。

这是我计划的项目结构：

主要
- node_modules
  - 深入
  - dep-b
框架
- 接口
  - IComponent.ts
dep-a
- 组件
  - test.ts
- node_modules
  - 框架
- index.ts
dep-b
- node_modules
  - 框架

我希望能够在框架中定义可以在 dep-a、dep-b 和 main 中使用的接口。

如何正确设置？我可以从我的主模块编译所有内容吗？我是否需要为框架、dep-a、...和另一个输入文件创建不同的包？最好的方法是什么？

我已经设置了一些测试文件和文件夹，并使用 npm 链接链接依赖项和 webpack 来捆绑文件，但我总是遇到找不到文件的问题：

error TS2307: Cannot find module 'framework/interfaces/IComponent'

和

Module not found: Error: Cannot resolve 'file' or 'directory' ./components/test

【问题讨论】：

标签： node.js typescript

【解决方案1】：

TL;DR 使用tsconfig.json 中的declaration: true 为模块生成声明，并在package.json 文件的typings 条目中为生成的类型指定文件

框架

使用类似于此的tsconfig 文件：

{
       "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "declaration": true,
        "noImplicitAny": true,
        "removeComments": true,
        "outDir": "dist",
        ...
    },
    "files": [
         ...
    ]
}

重要的一点是declaration: true，它将在 dist 目录中生成内部声明

假设有一个index.ts 文件（重新）导出framework 的所有有趣部分，创建一个package.json 文件，其中main 和typings 条目分别指向生成的js 和生成的声明，即

{
   "name": "framework",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   ...
 }

将此模块提交到 git repo，例如 bitbucket：“https://myUser@bitbucket.org/myUser/framework.git”

dep-a

在package.json 中创建对framework 的依赖项

{
    "dependencies": {
        "framework":     "https://myUser@bitbucket.org/myUser/framework.git"
    },
}

就是这样。

import * from 'framework'

将自动提取依赖项与类型

显然，可以使用 dep-a 来完成使用 framework 所做的事情，即生成声明、更新 package.json 并使用 dep-a 作为一个在 main

中嵌入类型的模块

注意：如果您不想通过外部 git repo 访问，则文件 URL 将在 package.json/dependencies 中进行

【讨论】：

感谢您的快速响应。这或多或少是有效的。我现在使用 webpack 面临的唯一问题是，dep-a 的源映射不起作用......你知道在 main 中编译 dep-a 以获得正确的源映射的任何可能性吗？
在 main 中编译 dep-a：我不相信这是可能的，除非您将 dep-a 源移动到 main（并且它不再是依赖项）。 soucemaps：我们不使用我们自己的模块发布源地图，所以我没有测试过。我所知道的 webpack 很好的是从 dubugger 中的~ 源访问 js。将地图文件与 dist/ 中的 js 一起用于 dep-a 不起作用？
嗯，好的，谢谢。 deps 中的源图在那里，但似乎不是从 webpack 加载的。我在 webpack 存储库中创建了一个问题：github.com/webpack/webpack/issues/1695

【解决方案2】：

TypeScript 1.6 中的 typings 属性位于 package.json 模块中。你可以check the relevant issue on GitHub。

所以假设你想创建单独的模块（dep-a, framework）。您可以执行以下操作：

main.ts                 // (1)
package.json            // (2)
node_modules/
  dep_a/                
    index.js            // (3)
    index.d.ts          // (4)
    package.json        // (5)
    node_modules/
      framework/ 
        index.js        // (6)
        index.d.ts      // (7)
        package.json    // (8)

让我们看看你的文件中有什么：

//(1) main.ts
import * as depA from "depA";

console.log(depA({ a : true, b : 2 }) === true) // true;

//(2) package.json
{
  name: "main",
  dependencies: {
    "dep_a" : "0.0.1"
  }
  ...
}

对于depA

//(3) dep_a/index.js
module.exports = function a(options) { return true; };

//(4) dep_a/index.d.ts;

import * as framework from "framework";

export interface IDepA extends framework.IFramework {
   a : boolean
}

export default function a(options: IDepA) : boolean;

//(5) dep_a/package.json
{
  name: "dep_a",
  dependencies: {
    "framework" : "0.0.1"
  },
  ...
  typings : "index.d.ts" // < Magic happens here
}

对于framework

//(6) dep_a/node_modules/framework/index.js
module.exports = true // we need index.js here, but we will only use definition file

//(7) dep_a/node_modules/framework/index.d.ts;

export interface IFramework {
   b : number;
}

//(8) dep_a/node_modules/framework/package.json
{
  name: "framework"
  ...
  typings : "index.d.ts"
}

我没有包含在这个答案中（为了清楚起见）是另一个编译阶段，因此您实际上可以使用打字稿编写模块（dep_a、framework），然后在使用之前将它们编译为index.js他们。

【讨论】：

【解决方案3】：

更详细的解释和一些背景见：https://medium.com/@mweststrate/how-to-create-strongly-typed-npm-modules-1e1bda23a7f4

【讨论】：