Сокращенный импорт для *.tsx и *.jsx, нужно ли добавлять алиасы и в конфиг вебпака и в tsconfig?

Да, добавление алиасов для *.tsx и *.jsx файлов в конфигурацию Webpack и tsconfig может быть полезным, особенно если у вас есть длинные пути импорта или если вы хотите сделать импорт более лаконичным.

Webpack позволяет определить алиасы для импорта модулей с помощью свойства "resolve.alias" в конфигурации. Например, если у вас есть путь к файлам *.tsx и *.jsx, вы можете добавить такой алиас:

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src')
  }
}

После этого вы можете использовать алиас при импорте модулей в своих файлов *.tsx и *.jsx:

import MyComponent from '@/components/MyComponent';

Это делает путь импорта короче и более удобным для использования.

Однако, чтобы TypeScript мог правильно обращаться к пути алиаса, вам также потребуется добавить алиас в tsconfig.json. Для этого вы можете использовать свойство "paths". Например:

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

Это позволит TypeScript корректно обрабатывать пути импорта с алиасом при проверке типов.

Таким образом, добавление алиасов для *.tsx и *.jsx файлов в конфигурации Webpack и tsconfig может значительно упростить импорт модулей и улучшить читаемость кода. Использование алиасов также позволяет легко изменить пути импорта в будущем, если вам потребуется изменить структуру проекта.