Extend a namespace from package typings
You can easily extend the 'fullcalendar' or any other TypeScript namespace.
Example: create fullcalendar-extension.d.ts file
/// <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;
}
}
}
Note: ensure that this file is picked-up by the TypeScript compiler.
Use the newly defined types from the extended module.
// 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;
For more info on modules and namespaces you can check TypeScript documentation on Modules and Namespaces and using them together.
Cheers!
We can import a namespace in a non-declaration .ts
, and export it again as a extended type:
// 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;
// use-fc.ts : consumer of extended declaration
import { FC } from "./custom-fc";
console.log(FC.TimeGrid);
console.log(FC.views);
(This somehow differs from your scenario, in that I'm using @types/
packages and webpack ts-loader
, but you should be able to do something similar.)