由打字稿生成的定义文件(.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();
希望这可以帮助。