Skip to content

Commit dcd351b

Browse files
fix(typescript): change duplicate .ts and improve clarification
1 parent 58a7148 commit dcd351b

1 file changed

Lines changed: 13 additions & 4 deletions

File tree

src/content/guides/typescript.mdx

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,9 @@ First install the TypeScript compiler and loader by running:
2626
npm install --save-dev typescript ts-loader
2727
```
2828

29-
Now we'll modify the directory structure & the configuration files:
29+
Now we'll modify the directory structure & the configuration files, we need to swap our JavaScript files over to TypeScript. Rename the core files by changing their extensions from .js to .ts as shown below:
30+
`.src/index.js` to `./src/index.ts`
31+
and `webpack.config.js` to `webpack.config.ts`
3032

3133
**project**
3234

@@ -35,7 +37,7 @@ Now we'll modify the directory structure & the configuration files:
3537
├── package.json
3638
├── package-lock.json
3739
+ ├── tsconfig.json
38-
- ├── webpack.config.ts
40+
- ├── webpack.config.js
3941
+ ├── webpack.config.ts
4042
├── /dist
4143
│ ├── bundle.js
@@ -116,7 +118,14 @@ export default config;
116118
117119
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.
118120

119-
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.
121+
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.
122+
First, make sure to install the [TypeScript definitions](#using-third-party-libraries):
123+
124+
```bash
125+
npm install --save-dev @types/lodash
126+
```
127+
128+
Then, update your import at the top of the file:
120129

121130
**./index.ts**
122131

@@ -320,7 +329,7 @@ To enable the types for the whole project, add `webpack/module` to `compilerOpti
320329

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

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

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

0 commit comments

Comments
 (0)