Question

对于这样的配置文件，我有一个非常基本的文件夹结构：

/config
  /button
  /colors
  /index

代码如下：

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

我收到以下错误：

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

我对Typescript完全陌生，在网上找不到任何可以清楚说明我做错了什么的教程或示例。

Answer 1

有两个问题：由于大小写错误，您没有正确导入接口：

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

尝试

import {Colors} from './colors';

但是在这里，您只是导出“颜色”界面，而不是颜色对象。

您可能想要的代码如下：

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

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

然后导入

import {defaultColors} from './colors'

注意：如果您在导入方面遇到困难，我强烈建议您使用像Webstorm这样的IDE，它可以自动导入正确的依赖项。

Answer 2

我可以建议您让Typescript为您推断类型吗？与使用[key: string]: string定义接口相比，您可能拥有更准确的类型。

如果您不想使用default导出，建议您导出以下内容：

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

然后您将导入import { Colors } from './colors'

如果颜色是colors文件中唯一/主要的内容，则可以像下面这样继续使用default进行导出：

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

export default colors;

然后您将导入import Colors from './colors'

用于默认导出的Typescript界面

2 个答案: