Angular Ivyでのテンプレート型チェック

ちょうど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が待ち遠しいですね

参考

Type-checking templates in Angular ViewEngine and Ivy

blog.angularindepth.com