从.d.ts文件导入Typescript
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;
}
}
}
当然,目前还没有真正的功能。但这不是现在的重点。
我还用gullow创建了自己的构建过程。以下是它的相关部分:
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时,typescript编译器会给我这样的消息:
错误TS2307:找不到模块"SkApp/Core"
当我将sk-app.d.ts文件中的模块定义更改为:时
declare module "SkApp/Core" {
它运行良好。但我希望我的定义文件可以通过gump生成,而不必自己更改模块声明。
如有任何帮助,我们将不胜感激。
(当然,我知道angular2仍然处于alpha状态)
导出模块SkApp.Core{我认为应该是:
module SkApp.Core {...
据我所知,Typescript没有模块级可见性修饰符
相关文章:
- Typescript导入导出的类会发出require(..),从而导致浏览器错误
- 我可以将函数导入到typescript类文件中吗
- 模块的TypeScript导入导出行为
- 如何从typescript文件导入javascript文件
- 使用typescript访问导入的服务时发生Angular2错误
- 可以Typescript导入CommonJS模块
- 可以't在不提供文件扩展名的情况下导入TypeScript模块
- Typescript:从CommonJS模块导入默认值,从打字文件导出附加类型
- TypeScript:导入的模块未编译
- TypeScript:从类访问全局变量而不导入
- 为什么我不能在 TypeScript 中导入 sprintf-js
- TS2307:在 TypeScript 上导入 Angular2 时找不到模块“angular2/core”
- 如何将Javascript文件导入Typescript
- 将JS文件导入Typescript
- 从.d.ts文件导入Typescript
- 转换angular 1的问题.将x控制器导入TypeScript
- Angular-cli +电子导入typescript
- 将Angular JavaScript模块导入TypeScript
- 如何在没有模块声明的情况下导入Typescript
- 正在导入Typescript中的Chai