21 de abril de 2022 • 1 min de leitura

Root import

Fazendo o import de arquivos de uma forma mais limpa

Imagine que você está importando um arquivo, e o caminho para este arquivo fica desta forma:

import Batata from "../../../components/Batata";

Como deixar este import assim?

import Batata from "components/Batata";

Muito simples, assim que você tem sua pasta root(raiz) definida, só especificar ela no arquivo tsconfig.json

"baseUrl": "./"
// ou
"baseUrl": "src"

Super simples e fácil, não?

Magic

E caso você queira especificar os paths, você pode usar o Path mapping:

"paths": {
  "@components": "./src/components/*"
}

Resultado:

import Batata from "@components/Batata";

Ou você também pode fazer esta forma:

"paths": {
  "~/*": "./src/*"
}

Resultado:

import Batata from "~/components/Batata";