Skip to content
Merged
Changes from 2 commits
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
36 changes: 36 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 Down