目录中所有文件的TsConfig.json路径匹配

Question

I have been looking into tsconfig.json and found that it can have paths created. Currently the only way I can find that works is something like this:

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

Which then allows me to do something like this:

import { dialogSale } from '@components/dialog-sale/dialog-sale.component';

This works fine however for my folder structure is a bit of a waist of time as my base path is already at app so I only have to do this which is actually 1 character shorter:

import { dialogSale } from 'components/dialog-sale/dialog-sale.component';

What I would like to do to shorten my import statements as well as to reduce developer error with sub directories is to be able to use like this:

import { dialogSale } from '@components/dialog-sale.component';

Above would be the most ideal as it reduces the chance of developer error as well as straight and to the point for import statements.

Answer 1

If you want it shorter you should further specify your paths. For example:

"compilerOptions": {
  "baseUrl": "./src/app",
  "paths": {
    "@components": ["components/dialog-sale/*"]
 }
}

and then you could use:

import { dialogSale } from '@components/dialog-sale.component';

This would not be really practical if you later want to add other 'components' different from dialog-sale.. In that case you could do:

"compilerOptions": {
  "baseUrl": "./src/app",
  "paths": {
    "@dialogSale": ["components/dialog-sale/*"]
 }
}

and use:

import { dialogSale } from '@dialogSale/dialog-sale.component';

Depending on how it works best for you. Hope this helps!