Question

如何将我的Typescript项目编译成TS编译，然后我可以将其导入其他TS项目并使用类型定义？为了向后兼容，我也想将它们导出为纯JS，以便其他不使用TS的人仍可以使用该项目。

Answer 1

您需要将项目发布为npm包。你可以在npm上创建一个私有包（但是你需要一个付费帐户），或者你可以公开发布它，或者你可以使用sinopia，这基本上是npm的本地实例。

这些选项中的任何一个都要求您拥有一个指定项目依赖关系的最新package.json文件。

您将以编译形式发布您的包。因此，如果正确指定了tsconfig和package.json，则将导出js文件和d.ts.文件和包可以通过打字稿或香草javascript使用。

Answer 2

我就是这样做的：

./index.ts # Re-exports both my-class and my-interface
./my-class.ts # Implements my-interface.d.ts
./my-interface.d.ts

修改

请注意＆＃34; typings＆＃34;：＆＃34; index.d.ts＆＃34; 行？这描述了主要的＆＃34;类型＆＃34;包的文件。因此，当您从＆＃39; @ my-org / ng-lib＆＃39; 执行 import * as ngLib时，它将使用node_modules / @ my-org / ng-lib / index中的类型intellisense的.d.ts文件，在运行webpack时，会在 node_modules/@my-org/ng-lib/dist/index.js

找到主要的js文件
因此，如果您已经手动创建了一个index.d.ts并且您要导出的所有内容都是接口，那么您可以在该index.d.ts指向typings字段，因为接口没有实现，并描述一个物体的形状。

但是，如果您拥有逻辑对象（方法，getter / setter等），那么很可能是类，您需要将它们转换为.js AND .d.ts文件。

示例：

./index.d.ts ./index.js ./my-class.js ./my-class.d.ts ./my-interface.d.ts

此变换后的这个输出应该在＆＃34; typed＆＃34; NPM包：

"main": "./index.js", "typings": "./index.d.ts", "files": [ "./index.d.ts", "./index.js", "./my-class.js", "./my-class.d.ts", "./my-interface.d.ts" ]

package.json将包含以下行：

import * as ngLib from '@my-org/ng-lib' import { MyClass } from '@my-org/ng-lib' import { MyInterface } from '@my-org/ng-lib' import { MyClass } from '@my-org/ng-lib/my-class' import { MyInterface } from '@my-org/ng-lib/my-interface'

......当使用包时（一旦它在另一个项目中发布并安装），可以通过以下方式完成：

// tsconfig.json { "compilerOptions": { "target": "es5", "module": "commonjs", "sourceMap": false, "emitDecoratorMetadata": true, "declaration": true, "experimentalDecorators": true, "removeComments": true, "noImplicitAny": false, "suppressImplicitAnyIndexErrors": false, "baseUrl": "./src", "listFiles": true, "noImplicitUseStrict": false }, "exclude": [ "node_modules" ] }

结束编辑

tsconfig.json中的声明属性将发出描述＆＃39;形状的.d.ts文件。导出的对象。

// index.ts export * from './module-one' export * from './module-two' export * from './module-three'

如果它是一个复杂的包，我会有单独的模块并将它们聚合在index.ts中，如下所示：

import * as ngLib from '@my-org/ng-lib' import { ModuleOne } from '@my-org/ng-lib/module-one' import { SubModuleOne } from '@my-org/ng-lib/submodules/submodule-one'

您还可以拥有子目录，每个子目录都有自己的索引。

这将创建index.js和index.d.ts文件，它们允许以下内容：

{{1}}

使用Webpack为其他项目编译typescript

2 个答案: