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.

if you're trying to import the colors interface, I'm fairly certain it should be ìmport {Colors} from './colors'; — Jhecht
– Jhecht, Commented Apr 26, 2019 at 11:45

Flavien Volken · Accepted Answer · 2019-04-26 12:14:26Z

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.

edited Apr 26, 2019 at 12:14

answered Apr 26, 2019 at 11:47

Flavien Volken

21.5k14 gold badges114 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CaribouCode Over a year ago

I'll give this a go (in an hour, just need to step out for a bit!)

CaribouCode Over a year ago

This does indeed work. In this situation though, is it better to not define the interface and simply let Typescript infer the types for me as Mark Atkinson suggests? It would be a bit cleaner, but with the .ts filenames I get the error I originally described without adding the interface myself.

Flavien Volken Over a year ago

I strongly suggest to type everything, this will help you to maintain the project in the long term. If you don't, typescript will either infer it to any or possibly to [key: string]: string; it's risky, as this won't prevent you to add a number colour by mistake like for instance: black: 00000.

Mark Atkinson · Accepted Answer · 2019-04-26 12:19:34Z

0

Can I suggest you let Typescript infer the types for you. You are likely to have more accurate types than defining an interface with the [key: string]: string.

If you don't want to use a default export I would suggest just exporting the following:

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

You would then import import { Colors } from './colors'

If colors is the only/main thing in the colors file then you can go ahead and export using default like so:

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

export default colors;

You would then import import Colors from './colors'

answered Apr 26, 2019 at 12:19

Mark Atkinson

5188 silver badges14 bronze badges

1 Comment

CaribouCode Over a year ago

If I don't define an interface or any types, I still get the error: Could not find a declaration file for module... How do I solve that?

Chukwuemeka Maduekwe · Accepted Answer · 2023-01-09 06:53:16Z

0

Simply create your ts file with

Interface: can be imported or in the same file
Create your variable to be exported and make sure you use the interface here
Export your variable as default, and the interface is toed to it

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

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

export default defaultColors

answered Jan 9, 2023 at 6:53

Chukwuemeka Maduekwe

8,7627 gold badges61 silver badges76 bronze badges

Collectives™ on Stack Overflow

Typescript interface for default export

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related