Can interface be changed to type when adding modules with TS? I am looking to customize the Theme in Material-UI with my own properties. I have created a file called createPalette.d.ts:
import '@material-ui/core/styles/createPalette';
declare module '@material-ui/core/styles/createPalette' {
export interface PaletteOptions {
neutral?: {
moderate: string;
dark: string;
};
}
export interface Palette {
neutral: {
moderate: string;
dark: string;
};
}
}
The PaletteOptions and Palette interfaces have similar contents, so I tried to simplify by extracting the neutral as an external type like this:
import '@material-ui/core/styles/createPalette';
type CustomPalette = {
neutral: {
moderate: string;
dark: string;
};
};
declare module '@material-ui/core/styles/createPalette' {
export interface PaletteOptions extends Partial<CustomPalette> {}
export interface Palette extends CustomPalette {}
}
Although it works, the PaletteOptions and Palette are now considered "empty" and I receive errors due to the no-empty-interfaces rule. After running auto-fix in ESLint, it changed them to types:
import '@material-ui/core/styles/createPalette';
type CustomPalette = {
neutral: {
moderate: string;
dark: string;
};
};
declare module '@material-ui/core/styles/createPalette' {
export type PaletteOptions = Partial<CustomPalette>;
export type Palette = CustomPalette;
}
There are no more ESLint errors, but now the module augmentation does not work because Material-UI typings specify PaletteOptions and Palette as interfaces and TypeScript ignores my declarations.
What options do I have now? Is there a way to make TS accept PaletteOptions and Palette as types or should I just ignore that rule in ESLint?