【TypeScript】pathにaliasを設定する

TypeScirptのプロジェクトでpathにaliasを設定して、/srcディレクトリを@としてimportしたい

まずはtsconfig.jsonでpathsを設定する

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

次にwebpack.config.jsでaliasを設定する

import { Configuration } from 'webpack';

const config: Configuration = {
  ~~~
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json'],
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  ~~~
};

export default config;

最後にJestの設定しないとエラーになる

moduleNameMapperを使って設定する

jestjs.io

これで@でsrc配下にアクセスすることができるようになった