![](/img/trans.png)
[英]How to prevent TypeScript from including .d.ts import in the output?
[英]Typescript import from .d.ts file
我為此編寫了一個簡單的angular2組件。
到目前為止,這是我的代碼:
import {Component, View} from 'angular2/angular2';
export module SkApp.Core{
@Component({
selector: 'sk-app-side-menu'
})
@View({
template: `
<p>Hello</p>
`
})
export class SkAppSideMenu {
menuActive: boolean;
constructor(){
this.menuActive = false;
}
showMenu(){
this.menuActive = !this.menuActive;
}
}
}
當然,目前還沒有真正的功能。 但這不是現在的重點。
我還使用gulp創建了自己的構建過程。 這是其中的相關部分:
gulp.task('script', ['clean'], function() {
var tsResult = tsProject.src()
.pipe(ts(tsProject));
return merge([
tsResult.dts.pipe(rename({dirname: ''}))
.pipe(concat('sk-app.d.ts'))
.pipe(gulp.dest('dist/')),
tsResult.js
.pipe(rename({dirname: ''}))
.pipe(concat('sk-app.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/'))
]);
});
最后,我得到兩個文件:sk-app.min.js和sk-app.d.ts
sk-app.min.js:
var __decorate=this&&this.__decorate||function(t,e,n,r){if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)return Reflect.decorate(t,e,n,r);switch(arguments.length){case 2:return t.reduceRight(function(t,e){return e&&e(t)||t},e);case 3:return t.reduceRight(function(t,r){return void(r&&r(e,n))},void 0);case 4:return t.reduceRight(function(t,r){return r&&r(e,n,t)||t},r)}},__metadata=this&&this.__metadata||function(t,e){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(t,e):void 0},angular2_1=require("angular2/angular2"),SkApp;!function(t){var e;!function(t){var e=function(){function t(){}return t.prototype.showMenu=function(t){},t=__decorate([angular2_1.Component({selector:"sk-app"}),angular2_1.View({template:'\n <button (click)="showMenu()">click me!</button>\n\n <ng-content></ng-content>\n ',directives:[angular2_1.NgClass]}),__metadata("design:paramtypes",[])],t)}();t.SkApp=e}(e=t.Core||(t.Core={}))}(SkApp=exports.SkApp||(exports.SkApp={}));
sk-app.d.ts:
export declare module SkApp.Core {
class SkApp {
showMenu(x: string): void;
}
}
現在,我想在另一個angular2項目中使用此組件:
import {Component, View, bootstrap} from 'angular2/angular2';
import {SkApp} from "SkApp/Core";
@Component({
selector: 'my-app'
})
@View({
template: '<sk-app></sk-app>',
directives: [SkApp]
})
class MyAppComponent {
}
bootstrap(MyAppComponent);
但是,當我嘗試將該項目編譯為js時,打字稿編譯器會向我顯示以下消息:
錯誤TS2307:找不到模塊'SkApp / Core'
當我將sk-app.d.ts文件中的模塊定義更改為:
declare module "SkApp/Core" {
它工作正常。 但是我想讓gulp生成我的定義文件,而不必自己更改模塊聲明。
任何幫助,將不勝感激。
(我當然知道,angular2仍處於Alpha狀態)
導出模塊SkApp.Core {我認為應該是:
module SkApp.Core {...
因為據我所知,Typescript沒有模塊級別的可見性修飾符
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.