打字稿申报模块 [英] TypeScript declare module

问题描述

我想在我的打字稿创建本地的模块（与角2 的）应用程序，然后简单提及任何文件，导入模块，如对myApp /组件，对myApp /管等，不使用相对路径（ ../../../为MyComponent ），因为我现在要做的。

例如，2角，可像这样使用。 （我还没有发现他们是如何使它的）

 进口{}组件从angular2 /核心;
 

我怎样才能实现这一行为？

---

我不喜欢 components.ts ， templates.ts 的一些文件等等，我从当前部分中导出文件

 导出*从'./menu/item';
从./menu/logo的出口*;
从./article/article的出口*;
从./article/sidebar的出口*;
 

...然后我有一个主文件 myApp.ts 在这里我声明模块，像这样：

 申报模块的myapp /组件的{
    从./application/components的出口*;
}声明模块的myapp /模板{
    从./application/templates的出口*;
}
 

但如此TS构建告诉我像 ... ... FILE_PATH错误（4,9），该文件不产生任何东西：错误TS2305：模块''的myapp /组件''没有出口成员AlfaBeta。


顺便说一句。我的 tsconfig.json 是这样的：

  {
    compilerOptions：{
        目标：ES5
        模块：系统
        moduleResolution：节点，
        sourceMap：真实，
        emitDecoratorMetadata：真实，
        experimentalDecorators：真实，
        removeComments：假的，
        noImplicitAny：假的
    }，
    排除：[
        node_modules
    ]
}
 

解决方案

在打字稿2.0+有一个的baseUrl 和路径在 tsconfig.json 属性，就可以使用。你并不需要使用再出口文件。

在你的情况，你会想：

  {
    compilerOptions：{
        的baseUrl：，。
        路径：{
            的myapp /组件：
                菜单/项，
                菜单/标志
                文/条，
                文/侧边栏
            ]
            的myapp /模板：
                模板/ *//任何文件要包括
            ]
        }
        //等等...
    }，
    //等等...
}
 

在的baseUrl 您可以指定基本目录（通常是项目的根目录）。这允许你做从任何地方进口的目录结构，如果你是做在的baseUrl 指定的目录导入。

例如，用目录结构...

 文件夹1
     - 文件夹2
         -  file2.ts
file1.ts
 

...指定的baseUrl：将允许你输入 file1.ts 中。 file2.ts ，如果你在根目录做：

 进口*作为文件1从文件1;
 

在的baseUrl 的顶部，你可以添加路径。这是对您有用，它必须以的baseUrl 使用。在路径您可以指定模式来匹配和文件的列表，在该模式包含。这是在 github上发出像这样所示：

 路径：{
    模式1：[换人名单]
    模式2：换人名单]
    ...
    模式-N：换人名单]
}
 

请注意，这将只是让编译。我相信你也不得不为了得到这个能够在运行时工作，可能需要使用再出口文件，并设置路径指向 components.ts 和 templates.ts 。

您可以在 GitHub上的问题或阅读我的其他这里相关答案也显示了pre TS 2.0解决方案。

I want to create local modules in my TypeScript (with Angular 2) app and then simple reference to any file with importing module like myApp/components, myApp/pipes etc., not using relative path (../../../MyComponent) as I have to do now.

For instance, Angular 2 can be used like this. (And I haven't found how they make it)

import {Component} from 'angular2/core';

How can I achieve this behavior?

---

I did some files like components.ts, templates.ts etc. where I export files from current section:

export * from './menu/item';
export * from './menu/logo';
export * from './article/article';
export * from './article/sidebar';

... and then I have one main file myApp.ts where I declare modules like so:

declare module 'myapp/components' {
    export * from './application/components';
}

declare module 'myapp/templates' {
    export * from './application/templates';
}

But this file doesn't generate anything so TS build tells me errors like ...file_path...(4,9): error TS2305: Module ''myapp/components'' has no exported member 'AlfaBeta'.

Btw. my tsconfig.json looks like this:

{
    "compilerOptions": {
        "target": "ES5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude": [
        "node_modules"
    ]
}

解决方案

In TypeScript 2.0+ there is a baseUrl and paths property in tsconfig.json that you can use. You don't need to use "re-export files".

In your case, you would want:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "myapp/components": [
                "menu/item",
                "menu/logo",
                "article/article",
                "article/sidebar",
            ],
            "myapp/templates": [
                "templates/*" // whatever files you want to include
            ]
        }
        // etc...
    },
    // etc...
}

In baseUrl you can specify the base directory (usually the root directory of the project). This allows you to do imports from anywhere in the directory structure as if you were doing an import from the directory specified in baseUrl.

For example, with the directory structure...

folder1
    - folder2
        - file2.ts
file1.ts

...specifying a "baseUrl": "." would allow you to import file1.ts in file2.ts as if you were in the root directory by doing:

import * as File1 from "file1"; 

On top of baseUrl you can add paths. This is useful for you and it must be used with a baseUrl. In paths you can specify patterns to match and a list of files to include in that pattern. This is illustrated in the github issue like so:

"paths": {
    "pattern-1": ["list of substitutions"],
    "pattern-2": ["list of substitutions"],
    ...
    "pattern-N": ["list of substitutions"]
}

Note that this will just make it compile. I believe you'll also have to configure SystemJS in order to get this to work at runtime and that might require using a re-export file and setting the path to point to components.ts and templates.ts.

You can read more about this in the github issue or read my other related answer here that also shows a pre TS 2.0 solution.

这篇关于打字稿申报模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！