Typescript 从包类型扩展名称空间

我在这里尝试从包类型扩展名称空间，

@typings/fullcalendar

/// <reference path="./types/fullcalendar" />

import * as fullcalendar from 'fullcalendar';
import { TimeGrid } from 'fullcalendar';

// TimeGrid and fullcalendar.views are used then

这会导致类型错误，因此显然

fullcalendar

命名空间没有正确扩展：

TS2305:模块“…/node_modules/@types/fullcalendar/index”没有导出的成员“TimeGrid”

TS2339:类型“typeof”../node\u modules/@types上不存在属性“views”/ 完整日历/索引“'”

如何以正确的方式实现这一点

考虑到

typeroot

中指定了

types

目录，这里是否可以避免使用

reference

指令

---

该应用程序与Webpack和awesome typescript loader捆绑在一起，因此其行为可能不同于其他编译方法。在某些情况下，类型在IDE检查（WebStorm）中似乎是正常的，但在编译时仍然存在类型错误。

我们可以在非声明

.ts

中导入命名空间，并将其作为扩展类型再次导出：

// custom-fc.ts : enhances declaration of FC namespace
import * as origFC from "fullcalendar";

declare namespace Complimentary {
    class TimeGrid {
        prepareHits(): void;
    }
    let views: any;
}

// apply additional types to origFc and export again
export const FC: (typeof Complimentary & typeof origFC) = origFC as any;

---

（这与您的场景有所不同，因为我使用的是

@types/

软件包和webpack

ts loader

，但您应该能够执行类似的操作。）

您可以轻松地扩展“fullcalendar”或任何其他TypeScript命名空间

示例：创建fullcalendar-extension.d.ts文件

/// <reference path="<path-to-typings-dir>/fullcalendar/index.d.ts" />

declare module 'fullcalendar' {

  export interface TimeGrid {

    customField: string;

    customMethod(arg1: number, arg2: boolean): boolean;

    prepareHits();
  }

  namespace customNamespace {

    export interface AnotherTimeGrid {
      customField1: string;
      customField2: boolean;
    }
  }
}

有关模块和名称空间的更多信息，请查看和使用模块和名称空间的TypeScript文档

---

干杯

使用最新的TypeScript v4，当我在将外部文件和lib与Svelte组合时遇到问题时，我这样做了：

// root/my-declarations.d.ts

import { SomeNameSpace as SomeNameSpaceOriginal} from '../../any-relative-path/to/ts-file';
import {SvelteComponentDev} from 'svelte/internal';

declare namespace SomeNameSpaceExtended {
    function setValue(value:any):any
    let UI:SvelteComponentDev
    let abc:string
}

declare global {
    //this will add new items to top-level (root)
    //note: in my case, only importing "as SomeNameSpaceOriginal" gave me correct typing later using our new extended global SomeNameSpace
    let SomeNameSpace: typeof SomeNameSpaceOriginal & typeof SomeNameSpaceExtended;

    //this will add new items to window:
    interface Window {
        elementInside:'window.elementInside'
    }
}

---

向上投票的答案与提供了关于如何扩展周围事物的最大理解。

但是

customNamespace

应该如何以“单向”识别？我正在尝试从“fullcalendar”导入{TimeGrid}；CustomGrid类扩展了TimeGrid{…}，并且TimeGrid及其方法无法从接口中识别（并且我看不到它在“第二种方式”中的工作方式）。在给定的示例中，TimeGrid被定义为接口，CustomGrid类只能实现它。如果TimeGrid是一个可以在fullcalendar库中扩展的类，则在fullcalendar-extension.d.ts文件中将其声明为类。用“class”替换“interface”关键字很容易。关于导入，由于ES6模块中的对象分解功能有限，“customNamespace”只能按“second way”所示使用。谢谢，我尽量避免重新导出，因为我没有在扩展键入的地方扩展包本身，但它确实起到了作用。我以

宣布班级免费结束了。。。导出默认origFC。TS的命名空间正常，但导致IDE出现一些类型问题。在TS3中不工作？导出默认原件；无法将命名空间“original”用作值。无法将命名空间“extended”用作类型。是否有方法扩展原始命名空间而不更改其名称？
/// <reference path="<path-to-typings-dir>/fullcalendar/index.d.ts" />

declare module 'fullcalendar' {

  export interface TimeGrid {

    customField: string;

    customMethod(arg1: number, arg2: boolean): boolean;

    prepareHits();
  }

  namespace customNamespace {

    export interface AnotherTimeGrid {
      customField1: string;
      customField2: boolean;
    }
  }
}

// one way
import { TimeGrid } from 'fullcalendar';

const timeGrid: TimeGrid;

// second way
import * as fc from 'fullcalendar';

const timeGrid: fc.TimeGrid;
const anotherTimeGrid: fc.customNamespace.AnotherTimeGrid;

// root/my-declarations.d.ts

import { SomeNameSpace as SomeNameSpaceOriginal} from '../../any-relative-path/to/ts-file';
import {SvelteComponentDev} from 'svelte/internal';

declare namespace SomeNameSpaceExtended {
    function setValue(value:any):any
    let UI:SvelteComponentDev
    let abc:string
}

declare global {
    //this will add new items to top-level (root)
    //note: in my case, only importing "as SomeNameSpaceOriginal" gave me correct typing later using our new extended global SomeNameSpace
    let SomeNameSpace: typeof SomeNameSpaceOriginal & typeof SomeNameSpaceExtended;

    //this will add new items to window:
    interface Window {
        elementInside:'window.elementInside'
    }
}