Typescript interface for default export

Question

I have a very basic folder structure for config files like this:

/config
  /button
  /colors
  /index

Code looks like this:

colors.ts

export interface Colors {
  [key: string]: string,
}

export default {
  black: '#111',
  grey: '#999',
  green: '#4c8857',
  red: '#bd1414',
  white: '#fff',
};

index.ts

import colors from './colors';

export default {
  button,
  colors,
};

I get the following error:

Could not find a declaration file for module './colors'. '/xxxxx/styles/config/colors.js' implicitly has an 'any' type.

I'm completely new to Typescript and can't find any tutorials or examples online that clearly explain what I've done wrong here.

Answer 1

There is 2 problems: you are not importing the interface properly because of a case error:

import colors from './colors';
export interface Colors {

try

import {Colors} from './colors';

But here you are simply exporting the "Colors" interface, not the object of colours.

the code you might like would be something like:

export interface Colors {
  [key: string]: string,
}

export const defaultColors: Colors = {
  black: '#111',
  grey: '#999',
  green: '#4c8857',
  red: '#bd1414',
  white: '#fff',
};

Then import it

import {defaultColors} from './colors'

Note: if you struggle with imports, I strongly advise to use an IDE like Webstorm which can automatically import the right dependencies.