React分组组件转TypeScript：@components导入类型声明缺失求助

Let's break down how to resolve this type error step by step:

1. Align your barrel export files with TypeScript #

Since you've converted your components to .tsx, updating your barrel export files (the index.js files) to TypeScript will eliminate the need for extra declaration files and keep your codebase consistent:

Convert root component barrel file #

Rename src/components/index.js to src/components/index.ts and keep the same export structure:

export { Button, Textbox, Checkbox} from './inputs'
export { Widget1, Widget2} from './widgets'

Convert inputs barrel file #

Rename src/components/inputs/index.js to src/components/inputs/index.ts:

export { InputButton as Button } from './button'
export { InputTextbox as Textbox } from './textbox'
export { InputCheckbox as Checkbox } from './checkbox'

Convert widgets barrel file #

Rename src/components/widgets/index.js to src/components/widgets/index.ts:

export { Widget1 } from './widget1'
export { Widget2 } from './widget2'

2. Ensure your .tsx components export typed entities #

Make sure each component file properly defines and exports typed components. For example, in button.tsx:

import React from 'react';

// Define your component props interface
interface ButtonProps {
  label: string;
  onClick?: () => void;
  disabled?: boolean;
}

// Export the typed component
export const InputButton: React.FC<ButtonProps> = ({ label, onClick, disabled }) => {
  return <button onClick={onClick} disabled={disabled}>{label}</button>;
};

This ensures type information flows through your barrel exports to the @components module.

3. Verify your TypeScript configuration (tsconfig.json) #

Double-check that your path alias and file inclusion settings are correctly configured:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"]
    },
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "node"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

The include array tells TypeScript to scan all files in your src directory, including the new .ts/.tsx files.

4. Refresh VS Code's TypeScript Server #

Sometimes VS Code's language server doesn't pick up changes immediately. Press Ctrl+Shift+P (or Cmd+Shift+P on Mac), search for TypeScript: Restart TS Server, and run it. This should clear the red squigglies once all configurations are correct.

After completing these steps, your import { Button } from "@components" will work without type errors, and VS Code will provide proper intellisense for all your components.

内容的提问来源于stack exchange，提问作者Mark David