Skip to content
Open
Changes from all 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
16 changes: 12 additions & 4 deletions src/content/guides/typescript.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,13 @@ Now we'll modify the directory structure & the configuration files:
├── package.json
├── package-lock.json
+ ├── tsconfig.json
├── webpack.config.js
- ├── webpack.config.js
+ ├── webpack.config.ts
├── /dist
│ ├── bundle.js
│ └── index.html
├── /src
│ ├── index.js
- │ ├── index.js
+ │ └── index.ts
└── /node_modules
```
Expand Down Expand Up @@ -114,7 +115,14 @@ export default config;

This will direct webpack to _enter_ through `./index.ts`, _load_ all `.ts` and `.tsx` files through the `ts-loader`, and _output_ a `bundle.js` file in our current directory.

Now lets change the import of `lodash` in our `./index.ts` due to the fact that there is no default export present in `lodash` definitions.
Next, we need to adjust how we import `lodash` in our `./index.ts`. Since the lodash definitions don't include a default export, we'll need to update our import statement.
First, make sure to install the [TypeScript definitions](#using-third-party-libraries):

```bash
npm install --save-dev @types/lodash
```

Then, update your import at the top of the file:

**./index.ts**

Expand Down Expand Up @@ -318,7 +326,7 @@ To enable the types for the whole project, add `webpack/module` to `compilerOpti

When installing third party libraries from npm, it is important to remember to install the typing definition for that library.

For example, if we want to install lodash we can run the following command to get the typings for it:
For example, if we want to use lodash, we should run the following command to install its type definitions:

```bash
npm install --save-dev @types/lodash
Expand Down
Loading