docs(typings): update typings chapter + update lingering old package references

This commit is contained in:
Ward Bell 2016-05-21 16:26:54 -07:00
parent 81ebdfb8ef
commit 60eeb0123a
6 changed files with 37 additions and 71 deletions

View File

@ -4,11 +4,9 @@
var AppComponent = ng var AppComponent = ng
// #docregion component // #docregion component
.Component({ .Component({
selector: 'my-app' selector: 'my-app',
})
// #enddocregion // #enddocregion
// #docregion view // #docregion view
.View({
template: '<h1 id="output">My First Angular 2 App</h1>' template: '<h1 id="output">My First Angular 2 App</h1>'
}) })
// #enddocregion // #enddocregion

View File

@ -6,9 +6,19 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.sfx.dev.js"></script> <!-- Polyfill(s) for older browsers -->
<script src="app.js"></script> <script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head> </head>
<body> <body>
<my-app>foo2</my-app> <my-app>foo2</my-app>
</body> </body>

View File

@ -1,13 +1,13 @@
// #docregion // #docregion
// #docregion import // #docregion import
import {Component, View, bootstrap} from '@angular/angular2'; import { Component } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
// #enddocregion // #enddocregion
// #docregion class-w-annotations // #docregion class-w-annotations
@Component({ @Component({
selector: 'my-app' selector: 'my-app',
})
@View({
template: '<h1 id="output">My First Angular 2 App</h1>' template: '<h1 id="output">My First Angular 2 App</h1>'
}) })
// #docregion class // #docregion class
@ -18,4 +18,4 @@ class AppComponent { }
// #docregion bootstrap // #docregion bootstrap
bootstrap(AppComponent); bootstrap(AppComponent);
// #enddocregion // #enddocregion
// #enddocregion // #enddocregion

View File

@ -113,11 +113,9 @@ include ../../../_includes/_util-fns
var AppComponent = ng var AppComponent = ng
// #docregion component // #docregion component
.Component({ .Component({
selector: 'my-app' selector: 'my-app',
})
// #enddocregion component // #enddocregion component
// #docregion view // #docregion view
.View({
template: '<h1 id="output">My First Angular 2 App</h1>' template: '<h1 id="output">My First Angular 2 App</h1>'
}) })
// #enddocregion view // #enddocregion view
@ -139,13 +137,13 @@ include ../../../_includes/_util-fns
// #docplaster more code here // #docplaster more code here
// #docregion import,twoparts // #docregion import,twoparts
import {Component, View, bootstrap} from 'angular2/angular2'; import { Component } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
// #enddocregion twoparts, import // #enddocregion twoparts, import
@Component({ @Component({
selector: 'my-app' selector: 'my-app',
}) template: '<h1 id="output">My first Angular 2 App</h1>'
@View({
template: '<h1 id="output">My first Angular 2 App</h1>'
}) })
class AppComponent { class AppComponent {
} }

View File

@ -76,7 +76,7 @@ a(id="typings")
Many libraries include their definition files in their npm packages where both the TypeScript compiler and editors Many libraries include their definition files in their npm packages where both the TypeScript compiler and editors
can find them. Angular is one such library. can find them. Angular is one such library.
Peek into the `node_modules/angular2/` folder of any Angular application to see several `...d.ts` files that describe parts of Angular. Peek into the `node_modules/@angular/core/` folder of any Angular application to see several `...d.ts` files that describe parts of Angular.
**We need do nothing to get *typings* files for library packages which include *d.ts* files &mdash; as all Angular packages do.** **We need do nothing to get *typings* files for library packages which include *d.ts* files &mdash; as all Angular packages do.**
@ -121,7 +121,7 @@ code-example(format="").
The following command installs the typings file for the Jasmine test library and updates the `typings.config` The following command installs the typings file for the Jasmine test library and updates the `typings.config`
so we that we get it automatically the next time. so we that we get it automatically the next time.
code-example(format=""). code-example(format="").
npm run typings -- install jasmine --ambient --save npm run typings -- install jasmine --global --save
.l-sub-section .l-sub-section
:marked :marked
The [&ndash;&ndash; option](https://docs.npmjs.com/cli/run-script) is important; The [&ndash;&ndash; option](https://docs.npmjs.com/cli/run-script) is important;
@ -129,43 +129,3 @@ code-example(format="").
Learn about the features of the *typings* tool at its [site on github](https://github.com/typings/typings/blob/master/README.md). Learn about the features of the *typings* tool at its [site on github](https://github.com/typings/typings/blob/master/README.md).
:marked
### Typing file collisions
The TypeScript compiler does not tolerate redefinition of a type. For example, it throws an error if it's given two definitions for
the `Promise` type.
Double definitions are common. In fact, the `typings` tool deliberately creates
duplicate sets of typings (for reasons best explained elsewhere).
Look in the project structure for the *typings folder* where we should find something like:
.filetree
.file typings
.children
.file browser
.children
.file ambient
.children
.file core-js
.children
.file index.d.ts
.file ...
.children
.file main
.children
.file ambient
.children
.file core-js
.children
.file index.d.ts
.file ...
.children
.file browser.d.ts
.file main.d.ts
:marked
The `core-js` typings are duplicated and the `browser.d.ts` and `main.d.ts` have overlapping content.
We must tell the compiler to ignore one or the other.
We removed the `main` set from consideration in the `exclude` section of our `tsconfig.json` file:
+makeJson('quickstart/ts/tsconfig.1.json', {paths: 'exclude'}, 'tsconfig.json (exclude)')(format=".")
:marked

View File

@ -864,12 +864,12 @@ code-example(format="").
project, which contains metadata about the type definitions we've installed: project, which contains metadata about the type definitions we've installed:
code-example(format=""). code-example(format="").
npm run typings install jquery -- --save --ambient npm run typings install jquery -- --save --global
npm run typings install angular -- --save --ambient npm run typings install angular -- --save --global
npm run typings install angular-route -- --save --ambient npm run typings install angular-route -- --save --global
npm run typings install angular-resource -- --save --ambient npm run typings install angular-resource -- --save --global
npm run typings install angular-mocks -- --save --ambient npm run typings install angular-mocks -- --save --global
npm run typings install jasmine -- --save --ambient npm run typings install jasmine -- --save --global
:marked :marked
In `index.html`, let's now enable SystemJS. Add a couple of `<script>` tags that In `index.html`, let's now enable SystemJS. Add a couple of `<script>` tags that
@ -1919,11 +1919,11 @@ table
we still need are for Jasmine. we still need are for Jasmine.
code-example(format=""). code-example(format="").
npm run typings uninstall jquery -- --save --ambient npm run typings uninstall jquery -- --save --global
npm run typings uninstall angular -- --save --ambient npm run typings uninstall angular -- --save --global
npm run typings uninstall angular-route -- --save --ambient npm run typings uninstall angular-route -- --save --global
npm run typings uninstall angular-resource -- --save --ambient npm run typings uninstall angular-resource -- --save --global
npm run typings uninstall angular-mocks -- --save --ambient npm run typings uninstall angular-mocks -- --save --global
:marked :marked
Finally, from `index.html` and `karma.conf.js`, remove all references to Finally, from `index.html` and `karma.conf.js`, remove all references to