TypeScriptでES Moduleをimportを絶対パスで参照するやり方です。
絶対パスでimport文を書くと以下のようになります。
import { Heading } from '../../../components/common/Typography';
import { UserTypes } from '../../../constants';
↓
import { Heading } from '@/components/common/Typography';
import { UserTypes } from '@/constants';
メリットデメリットをまとめてみました。個人的にはおすすめではありますが、マストではないかもです。
"typescript.preferences.importModuleSpecifier"
で設定可Next.js(with TypeScript)で設定する場合、tsconfigのcompilerOptionsにimportするルート位置とパスの略称を追加します。
pathsには接頭辞となるシンボルを設定しています。今回は @/
を指定してますが、別のシンボルでも構いません。
逆にシンボルがない場合はライブラリやNode.jsのモジュールと区別がつかなくなるため、利用できません。(webpackを利用する場合は優先順位があってシンボルなしでもできたような気もしますが・・)
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
...
}
}
TypeScriptでの設定は以上になります。jestやstorybookを利用している場合は以下の追加の設定が必要です。
jestを実行する際にモジュールの@部分を変換します。
// jest.config.ts
export default {
...
moduleNameMapper: {
...
// importの@を解決
'@/(.*)': '<rootDir>/src/$1'
},
}
storybookも同様にパスを解決するように設定します。
参考: https://github.com/storybookjs/storybook/issues/3916#issuecomment-871283551
// .storybook/main.js
const path = require('path');
module.exports = {
...
webpackFinal: async config => {
// importの@を解決
config.resolve.alias = {
...config.resolve.alias,
'@': path.resolve(__dirname, '../src')
};
return config;
}
}