由打字稿生成的定义文件(.d.ts)不能与package.jsontypes一起使用

我使用tsc编译器的–declaration参数从我的打字稿项目创build了一个定义文件(d.ts)。

但是这个生成的定义文件显然不起作用,当我尝试发布与在npm package.json属性typings 。 我创build了另一个项目来testing它。

它抱怨的信息是:“ 导出的外部包文件types文件'… d.ts'不是一个模块,请联系包作者更新包的定义 ”。

这是我的源文件:

MyInterface.ts

export interface MyInterface { MyProperty: string; } 

MyClass.ts

 import {MyInterface} from './MyInterface'; export class MyClass implements MyInterface { get MyProperty(): string { return "MyString"; } } 

MyInheritedClass.ts

 import {MyClass} from './MyClass'; export class MyInheritedClass extends MyClass { public MyMethod(): number { return 1; } } 

tsc命令是这样的:

 tsc MyClass.ts MyInterface.ts MyInheritedClass.ts --declaration -t es5 -outFile "mydefinition.js" --module "system" 

这是生成的定义:

mydefinition.d.ts

 declare module "MyInterface" { export interface MyInterface { MyProperty: string; } } declare module "MyClass" { import { MyInterface } from "MyInterface"; export class MyClass implements MyInterface { MyProperty: string; } } declare module "MyInheritedClass" { import { MyClass } from "MyClass"; export class MyInheritedClass extends MyClass { MyMethod(): number; } } 

有没有另外一件事,我必须做的或生成的定义应该不会在package.jsontypes?

更新的更多细节:

情景是,我有2个项目:

  • 第一个项目是我生成库的地方,我将发布到npm,package.json是我把typeings属性链接到由tsc -d命令生成的mydefinition.d.ts文件的位置。

  • 我创build的第二个项目是通过添加生成的包(包括types)来testing第一个项目。

与两个项目的链接以及该场景的另一个链接:

https://github.com/jvitor83/typings-packagejson

我认为问题出在第一个链接上的“你的定义文件应该写成外部模块”。 但是我想知道是否有办法将生成的定义放到package.json的typings属性中。

重现问题:

  • 克隆这个回购: https : //github.com/jvitor83/test-typings-packagejson

  • 执行'npm install',用VSCode打开并转到文件'src / test.ts'。

解决scheme是:

1 – 添加一个文件'index.ts',导出所有其他文件。

 export * from "./MyInterface" export * from "./MyClass" export * from "./MyInheritedClass" 

2 – 在构build过程中添加两个文件的编译/转换(一个用于声明,另一个用于单个js文件[在tsc编译器中具有out属性])

 let tsConfigDeclaration = gulp_typescript({module: 'system', target: 'es5', declaration: true, removeComments: true }); let tsConfigOneFile = gulp_typescript({module: 'system', target: 'es5', declaration: true, removeComments: true, out: 'typings-packagejson.js'}); 

构build过程中的更多信息: https : //github.com/jvitor83/typings-packagejson/blob/master/gulpfile.js

和索引文件: https : //github.com/jvitor83/typings-packagejson/blob/master/app/src/typings-packagejson.ts

你什么时候收到这个错误?

我在另一个项目中使用生成的d.ts文件,工作正常。

  /// <reference path="mydefinition.d.ts" /> import { MyInterface } from "MyInterface"; import { MyClass } from "MyClass"; import { MyInheritedClass } from "MyInheritedClass"; let x: MyInterface = { MyProperty: "hello!!" }; let y: MyClass = new MyClass(); let z: MyInheritedClass = new MyInheritedClass(); 

而在编译生成JS文件时,

  /// <reference path="mydefinition.d.ts" /> "use strict"; var MyClass_1 = require("MyClass"); var MyInheritedClass_1 = require("MyInheritedClass"); var x = { MyProperty: "hello!!" }; var y = new MyClass_1.MyClass(); var z = new MyInheritedClass_1.MyInheritedClass(); 

在某些HTML文件中使用这个错误时,你会得到这个错误吗? 你是否在HTML中包含了mydefinition.js文件?

更新

根据你的更多细节,下面是我可能提出的解决scheme,添加另一个名为index.ts的文件,并从那里导出你所有的模块,

index.ts

  export * from "./MyInterface" export * from "./MyClass" export * from "./MyInheritedClass" 

添加一个tsconfig.json文件以便于构build,

tsconfig.json

  { "version": "1.0.0", "compilerOptions": { "target": "ES5", "module": "commonjs", "moduleResolution": "node", "sourceMap": false, "declaration": true, "outDir": "lib/" } } 

注意我已经把它作为一个commonjs模块(不知道它是否适合你的需要),使用tsc命令生成生成。 它会生成如下所示的文件,注意它已经为所有的ts文件添加了js文件,而d.ts也适用于所有的模块,但是由于我们已经从单个文件中导出了所有的模块,所以在npm模块的package.json文件中使用会更容易。

在这里输入图像描述

然后在你想发布的npm模块中添加package.json,下面让我们考虑一下模块名是foo

的package.json

  { "name": "foo", "author": "author name", "version": "1.0.0", "main": "lib/index.js", "typings": "lib/index.d.ts" } 

现在在node_module中添加foo文件夹,第二个项目的最终结构将如下所示,

在这里输入图像描述

最后在你的test.ts文件中导入和使用,

test.ts

  import { MyInterface, MyClass, MyInheritedClass } from "foo"; let x: MyInterface = { MyProperty: "hello!!" }; let y: MyClass = new MyClass(); let z: MyInheritedClass = new MyInheritedClass(); 

希望这可以帮助。