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: content/guides/typescript.md
+19-12Lines changed: 19 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -4,6 +4,7 @@ sort: 14
4
4
contributors:
5
5
- morsdyce
6
6
- kkamali
7
+
- mtrivera
7
8
---
8
9
9
10
[TypeScript](https://www.typescriptlang.org) is a typed superset of JavaScript that compiles to plain JavaScript. In this guide we will learn how to integrate TypeScript with webpack.
@@ -16,7 +17,7 @@ In order to get started with webpack and TypeScript, first we must [install webp
16
17
To start using webpack with TypeScript you need a couple of things:
17
18
18
19
1. Install the TypeScript compiler in your project.
19
-
2. Install a TypeScript loader (in this case we're using ts-loader).
20
+
2. Install a TypeScript loader (in this case we're using `ts-loader`).
20
21
3. Create a __tsconfig.json__ file to contain our TypeScript compilation configuration.
21
22
4. Create __webpack.config.js__ to contain our webpack configuration.
22
23
@@ -48,6 +49,8 @@ See [TypeScript's documentation](https://www.typescriptlang.org/docs/handbook/ts
48
49
49
50
__webpack.config.js__
50
51
52
+
To learn more about webpack configuration, see the [configuration concepts](/concepts/configuration/).
53
+
51
54
Now let's configure webpack to handle TypeScript:
52
55
53
56
```js
@@ -75,20 +78,17 @@ module.exports = {
75
78
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.
Awesome TypeScript Loader has created a [wonderful explanation](https://github.com/s-panferov/awesome-typescript-loader#differences-between-ts-loader) of the difference between `awesome-typescript-loader` and `ts-loader`.
86
-
87
-
We chose to use `ts-loader` in this guide as it makes enabling additional webpack features, such as importing other web assets, a bit easier.
85
+
We will use `ts-loader` in this guide as it makes enabling additional webpack features, such as importing other web assets, a bit easier.
88
86
89
87
90
88
## Source Maps
91
89
90
+
To learn more about Source Maps, see the [development guide](/guides/development.md).
91
+
92
92
To enable source maps, we must configure TypeScript to output inline source maps to our compiled JavaScript files. The following line must be added to our `tsconfig.json`:
93
93
94
94
```json
@@ -109,9 +109,9 @@ module.exports = {
109
109
See the [devtool documentation](/configuration/devtool/) for more information.
110
110
111
111
112
-
## Using 3rd Party Libraries
112
+
## Using Third Party Libraries
113
113
114
-
When installing 3rd party libraries from npm, it is important to remember to install the typing definition for that library. These definitions can be found in the [@types package](https://github.com/DefinitelyTyped/DefinitelyTyped).
114
+
When installing third party libraries from npm, it is important to remember to install the typing definition for that library. These definitions can be found at [TypeSearch](http://microsoft.github.io/TypeSearch/).
115
115
116
116
For example if we want to install lodash we can run the following command to get the typings for it:
117
117
@@ -124,7 +124,7 @@ For more information see [this blog post](https://blogs.msdn.microsoft.com/types
124
124
125
125
## Importing Other Assets
126
126
127
-
To use noncode assets with TypeScript, we need to defer the type for these imports. This requires a `custom.d.ts` file which signifies custom definitions for TypeScript in our project. Let's set up a declaration for `.svg` files:
127
+
To use non-code assets with TypeScript, we need to defer the type for these imports. This requires a `custom.d.ts` file which signifies custom definitions for TypeScript in our project. Let's set up a declaration for `.svg` files:
128
128
129
129
__custom.d.ts__
130
130
@@ -136,3 +136,10 @@ declare module "*.svg" {
136
136
```
137
137
138
138
Here we declare a new module for SVGs by specifying any import that ends in `.svg` and defining the module's `content` as `any`. We could be more explicit about it being a url by defining the type as string. The same concept applies to other assets including CSS, SCSS, JSON and more.
Awesome TypeScript Loader has created a [wonderful explanation](https://github.com/s-panferov/awesome-typescript-loader#differences-between-ts-loader) of the difference between `awesome-typescript-loader` and `ts-loader`. The configuration for `awesome-typescript-loader` is more complex than `ts-loader`.
0 commit comments