Question

有没有办法在angular cli项目中使用typescript声明合并？

例如，我有两个包含对象的文件：

fileA.ts

export const objA {
  foo: 'foo',
}

fileB.ts

export const objB {
  bar: 'bar'
}

对于这些文件中的每一个，我都声明了一个与接口名称相同的打字稿声明文件

fileA.d.ts

interface MyObjectDef {
  foo: string,
}

fileB.d.ts

interface MyObjectDef {
  bar: string
}

我的问题是如何在我的angular cli项目中使用合并接口定义MyObjectDef？

例如在我的 app.component.ts

中

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <p>Hello</p>
  `,
  styles: []
})
export class AppComponent {

  /*
   * MyObjectDef shoud be a merged definition of both files (fileA and fileB),
   * so I can use myObject.foo and myObject.bar without compiler errors.
   */
  public myObject: MyObjectDef 
}

我根本没有在网上找到任何有用的答案。

在我看来，我必须修改我的tsconfig.json文件才能完成这项工作

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

背景

我在Medium上找到了一个有趣的article，其中使用了打字稿合并并且非常方便，但我无法使其正常工作。

Answer 1

在不同的文件/模块中，您应将其声明为相同的命名空间。

在下面的示例中，我在global命名空间中声明了它，但我猜你使用了你想要的任何命名空间。

declare global {
  interface MyInterface {
    someLabel: string;
  }
}

参考：last two sections of declaration merging in TS manual

如何在Angular CLI项目中使用Typescript声明合并

1 个答案: