Fully qualified namespaces in TypeScript (absolute imports)

Published:

Fully Qualified Namespaces allow you to use absolute import paths instead of the relative hell that typically exists.

- import { Something } from '../../../models/something';
+ import { Something } from '@/models/something';

Normally when using imports, we would reference the path from the relative location of the file you are importing to.

Import syntax

import Language from '@/app/components/Language';
import { LanguagePicker, ListType } from '@/app/components/LanguagePicker';

// or require
const iconAll = require('@/icons/infinity.svg');

// or await import
async function infinityIcon() {
    return await import('@/icons/infinity.svg');
}

Configuring the tsconfig.json file

You just need to add the paths section to the compiler options of the TypeScript configuration file.

// tsconfig.json

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

Notice for Webpack users

If you are using Webpack to bundle, you are going to need to add the following to your configuration

// webpack.conf

module.export = {
  resolve: {
    alias: {
      '@': '/src',
    },
    extensions: ['.ts', '.tsx', '.js', '.json'],
  }
}

comments powered by Disqus