Skip to content
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions src/content/guides/typescript.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,42 @@ Now lets change the import of `lodash` in our `./index.ts` due to the fact that

T> To make imports do this by default and keep `import _ from 'lodash';` syntax in TypeScript, set `"allowSyntheticDefaultImports" : true` and `"esModuleInterop" : true` in your **tsconfig.json** file. This is related to TypeScript configuration and mentioned in our guide only for your information.

## Ways to Use TypeScript in `webpack.config.js`

There are 5 ways to use TypeScript in `webpack.config.js`:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh let's use .ts here too to avoid misleading, missing this 😄

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think there are no more add ons if any let me know so i can do them in one commit 😊


1. **Using webpack with TypeScript config:**

```bash
webpack -c ./webpack.config.ts
```

(Not all things are supported due to limitations of `rechoir` and `interpret`.)

2. **Using custom `--import` for Node.js:**

```bash
NODE_OPTIONS='--import tsx' webpack --disable-interpret -c ./webpack.config.ts
```

3. **Using built-in TypeScript module for Node.js v22.7.0 ≥ YOUR NODE.JS VERSION < v23.6.0:**

```bash
NODE_OPTIONS='--experimental-strip-types' webpack --disable-interpret -c ./webpack.config.ts
```

4. **Using built-in TypeScript module for Node.js ≥ v22.6.0:**

```bash
webpack --disable-interpret -c ./webpack.config.ts
```

5. **Using a tsx for Node.js ≥ v22.6.0:**

```bash
NODE_OPTIONS='--no-experimental-strip-types --import tsx' webpack --disable-interpret -c ./webpack.config.ts
```

## Loader

[`ts-loader`](https://github.com/TypeStrong/ts-loader)
Expand All @@ -129,6 +165,8 @@ Note that if you're already using [`babel-loader`](https://github.com/babel/babe

To learn more about source maps, see the [development guide](/guides/development).

To learn more about source maps, see the [development guide](/guides/development).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why it was duplicated?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will fix that might be typical human error sorry for that

To enable source maps, we must configure TypeScript to output inline source maps to our compiled JavaScript files. The following line must be added to our TypeScript configuration:

**tsconfig.json**
Expand Down