TypeScript 2.0:如何引用同一命名空间但位于子文件夹中的对象? [英] TypeScript 2.0: How can I reference objects in the same namespace but in a sub folder?

问题描述

使用 TypeScript 2 命名空间，如何让代码识别添加到子文件夹中命名空间的类.

(我使用的是 AngularJS 1.5 和 Webpack，但是这两个应该在这方面没有作用.)

在下面的例子中，指令 D1 位于指令下的文件夹中，_bootstrap_directives.ts 无法解析它.它得到这个错误:

错误 TS2339:属性D1Directive"在类型typeof Directives"上不存在.

也许我只需要创建 myLibrary.d.ts 来明确定义合约?

-

 指令>d1>d1.directive.ts>d1.scss>_bootstrap_directives.ts>d2.directive.ts

-

<代码>>d1.directive.ts(d2.directive 相同，但类名不同，没有 scss 导入)导入'./d1.scss';//对于 webpack命名空间 MyLibrary.Directives {导出类 D1Directive 实现 ng.IDirective {限制:字符串 = 'A';范围:布尔值 = 假；构造函数(){//noop}静态工厂():ng.IDirectiveFactory {const 指令 = () =>{返回新的 D1Directive();}返回指令；}}}

-

<代码>>_bootstrap_directives.ts (//'typeof Directives' 类型不存在属性 'D1Directive'.导入'./d1/d1.directive';//对于 webpackangular.module('myLibrary').directive('d1', MyLibrary.Directives.D1Directive.factory());//这个有效导入'./d2.directive';//对于 webpackangular.module('myLibrary').directive('d2', MyLibrary.Directives.D2Directive.factory());

我使用的是 Visual Studio 2015.

解决方案

原来 webpack 是问题所在.留在这里是为了帮助社区.

将此行从 d1.directive.ts 移动到引导程序文件消除了该问题.

import './d1.scss';

因此吸取了教训 - 不要导入命名空间之外的子文件夹.

Using TypeScript 2 namespaces, how do I get code to recognize classes added to a namespace in a sub folder.

(I am using AngularJS 1.5 and Webpack, but neither of these should play a part in this.)

In the below example, directive D1 is in a folder under directives, and _bootstrap_directives.ts can not resolve it. It gets this error:

error TS2339: Property 'D1Directive' does not exist on type 'typeof Directives'.

Perhaps I just need to create myLibrary.d.ts to explicitly define the contract?

-

directives
> d1
  > d1.directive.ts
  > d1.scss
> _bootstrap_directives.ts
> d2.directive.ts

-

> d1.directive.ts (d2.directive is the same with a different class name and no scss import)

import './d1.scss'; // for webpack
namespace MyLibrary.Directives {
    export class D1Directive implements ng.IDirective {
        restrict: string = 'A';
        scope: boolean = false;

        constructor() {
            // noop
        }
        static factory(): ng.IDirectiveFactory {
            const directive = () => {
                return new D1Directive();
            }
            return directive;
        }
    }
}

-

> _bootstrap_directives.ts (

// Property 'D1Directive' does not exist on type 'typeof Directives'. 
import './d1/d1.directive';  // for webpack
angular.module('myLibrary')
    .directive('d1', MyLibrary.Directives.D1Directive.factory()); 

// This one works
import './d2.directive'; // for webpack
angular.module('myLibrary')
    .directive('d2', MyLibrary.Directives.D2Directive.factory());

I'm using Visual Studio 2015.

解决方案

Turns out webpack WAS the issue. Leaving this here to help the community.

Moving this line from d1.directive.ts to the bootstrap file removed the issue.

import './d1.scss';

So lesson learned - don't import in a subfolder outside of a namespace.

这篇关于TypeScript 2.0:如何引用同一命名空间但位于子文件夹中的对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！