diff --git a/aio/content/examples/elements/src/app/popup.component.ts b/aio/content/examples/elements/src/app/popup.component.ts index 6fee4ef8c1..cc663a1b8f 100644 --- a/aio/content/examples/elements/src/app/popup.component.ts +++ b/aio/content/examples/elements/src/app/popup.component.ts @@ -39,7 +39,7 @@ import { animate, state, style, transition, trigger } from '@angular/animations' `] }) export class PopupComponent { - private state: 'opened' | 'closed' = 'closed'; + state: 'opened' | 'closed' = 'closed'; @Input() set message(message: string) { diff --git a/aio/content/examples/template-expression-operators/src/app/app.component.html b/aio/content/examples/template-expression-operators/src/app/app.component.html index b2e04ec7d2..ec7d8dd06e 100644 --- a/aio/content/examples/template-expression-operators/src/app/app.component.html +++ b/aio/content/examples/template-expression-operators/src/app/app.component.html @@ -72,8 +72,8 @@

Non-null assertion operator (!)

- -

The item's color is: {{item!.color}}

+ +

The item's color is: {{item.color!.toUpperCase()}}

diff --git a/aio/content/examples/template-expression-operators/src/app/app.component.ts b/aio/content/examples/template-expression-operators/src/app/app.component.ts index e0a6ddf2f5..18258c59be 100644 --- a/aio/content/examples/template-expression-operators/src/app/app.component.ts +++ b/aio/content/examples/template-expression-operators/src/app/app.component.ts @@ -1,6 +1,13 @@ import { Component } from '@angular/core'; +interface Item { + name: string; + manufactureDate: Date; + color?: string | null; + price: number; +} + @Component({ selector: 'app-root', templateUrl: './app.component.html', @@ -9,10 +16,11 @@ import { Component } from '@angular/core'; export class AppComponent { title = 'Template Expression Operators'; - item = { + item: Item = { name : 'Telephone', manufactureDate : new Date(1980, 1, 25), - price: 98 + color: 'orange', + price: 98, }; nullItem = null; diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md index d6415c57e7..f24bf54e9a 100644 --- a/aio/content/guide/template-syntax.md +++ b/aio/content/guide/template-syntax.md @@ -2256,22 +2256,20 @@ It works perfectly with long property paths such as `a?.b?.c?.d`. ### The non-null assertion operator ( `!` ) -As of Typescript 2.0, you can enforce [strict null checking](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html "Strict null checking in TypeScript") with the `--strictNullChecks` flag. TypeScript then ensures that no variable is unintentionally null or undefined. +As of Typescript 2.0, you can enforce [strict null checking](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html "Strict null checking in TypeScript") with the `--strictNullChecks` flag. TypeScript then ensures that no variable is unintentionally `null` or `undefined`. In this mode, typed variables disallow `null` and `undefined` by default. The type checker throws an error if you leave a variable unassigned or try to assign `null` or `undefined` to a variable whose type disallows `null` and `undefined`. -The type checker also throws an error if it can't determine whether a variable will be `null` or undefined at runtime. You tell the type checker not to throw an error by applying the postfix +The type checker also throws an error if it can't determine whether a variable will be `null` or `undefined` at runtime. You tell the type checker not to throw an error by applying the postfix [non-null assertion operator, !](http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator "Non-null assertion operator"). The Angular non-null assertion operator, `!`, serves the same purpose in -an Angular template. For example, after you use [*ngIf](guide/template-syntax#ngIf) -to check that `item` is defined, you can assert that -`item` properties are also defined. +an Angular template. For example, you can assert that `item` properties are also defined. When the Angular compiler turns your template into TypeScript code, -it prevents TypeScript from reporting that `item` might be `null` or `undefined`. +it prevents TypeScript from reporting that `item.color` might be `null` or `undefined`. Unlike the [_safe navigation operator_](guide/template-syntax#safe-navigation-operator "Safe navigation operator (?)"), the non-null assertion operator does not guard against `null` or `undefined`. diff --git a/aio/tools/examples/shared/boilerplate/cli/tsconfig.app.json b/aio/tools/examples/shared/boilerplate/cli/tsconfig.app.json index f0259083da..eb271da2d8 100644 --- a/aio/tools/examples/shared/boilerplate/cli/tsconfig.app.json +++ b/aio/tools/examples/shared/boilerplate/cli/tsconfig.app.json @@ -4,12 +4,17 @@ "outDir": "./out-tsc/app", "types": [] }, + "files": [ + "src/main.ts", + "src/polyfills.ts" + ], "include": [ - "src/**/*.ts" + "src/**/*.d.ts" ], "exclude": [ "src/test.ts", "src/**/*.spec.ts", + "src/**/*-specs.ts", "src/**/*.avoid.ts", "src/**/*.0.ts", "src/**/*.1.ts", @@ -19,6 +24,7 @@ "src/**/*.4.ts", "src/**/*.5.ts", "src/**/*.6.ts", - "src/**/*.7.ts" + "src/**/*.7.ts", + "src/**/testing" ] } diff --git a/aio/tools/examples/shared/boilerplate/cli/tsconfig.json b/aio/tools/examples/shared/boilerplate/cli/tsconfig.json index ce1b58ab88..e4816a58e7 100644 --- a/aio/tools/examples/shared/boilerplate/cli/tsconfig.json +++ b/aio/tools/examples/shared/boilerplate/cli/tsconfig.json @@ -5,10 +5,10 @@ "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, "module": "esnext", "moduleResolution": "node", - "emitDecoratorMetadata": true, - "experimentalDecorators": true, "importHelpers": true, "target": "es2015", "typeRoots": [ @@ -21,5 +21,7 @@ }, "angularCompilerOptions": { "enableIvy": false, - }, + "fullTemplateTypeCheck": true, + "strictInjectionParameters": true + } } diff --git a/aio/tools/examples/shared/boilerplate/ivy/cli/tsconfig.app.json b/aio/tools/examples/shared/boilerplate/ivy/cli/tsconfig.app.json index 23fa98b447..5360c33dd7 100644 --- a/aio/tools/examples/shared/boilerplate/ivy/cli/tsconfig.app.json +++ b/aio/tools/examples/shared/boilerplate/ivy/cli/tsconfig.app.json @@ -4,8 +4,12 @@ "outDir": "./out-tsc/app", "types": [] }, + "files": [ + "src/main.ts", + "src/polyfills.ts" + ], "include": [ - "src/**/*.ts" + "src/**/*.d.ts" ], "exclude": [ "src/test.ts", diff --git a/aio/tools/examples/shared/boilerplate/testing/tsconfig.app.json b/aio/tools/examples/shared/boilerplate/testing/tsconfig.app.json index e5dfecd763..fdc41f9303 100644 --- a/aio/tools/examples/shared/boilerplate/testing/tsconfig.app.json +++ b/aio/tools/examples/shared/boilerplate/testing/tsconfig.app.json @@ -4,8 +4,12 @@ "outDir": "../out-tsc/app", "types": [] }, + "files": [ + "src/main.ts", + "src/polyfills.ts" + ], "include": [ - "src/**/*.ts" + "src/**/*.d.ts" ], "exclude": [ "src/test.ts", diff --git a/aio/tools/examples/shared/boilerplate/testing/tsconfig.spec.json b/aio/tools/examples/shared/boilerplate/testing/tsconfig.spec.json index 9004a69b07..0e279f5231 100644 --- a/aio/tools/examples/shared/boilerplate/testing/tsconfig.spec.json +++ b/aio/tools/examples/shared/boilerplate/testing/tsconfig.spec.json @@ -1,7 +1,7 @@ { "extends": "./tsconfig.json", "compilerOptions": { - "outDir": "../out-tsc/spec", + "outDir": "./out-tsc/spec", "types": [ "jasmine", "node"