Skip to content

Commit

Permalink
Add "go-to-definition" instructions to TypeScript docs. (#9198)
Browse files Browse the repository at this point in the history
### Description

Title!
  • Loading branch information
anthonyshew authored Sep 28, 2024
1 parent cc473cb commit ed03d0c
Showing 1 changed file with 31 additions and 5 deletions.
36 changes: 31 additions & 5 deletions docs/repo-docs/guides/tools/typescript.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -207,8 +207,8 @@ Then, create a `check-types` task in `turbo.json`. From the [Configuring tasks g
},
"check-types": {
"dependsOn": ["topo"]
},
},
}
}
}
```

Expand All @@ -220,11 +220,37 @@ Then, run your task using `turbo check-types`.

For [Internal Packages](/repo/docs/core-concepts/internal-packages), we recommend that you use `tsc` to compile your TypeScript libraries whenever possible. While you can use a bundler, it's not necessary and adds extra complexity to your build process. Additionally, bundling a library can mangle the code before it makes it to your applications' bundlers, causing hard to debug issues.

### Enable go-to-definition across package boundaries

"Go-to-definition" is an editor feature for quickly navigating to the original declaration or definition of a symbol (like a variable or function) with a click or hotkey. Once TypeScript is configured correctly, you can navigate across [Internal Packages](/repo/docs/core-concepts/internal-packages) with ease.

#### Just-in-Time Packages

Exports from Just-in-Time Packages will automatically bring you to the original TypeScript source code as long as you aren't using [entrypoint wildcards](#package-entrypoint-wildcards). Go-to-definition will work as expected.

#### Compiled Packages

Exports from [Compiled Packages](/repo/docs/core-concepts/internal-packages#compiled-packages) require the use of [`declaration`](https://www.typescriptlang.org/tsconfig/#declaration) and [`declarationMap`](https://www.typescriptlang.org/tsconfig/#declarationMap) configurations for go-to-definition to work. After you've enabled these two configurations for the package, compile the package with `tsc`, and open the output directory to find declaration files and source maps.

<Files>
<Folder defaultOpen name="packages">
<Folder defaultOpen name="ui">
<Folder defaultOpen name="dist">
<File name="button.js" />
<File name="button.d.ts" green />
<File name="button.d.ts.map" green />
</Folder>
</Folder>
</Folder>
</Files>

With these two files in place, your editor will now navigate to the original source code.

### Use Node.js subpath imports instead of TypeScript compiler `paths`

It's possible to create absolute imports in your packages using [the TypeScript compiler's `paths` option](https://www.typescriptlang.org/tsconfig#paths), but these paths can cause failed compilation when using [Just-in-Time Packages](https://turbo.build/repo/docs/core-concepts/internal-packages#just-in-time-packages). [As of TypeScript 5.4](https://devblogs.microsoft.com/typescript/announcing-typescript-5-4/#auto-import-support-for-subpath-imports), you can use [Node.js subpath imports](https://nodejs.org/api/packages.html#imports) instead for a more robust solution.

#### Just-in-Time packages
#### Just-in-Time Packages

In [Just-in-Time packages](https://turbo.build/repo/docs/core-concepts/internal-packages#just-in-time-packages), `imports` must target the source code in the package, since build outputs like `dist` won't be created.

Expand Down Expand Up @@ -252,9 +278,9 @@ export const Button = () => {

</Tabs>

#### Compiled packages
#### Compiled Packages

In [Compiled packages](https://turbo.build/repo/docs/core-concepts/internal-packages#compiled-packages), `imports` target the built ouptuts for the package.
In [Compiled Packages](https://turbo.build/repo/docs/core-concepts/internal-packages#compiled-packages), `imports` target the built ouptuts for the package.

<Tabs storageKey="ts-imports-compiled" items={["package.json", "Source code"]}>
<Tab value="package.json">
Expand Down

0 comments on commit ed03d0c

Please sign in to comment.