ちょうどTypeScriptでstrict: true
やっていこう!という時期だったところに「AngularってTemplateTypeCheckできないんですね」
ということを言われて調べてみたところできなそうだったので落胆していたのですがIvyで実現されていたようです
ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 8.1.1 Node: 10.9.0 OS: linux x64 Angular: ... Package Version ------------------------------------------------------ @angular-devkit/architect 0.801.1 @angular-devkit/core 8.1.1 @angular-devkit/schematics 8.1.1 @schematics/angular 8.1.1 @schematics/update 0.801.1 rxjs 6.4.0
サンプルアプリの作成
ng new --enable-ivy --style scss --prefix sample ivy-sample
- tsconfig.app.json
enableIvy
が有効になっている
{ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", "types": [] }, "include": [ "src/**/*.ts" ], "exclude": [ "src/test.ts", "src/**/*.spec.ts" ], "angularCompilerOptions": { "enableIvy": true } }
- child.component.ts
適当なコンポーネントを作ってみる
value
はnumber
import {Component, Input, OnInit} from '@angular/core'; @Component({ selector: 'sample-child', templateUrl: './child.component.html', styleUrls: ['./child.component.scss'] }) export class ChildComponent implements OnInit { constructor() { } @Input() value: number; ngOnInit() { } }
- child.component.html
<div>{{ value }}</div>
- app.component.html
<sample-child [value]="10"></sample-child>
↓に変える
<sample-child [value]="'hoge'"></sample-child>
value
はnumber
を期待しているがstring
を渡してみる
ERROR in __ng_typecheck__.ts(11,24): error TS2322: Type 'string' is not assignable to type 'number'.
ちゃんとコンパイルエラーが出ている!!!
enableIvy
をfalse
にしたらコンパイルエラーが出なかったのでIvyで@Input
の型チェックもやってくれるようになったようです
これはうれしい!
まだv8ではプレビュー版なので不安定な部分もまだありそうですが安定版のv9が待ち遠しいですね