Add Set Path Alias For Cleaner Imports as a TypeScript TIL

Author: jbranchaud

README.md

@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186).
 
-_1376 TILs and counting..._
+_1377 TILs and counting..._
 
 ---
 
@@ -1278,6 +1278,7 @@ _1376 TILs and counting..._
 - [Interfaces With The Same Name Are Merged](typescript/interfaces-with-the-same-name-are-merged.md)
 - [Narrow The Type Of An Array To Its Values](typescript/narrow-the-type-of-an-array-to-its-values.md)
 - [Re-Export An Imported Type](typescript/re-export-an-imported-type.md)
+- [Set Path Alias For Cleaner Imports](typescript/set-path-alias-for-cleaner-imports.md)
 - [Type Narrowing With Const VS Let Strings](typescript/type-narrowing-with-const-vs-let-strings.md)
 - [Type Narrowing With Similarly Shaped Objects](typescript/type-narrowing-with-similarly-shaped-objects.md)
 - [Type Promise Results With The Awaited Type](typescript/type-promise-results-with-the-awaited-type.md)

typescript/set-path-alias-for-cleaner-imports.md

@@ -0,0 +1,41 @@
+# Set Path Alias For Cleaner Imports
+
+In the `tsconfig.json` file of a TypeScript project, there are a bunch of
+compiler options that you can specify. One of those compiler options is
+`paths`. This is an object that can map path aliases to directories in your
+project.
+
+In projects where nested files are importing modules from other parts of the
+file tree, you can end up with cluttered imports like this:
+
+```typescript
+import { prisma } from '../../server/db.server'
+import { List } from '../../components/list'
+```
+
+By setting a path alias in your `tsconfig.json` file, like so, you can tidy
+these up:
+
+```json
+{
+  "compilerOptions": {
+    "paths": {
+      "~/*": ["./app/*"]
+    }
+  }
+}
+```
+
+Now I can write any import such that it anchors to the `app` directory with
+`~`.
+
+```typescript
+import { prisma } from '~/server/db.server'
+import { List } from '~/components/list'
+```
+
+I prefer a single path alias if I can get away with it, but you can [add
+several](https://learn.saleor.io/setup/typescript-path-aliases/) to suit your
+project if you'd like.
+
+[source](https://www.typescriptlang.org/tsconfig#paths)