Question

我想在我的TypeScript（带有Angular 2 的）应用中创建本地模块，然后使用导入模块（如myApp/pipes，{}简单引用任何文件{1}}等，不要使用相对路径（ ../../../ MyComponent ），因为我现在必须这样做。

例如，Angular 2可以像这样使用。（我还没有找到他们如何成功）

import {Component} from 'angular2/core';

我该如何实现这种行为？

我做了一些文件，例如components.ts，templates.ts等，我从当前部分导出文件：

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

...然后我有一个主文件myApp.ts，我在其中声明模块：

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

但是这个文件没有生成任何内容，因此TS版本会告诉我...file_path...(4,9): error TS2305: Module ''myapp/components'' has no exported member 'AlfaBeta'.等错误

顺便说一下。我的tsconfig.json看起来像这样：

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

Answer 1

在TypeScript 2.0+中，您可以使用baseUrl中的paths和tsconfig.json属性。

在您的情况下，您需要：

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

在baseUrl中，您可以指定基目录（通常是项目的根目录）。这允许您从目录结构中的任何位置进行导入，就像从baseUrl中指定的目录进行导入一样。

例如，使用目录结构...

folder1
    - folder2
        - file2.ts
file1.ts

...指定"baseUrl": "."将允许您在file1.ts中导入file2.ts，就好像您在根目录中一样：

import * as File1 from "file1";

在baseUrl之上，您可以添加paths。这对您很有用，必须与baseUrl一起使用。在paths中，您可以指定要匹配的模式以及要包含在该模式中的文件列表。 github issue就像这样说明了这一点：

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

请注意，这只会使其编译。我相信你还必须配置SystemJS以便在运行时使用它，并且可能需要使用barrel文件并设置指向桶文件的路径。

您可以在github issue中阅读有关此内容的更多信息，或阅读我的其他相关答案here，该答案也会显示前TS 2.0解决方案。

Answer 2

使用TypeScript声明模块的另一种方法如下：-

创建文件my-module.d.ts

declare module 'my-module' {
  export default function anyName(arg1: string, arg2: string): MyResponse;
  export interface anyName {
        string: arg;
    }
}

，然后导入为

import * as my-module from 'my-module';

TypeScript声明模块

2 个答案: