Node + Typescript + Angular tsconfig 和编译问题

Question

我有这个项目结构，因为我使用lerna 来管理我的共享/打包代码。

 - project
   |- packages
      |- shared
      |- api
      |- web

我的主要可部署物是 api 和 web，将来可能会扩展，将来也可以扩展共享。

在共享中我有这个结构

- package.json
- tsconfig.json
- src
  |- app.ts
  |- helpers.ts 

这里的第一段代码是我的“模块”的导出

import * as helpers from "./helpers";

export default { helpers };

助手中的功能非常简单，例如。 export const add = function(x:number,y:number):number{return x+y;}

当我尝试使用共享项目时，我从 tsc 收到此错误。 Cannot find module 'shared' or its corresponding type declarations. 这是用法

import helpers from 'shared';
import express from 'express';
 
const app = express();
const port = 3000;
 
app.get('/products', (req, res) => {
  console.log(helpers.add(20,10));
  res.send("hello");
});
 
app.listen(port, () => {
  return console.log(`server is listening on ${port}`);
});

我在 api 和共享项目中的 typescript 文件是完全相同的，我知道这是一个不断变化的 javascript 世界，我不确定可能出了什么问题。以我对打字稿的有限理解，这似乎是正确的。

{
    "compilerOptions": {
      "module": "commonjs",
      "esModuleInterop": true,
      "target": "es6",
      "moduleResolution": "node",
      "sourceMap": true,
      "outDir": "dist"
    },
    "lib": ["es2015", "es6"]
  }

我已经在 api 项目的 node_modules/shared 中验证了 app.ts 每次更改都会正确更新。

我包括 Angular，因为我最终也想在 Angular 应用程序中使用这个共享代码，而且我知道它可能也会有它自己的打字稿蠕虫罐。

Answer 1

设置main属性

您需要确保在您的package.json 文件中使用main 属性。 Typescript 将您的所有代码编译到 dist 目录中。使用 package.json 中的 main 属性，您可以告诉使用包在哪里可以找到入口文件 (dist/app)。

packages/shared/package.json:

{
  "name": "shared",
  "main": "dist/app"
}

设置types属性

您想从packages/shared 包中导出类型声明。否则，如果您将shared 包导入api 或web，您将看不到来自shared 的类型。您需要将packages/shared/tsconfig.json中的declaration属性设置为true。

packages/shared/tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "declaration": true
  },
    "lib": ["es2015", "es6"]
}

那么你需要将package.json中的types属性指向dist/app.d.ts。

更新packages/shared/package.json:

{
  "name": "shared",
  "main": "dist/app",
  "types": "dist/app.d.ts"
}