Skip to content

Commit 8daac33

Browse files
mtriveraskipjack
authored andcommitted
docs(guides): rewrite typescript-guide (#1446)
Make some minor updates to flow and when certain content is introduced.
1 parent 8c8847a commit 8daac33

File tree

1 file changed

+19
-12
lines changed

1 file changed

+19
-12
lines changed

content/guides/typescript.md

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ sort: 14
44
contributors:
55
- morsdyce
66
- kkamali
7+
- mtrivera
78
---
89

910
[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
1617
To start using webpack with TypeScript you need a couple of things:
1718

1819
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`).
2021
3. Create a __tsconfig.json__ file to contain our TypeScript compilation configuration.
2122
4. Create __webpack.config.js__ to contain our webpack configuration.
2223

@@ -48,6 +49,8 @@ See [TypeScript's documentation](https://www.typescriptlang.org/docs/handbook/ts
4849

4950
__webpack.config.js__
5051

52+
To learn more about webpack configuration, see the [configuration concepts](/concepts/configuration/).
53+
5154
Now let's configure webpack to handle TypeScript:
5255

5356
```js
@@ -75,20 +78,17 @@ module.exports = {
7578
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.
7679

7780

78-
## Loaders
79-
80-
The following loaders for TypeScript:
81+
## Loader
8182

82-
- [`awesome-typescript-loader`](https://github.com/s-panferov/awesome-typescript-loader)
83-
- [`ts-loader`](https://github.com/TypeStrong/ts-loader)
83+
[`ts-loader`](https://github.com/TypeStrong/ts-loader)
8484

85-
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.
8886

8987

9088
## Source Maps
9189

90+
To learn more about Source Maps, see the [development guide](/guides/development.md).
91+
9292
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`:
9393

9494
``` json
@@ -109,9 +109,9 @@ module.exports = {
109109
See the [devtool documentation](/configuration/devtool/) for more information.
110110

111111

112-
## Using 3rd Party Libraries
112+
## Using Third Party Libraries
113113

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/).
115115

116116
For example if we want to install lodash we can run the following command to get the typings for it:
117117

@@ -124,7 +124,7 @@ For more information see [this blog post](https://blogs.msdn.microsoft.com/types
124124

125125
## Importing Other Assets
126126

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:
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:
128128

129129
__custom.d.ts__
130130

@@ -136,3 +136,10 @@ declare module "*.svg" {
136136
```
137137

138138
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.
139+
140+
141+
## Performance Loader
142+
143+
[`awesome-typescript-loader`](https://github.com/s-panferov/awesome-typescript-loader)
144+
145+
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

Comments
 (0)