绝对导入 typescript react - TypeScript

介绍

在 TypeScript 和 React 中，我们经常需要导入许多组件和依赖项。在使用相对导入语句时，当文件层次嵌套很深或者项目规模很大的时候，这种方式会变得非常冗长和混乱。

绝对导入（Absolute Imports）提供了一种更简洁的导入方式，可以直接从项目根目录开始定位导入文件，而不需要考虑相对路径。这种方式提供了更好的可维护性和可扩展性。

如何使用

配置 TypeScript

要在 TypeScript 中使用绝对导入，首先需要在 tsconfig.json 文件中配置 baseUrl 和 paths：

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

• baseUrl：指定项目中用于解析导入的根文件夹的相对或绝对路径。
• paths：指定别名和路径，例如，这里的 @/* 表示所有以 @ 开头的导入都将被解析到 src 目录下。

使用绝对导入

现在，我们就可以在 TypeScript 和 React 中使用绝对导入了。

例如，在 src/components/Button.tsx 中使用绝对导入语句引入一个组件：

import React from 'react';
import { Icon } from '@/components';
import './Button.scss';

interface Props {
  label: string;
  onClick: () => void;
}

const Button: React.FC<Props> = ({ label, onClick }) => {
  return (
    <button className="button" onClick={onClick}>
      <Icon />
      {label}
    </button>
  );
};

export default Button;

在上面的代码中，我们使用了 @/components 来引入另一个组件 Icon，不需要写繁琐的相对路径语句，就可以完成导入。

建议的文件结构

建议将项目文件按功能模块划分到不同文件夹下，例如：

src/
  components/
    Button.tsx
    Icon.tsx
  pages/
    Home.tsx
    About.tsx
  ...

这样可以更好地组织代码，方便使用绝对导入。

总结

绝对导入提供了一种更简洁和清晰的导入方式，可以显著提高代码的维护性和可读性。在使用 TypeScript 和 React 时，推荐使用绝对导入。