Skip to content

Commit 64346fc

Browse files
fix(typescript-guide): improve grammar and set right command
1 parent b08ba0c commit 64346fc

1 file changed

Lines changed: 16 additions & 6 deletions

File tree

src/content/guides/typescript.mdx

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

28-
Now we'll modify the directory structure & the configuration files:
28+
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:
29+
`.src/index.js` to `./src/index.ts`
30+
and `webpack.config.js` to `webpack.config.ts`
2931

3032
**project**
3133

@@ -34,12 +36,13 @@ Now we'll modify the directory structure & the configuration files:
3436
├── package.json
3537
├── package-lock.json
3638
+ ├── tsconfig.json
37-
├── webpack.config.js
39+
- ├── webpack.config.js
40+
+ ├── webpack.config.ts
3841
├── /dist
3942
│ ├── bundle.js
4043
│ └── index.html
4144
├── /src
42-
│ ├── index.js
45+
- │ ├── index.js
4346
+ │ └── index.ts
4447
└── /node_modules
4548
```
@@ -114,7 +117,14 @@ export default config;
114117
115118
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.
116119

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

119129
**./index.ts**
120130

@@ -142,7 +152,7 @@ There are 3 ways to use TypeScript in `webpack.config.ts`:
142152
1. **Using webpack with built-in Node.js type stripping feature (recommended):**
143153

144154
```bash
145-
webpack -c ./webpack.config.ts
155+
npx webpack -c ./webpack.config.ts
146156
```
147157

148158
Will attempt to load the configuration using Node.js's built-in [type-stripping](https://nodejs.org/api/typescript.html#type-stripping), and then attempt to load the configuration file using `interpret` and `rechoir` (in this case you need to install `tsx` or `ts-node` or other tools).
@@ -318,7 +328,7 @@ To enable the types for the whole project, add `webpack/module` to `compilerOpti
318328

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

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

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

0 commit comments

Comments
 (0)