javascript - Typescript-gränssnitt för standardexport

Jag har en mycket grundläggande mappstruktur för konfigurationsfiler som ser ut så här:

/config
  /button
  /colors
  /index

Koden ser ut så här:

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,
};

Jag får följande fel:

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

Jag är helt ny på Typescript och kan inte hitta några handledningar eller exempel online som tydligt förklarar vad jag har gjort fel här.

Svar #1

Det finns 2 problem: du importerar inte gränssnittet korrekt på grund av ett fel i versalisering:

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

försök

import {Colors} from './colors';

Men här exporterar du helt enkelt "Colors"-gränssnittet, inte färgobjektet.

koden du kanske gillar skulle vara något i stil med:

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

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

Importera det sedan

import {defaultColors} from './colors'

Obs: om du har problem med importeringar, rekommenderar jag starkt att använda en IDE som Webstorm som automatiskt kan importera rätt beroenden.

Svar #2

Kan jag föreslå att du låter Typescript härleda typerna åt dig. Du har sannolikt mer exakta typer än om du definierar ett gränssnitt med [key: string]: string.

Om du inte vill använda en default-export skulle jag föreslå att bara exportera följande:

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

Du skulle då importera import { Colors } från './colors'

Om färger är det enda/huvudsakliga i colors-filen kan du gå vidare och exportera med default så här:

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

export default colors;

Du skulle sedan importera import Colors from './colors'