TypeScript 声明模块答案

【问题标题】：TypeScript declare moduleTypeScript 声明模块
【发布时间】：2016-01-28 15:45:06
【问题描述】：

我想在我的 TypeScript（with Angular 2）应用程序中创建本地模块，然后简单地引用任何带有导入模块的文件，例如 myApp/components、myApp/pipes等等，而不是像我现在必须做的那样使用相对路径 (../../../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 build 告诉我像...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"
    ]
}

【问题讨论】：

标签： typescript angular

【解决方案1】：

在 TypeScript 2.0+ 中，tsconfig.json 中有一个 baseUrl 和 paths 属性可供您使用。

在你的情况下，你会想要：

{
    "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": "." 将允许您在file2.ts 中导入file1.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 之前的解决方案。

【讨论】：

TypeScript 1.8.2 在尝试使用 baseUrl: error TS5023: Unknown compiler option 'baseUrl'. 时给了我这个错误，并且 GitHub 问题被标记为 2.0 里程碑。我猜这实际上并没有进入 1.8。
@MrHen 是的，他们现在将其更改为 2.0

【解决方案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';

【讨论】：