组件无法从 React Native 中的 index.d.ts 文件自动导入类型

Question

I have a component called ColorBox, and inside of its folder I have the component itself, style of it and an index file and the index.d.ts file for my types:

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

Here is my index.d.ts file:

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

export interface IBGColor {
  backgroundColor: string;
}

and this is my ColorBox.tsx component:

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;

The problem is that the IProps and IBGColor types does not auto imported from index.d.ts file, how does it works, I've been reading articles about TypeScript and it was mentioned that if you put an index.d.ts file inside of of the module, TypeScript will rely on that and try to find types from that file, but why it does not work in my component?

Should I explicitly import used types inside of my module? If so, then what is the benefit that index.d.ts file provides to us?

Also I use regular react-native init project, not any other fancy boilerplates!

Answer 1

index.d.ts用于声明全局类型，因为这些类型在你的整个项目中都是可用的，所以你不需要在你的组件中导入它，或者在index.d.ts文件中导出它，只需使用它.