Organising Imports With Typescript Path Mapping.
source link: https://www.dave-beaumont.co.uk/2019/08/06/organising-imports-with-typescript-path-mapping/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Organising Imports With Typescript Path Mapping.
I read about this cool feature a while back, as I didn’t like the way the import paths looked especially when it’s the first thing you tend to read when opening a typescript file.
I have just had a chance to give it a go, so here is what I have found so far, Typescript has a cool feature which allows you to set an alias path mapping for paths. Imports look much cleaner this way and because they reference the mapped path, they can be easily changed in just one place, and not every typescript file they are used in. Restructuring project file trees is now a lot easier with this feature.
This is how imports generally look, and they get larger and larger as the project increases in size, all referencing different paths in the project tree.
import { LanguageService } from '../../../services/language.service';
Now let’s change our tsconfig.json and make use of path mapping.
We add a paths key, to our compiler options with the services alias mapping to our services folder.
{ "compilerOptions": { "baseUrl": "./src", "paths": { "@services/*": [ "app/services/*" ] } } }
Now we can use the following import in our typescript file, looks cleaner doesn’t it?
import { LanguageService } from '@services/language.service';
This is a great way to start off a new project, it’s more readable and is easier to maintain. VS code also detects this path mapping, and suggests it should import the path using the mapping provided.
Recommend
-
8
Organising Database Access in Go Last updated: 27th October 2020 Filed under: gol...
-
14
Organising a remote workshop EventStorming 04/22/21 by Bart van Wezel
-
16
11 Jul 2021•1min readSnippetsHow to avoid using relative path imports in Next.jsDoes this look familiar? 🤯javascriptimport M...
-
3
Who does what? Organising your product teams – Mike Hudack on The Product Experience BY
-
6
Organising your Euro 2021 sweepstakes using R Updated June 3 2021 Like many others are doing at this time, I’m sure, my friends and I are trying to coordinate a sweepstakes for the upcoming Euro 2021. For anyone unawa...
-
5
All-in-one solution for organising team retreats & offsitesRanked #2 for todayNextRetreatAll-in-one solution for organising team retreats & offsites...
-
8
Recipes API This API provides all that you need to create and manage a list of recipes
-
2
Co-organising Design Systems Week 2023 Published 10 days ago in ...
-
6
-
4
I am organising a meetup - Northamptonshire Dev ClubPublished: 2024.03.04 · 3 minutes readNorthampton is a lovely town in central England between London and Birmingham. It has a rich culture, great art, a good music sc...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK