Блог

У меня есть компонент под названием ColorBox, и внутри его папки у меня есть сам компонент, его стиль, файл индекса и index.d.ts файл для моих типов:

   ColorBox
   |- Colorbox.tsx
   |- index.ts
   |- styles.ts
   |- index.d.ts

  

Вот мой index.d.ts файл:

 export interface IProps {
  colorName: string;
  colorHex: string;
}

export interface IBGColor {
  backgroundColor: string;
}

  

и это мой ColorBox.tsx компонент:

 import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

import styles from './styles';

const ColorBox: React.FC<IProps> = ({ colorName, colorHex }) => {
  const boxColor: IBGColor = {
    backgroundColor: colorHex,
  };

  return (
    <View style={[styles.box, boxColor]}>
      <Text style={styles.boxText}>{colorName}</Text>
    </View>
  );
};

export default ColorBox;

  

Проблема в том, что типы IProps и IBGColor не импортируются автоматически из index.d.ts файла, как это работает, я читал статьи о TypeScript, и упоминалось, что если вы поместите index.d.ts файл внутри модуля, TypeScript будет полагаться на это и пытаться найти типы из этого файла, но почему это не работает в моем компоненте?

Должен ли я явно импортировать используемые типы внутри моего модуля? Если да, то в чем преимущество, которое index.d.ts предоставляет нам файл?

Также я использую обычный проект инициализации react-native, а не какие-либо другие модные шаблоны!

index.d.ts используется для объявления глобальных типов, и поскольку эти типы доступны во всем вашем проекте, вам не нужно импортировать его в свой компонент или экспортировать в index.d.ts файл, просто используйте его.