如何导入本地typescript模块？

我正在构建一个TypeScript模块，我想最终发布到NPM，但我首先想将它导入另一个本地主机项目进行测试。这两个项目都使用TypeScript

模块使用

tsc

成功编译，并将看似正确的文件输出到

dist

目录中。该模块包括通过相对本地路径成功导入和编译模块的

在宿主项目中，我尝试了

npm-link

和local

npm-install../localmodule

来导入模块

tsconfig模块是：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "preserve",
    "declaration": true,
    "declarationMap": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "noImplicitAny": true,
    "typeRoots": ["./src/types"],
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

模块

package.json

具有

  "main": "dist/index.js",
  "types": "dist/index.d.ts",

然后，当我尝试用导入的本地模块编译宿主项目时，我得到了一堆错误，这些错误我在模块

故事书中或在开发过程中没有看到

一个关键路径错误，表明主机项目未看到模块导出之一丢失或未找到
以及一些类型错误，这些错误指示主体项目丢失或推断的类型与
故事书不同

创建一个扩展名为{{name}}.d.ts的文件

全球d.ts

declare module "your-module-name";

我假设您在宿主项目的编译过程中正在使用webpack。如果是这样，则需要在webpack配置文件的属性中指定
.jsx
，以便宿主项目可以识别具有这些扩展名的模块。下面是一个示例
webpack.config.js
使用
resolve.extensions
与
.js
、
.jsx
和
.json

module.exports = {
  // your other config here...
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  }
};

该模块有自己导出的
.d.ts
文件，我不想将
{{name}.d.ts
文件提交给宿主项目，因为它最终将
npm安装
您可以在tsconfig
中添加include的模块包括：[“src/***.ts”、“src/***.tsx”、“src/***/***.vue”、“tests/***.ts”，“tests/***.tsx”、“src/public path.ts”、“src/public path.ts”、“src/main.ts”]
谢谢@JoshA我在宿主项目中确实缺少了
.jsx
解析。但我还添加了
“jsx”：“react”“，
到模块
tsconfig
，以便导出默认
es5
。不幸的是，宿主项目仍然缺少模块上应包含的类型。有什么想法吗？我在问题中添加了更多细节，我真的说不出是什么导致了
属性。。类型上不存在…
错误，除非我看到更多的源代码。我假设错误消息中提到的
ReactRegl
是
regl
库的某种包装器？如何在
Ground.ts
中引用它？添加
“jsx”很好：“react”
顺便说一句！好的，我解决了打字的问题。在宿主项目和模块项目中，
deferred regl
的类型定义存在冲突。宿主项目中的副本没有正确的实现Oh cool很高兴您找到了它！：-）
<e> ERROR in /Users/kevzettler/code/hypeworks/src/Ground.ts
<e> ./src/Ground.ts
<e> [tsl] ERROR in /Users/kevzettler/code/hypeworks/src/Ground.ts(17,17)
<e>       TS2339: Property 'clear' does not exist on type 'ReactRegl'.
<e>  @ ./src/RenderStore.ts 24:0-48 271:12-24 292:12-18 488:28-40 497:28-34
<e>  @ ./src/ClientStore.ts 18:0-40 74:32-43
<e>  @ ./src/browser.worker.ts 1:0-40 10:20-31
<e>  @ ./src/index.ts 83:21-77
<e>
<e> ERROR in /Users/kevzettler/code/hypeworks/src/Ground.ts
<e> ./src/Ground.ts
<e> [tsl] ERROR in /Users/kevzettler/code/hypeworks/src/Ground.ts(19,21)
<e>       TS2339: Property 'texture' does not exist on type 'ReactRegl'.
<e>  @ ./src/RenderStore.ts 24:0-48 271:12-24 292:12-18 488:28-40 497:28-34
<e>  @ ./src/ClientStore.ts 18:0-40 74:32-43
<e>  @ ./src/browser.worker.ts 1:0-40 10:20-31
<e>  @ ./src/index.ts 83:21-77

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "esnext",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "useDefineForClassFields": true,
    "lib": [
      "es2019",
      "dom"
    ],
    "exclude": [
      "./src/server.worker.ts",
      "./src/server.ts",
      "./src/network/ServerNetwork.ts",
      "./src/Worker/implementation.worker_threads.ts"
    ]
  }
}

declare module "your-module-name";

module.exports = {
  // your other config here...
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  }
};