You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/guides/typescript.mdx
+16-6Lines changed: 16 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -25,7 +25,9 @@ First install the TypeScript compiler and loader by running:
25
25
npm install --save-dev typescript ts-loader
26
26
```
27
27
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`
29
31
30
32
**project**
31
33
@@ -34,12 +36,13 @@ Now we'll modify the directory structure & the configuration files:
34
36
├── package.json
35
37
├── package-lock.json
36
38
+ ├── tsconfig.json
37
-
├── webpack.config.js
39
+
- ├── webpack.config.js
40
+
+ ├── webpack.config.ts
38
41
├── /dist
39
42
│ ├── bundle.js
40
43
│ └── index.html
41
44
├── /src
42
-
│ ├── index.js
45
+
- │ ├── index.js
43
46
+ │ └── index.ts
44
47
└── /node_modules
45
48
```
@@ -114,7 +117,14 @@ export default config;
114
117
115
118
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.
116
119
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:
118
128
119
129
**./index.ts**
120
130
@@ -142,7 +152,7 @@ There are 3 ways to use TypeScript in `webpack.config.ts`:
142
152
1.**Using webpack with built-in Node.js type stripping feature (recommended):**
143
153
144
154
```bash
145
-
webpack -c ./webpack.config.ts
155
+
npx webpack -c ./webpack.config.ts
146
156
```
147
157
148
158
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
318
328
319
329
When installing third party libraries from npm, it is important to remember to install the typing definition for that library.
320
330
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:
0 commit comments