diff --git a/README.md b/README.md index 8113046..f12190a 100644 --- a/README.md +++ b/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) diff --git a/typescript/set-path-alias-for-cleaner-imports.md b/typescript/set-path-alias-for-cleaner-imports.md new file mode 100644 index 0000000..83ed22a --- /dev/null +++ b/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)