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
+13-4Lines changed: 13 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -26,7 +26,9 @@ First install the TypeScript compiler and loader by running:
26
26
npm install --save-dev typescript ts-loader
27
27
```
28
28
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`
30
32
31
33
**project**
32
34
@@ -35,7 +37,7 @@ Now we'll modify the directory structure & the configuration files:
35
37
├── package.json
36
38
├── package-lock.json
37
39
+ ├── tsconfig.json
38
-
- ├── webpack.config.ts
40
+
- ├── webpack.config.js
39
41
+ ├── webpack.config.ts
40
42
├── /dist
41
43
│ ├── bundle.js
@@ -116,7 +118,14 @@ export default config;
116
118
117
119
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.
118
120
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:
120
129
121
130
**./index.ts**
122
131
@@ -320,7 +329,7 @@ To enable the types for the whole project, add `webpack/module` to `compilerOpti
320
329
321
330
When installing third party libraries from npm, it is important to remember to install the typing definition for that library.
322
331
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:
0 commit comments