|
1 | 1 | include ../_util-fns
|
2 | 2 |
|
3 | 3 | :marked
|
4 |
| - TypeScript is a primary language for Angular application development. It is a dialect of JavaScript with design-time support for type-safety and tooling. |
| 4 | + TypeScript is a primary language for Angular application development. |
| 5 | + It is a superset of JavaScript with design-time support for type safety and tooling. |
5 | 6 |
|
6 | 7 | Browsers can't execute TypeScript directly. Typescript must be "transpiled" into JavaScript using the *tsc* compiler,
|
7 | 8 | which requires some configuration.
|
8 | 9 |
|
9 | 10 | This page covers some aspects of TypeScript configuration and the TypeScript environment
|
10 | 11 | that are important to Angular developers, including details about the following files:
|
11 | 12 |
|
12 |
| - * [tsconfig.json](#tsconfig) - TypeScript compiler configuration. |
13 |
| - * [typings](#typings) - TypesScript declaration files. |
| 13 | + * [tsconfig.json](#tsconfig)—TypeScript compiler configuration. |
| 14 | + * [typings](#typings)—TypesScript declaration files. |
14 | 15 |
|
15 | 16 | a(id="tsconfig")
|
16 | 17 | .l-main-section
|
17 | 18 | :marked
|
18 | 19 | ## *tsconfig.json*
|
19 |
| - Typically, you add a TypeScript configuration file (`tsconfig.json`) to your project to |
| 20 | + Typically, you add a TypeScript configuration file called `tsconfig.json` to your project to |
20 | 21 | guide the compiler as it generates JavaScript files.
|
21 | 22 | .l-sub-section
|
22 | 23 | :marked
|
23 | 24 | For details about `tsconfig.json`, see the official
|
24 | 25 | [TypeScript wiki](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
|
25 | 26 | :marked
|
26 |
| - We created the following `tsconfig.json` during [Setup](setup.html): |
| 27 | + The [Setup](setup.html) guide uses the following `tsconfig.json`: |
27 | 28 | +makeJson('quickstart/ts/src/tsconfig.1.json', null, 'tsconfig.json')(format=".")
|
28 | 29 | :marked
|
29 | 30 | This file contains options and flags that are essential for Angular applications.
|
@@ -73,39 +74,42 @@ a(id="typings")
|
73 | 74 | can find them. Angular is one such library.
|
74 | 75 | The `node_modules/@angular/core/` folder of any Angular application contains several `d.ts` files that describe parts of Angular.
|
75 | 76 |
|
76 |
| - **You need do nothing to get *typings* files for library packages that include `d.ts` files—as all Angular packages do.** |
| 77 | + **You need do nothing to get *typings* files for library packages that include `d.ts` files. |
| 78 | + Angular packages include them already.** |
77 | 79 |
|
78 | 80 | ### lib.d.ts
|
79 | 81 |
|
80 | 82 | TypeScript includes a special declaration file called `lib.d.ts`. This file contains the ambient declarations for various common JavaScript constructs present in JavaScript runtimes and the DOM.
|
81 | 83 |
|
82 |
| - Based on the `--target`, TypeScript adds _additional_ ambient declarations like `Promise` if our target is `es6`. |
| 84 | + Based on the `--target`, TypeScript adds _additional_ ambient declarations |
| 85 | + like `Promise` if the target is `es6`. |
83 | 86 |
|
84 |
| - Since the QuickStart is targeting `es5`, we can override the list of declaration files to be included: |
| 87 | + Since the QuickStart is targeting `es5`, you can override the |
| 88 | + list of declaration files to be included: |
85 | 89 |
|
86 | 90 | code-example(format=".")
|
87 | 91 | "lib": ["es2015", "dom"]
|
88 | 92 |
|
89 | 93 | :marked
|
90 |
| - Thanks to that, we have all the `es6` typings even when targeting `es5`. |
| 94 | + Thanks to that, you have all the `es6` typings even when targeting `es5`. |
91 | 95 |
|
92 | 96 | ### Installable typings files
|
93 | 97 | Many libraries—jQuery, Jasmine, and Lodash among them—do *not* include `d.ts` files in their npm packages.
|
94 | 98 | Fortunately, either their authors or community contributors have created separate `d.ts` files for these libraries and
|
95 | 99 | published them in well-known locations.
|
96 | 100 |
|
97 |
| - We can install these typings via `npm` using the |
| 101 | + You can install these typings via `npm` using the |
98 | 102 | [`@types/*` scoped package](http://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html)
|
99 |
| - and Typescript (starting at 2.0) will automatically recognize them. |
| 103 | + and Typescript, starting at 2.0, automatically recognizes them. |
100 | 104 |
|
101 |
| - For instance, to install typings for `jasmine` we could do `npm install @types/jasmine --save-dev`. |
| 105 | + For instance, to install typings for `jasmine` you could do `npm install @types/jasmine --save-dev`. |
102 | 106 |
|
103 | 107 | :marked
|
104 |
| - QuickStart identified two *typings* (`d.ts`) files: |
| 108 | + QuickStart identifies two *typings*, or `d.ts`, files: |
105 | 109 |
|
106 |
| - * [jasmine](http://jasmine.github.io/) typings for the Jasmine test framework |
| 110 | + * [jasmine](http://jasmine.github.io/) typings for the Jasmine test framework. |
107 | 111 |
|
108 | 112 | * [node](https://www.npmjs.com/package/@types/node) for code that references objects in the *nodejs* environment;
|
109 |
| - You can view an example in the [webpack](./webpack.html) page. |
| 113 | + you can view an example in the [webpack](./webpack.html) page. |
110 | 114 |
|
111 | 115 | QuickStart doesn't require these typings but many of the samples do.
|
0 commit comments