从 .d.ts 文件导入打字稿答案

【问题标题】：Typescript import from .d.ts file从 .d.ts 文件导入打字稿
【发布时间】：2015-10-27 15:48:24
【问题描述】：

我为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 状态）

【问题讨论】：

标签： javascript typescript gulp angular

【解决方案1】：

导出模块 SkApp.Core{ 我认为应该是：

 module SkApp.Core {...

据我所知，Typescript 没有模块级别的可见性修饰符

【讨论】：