[Angular 大师之路] Day 10 – 样板语法中的冷知识 – $any

Angular 提供针对 HTML 样板的处理,提供了很多不同的语法,今天要讲一个很少看到有人使用的语法 – $any

类型:技巧

难度:3 颗星

实用度:3 颗星

先来看看问题,假设有一个元件如下:

@Component({
  selector: 'app-root',
  template: `{{ data.value }}`
})
export class AppComponent {
  data = {};
}

这时候可以很容易的想像 data.value 一定是 undefined,画面上是一片空白,这是很合理的事情,程序是可以正常运作的,只是没有资料显示罢了。

但当我们使用 production build 时,就会看到以下错误了:

https://wellwind.idv.tw/blog/2018/10/25/mastering-angular-10-any-syntax/01.jpg

为什么会有这样的错误呢?这是因为当使用 production build 时,预设会开启 aot build,而 aot build 则会将样板预先打包成 JavaScript,这时候由于我们使用的还是 TypeScript,因此在做型别检查时就会发生错误讯息。

既然是 TypeScript,当然最简单的方式就是加上型别定义:

data: {value?: number} = {};

又或者是宣告成 any

data: any = {};

都没有问题,但是当程序越来越复杂,型别也越来越复杂时,有可能不这么好做,由其实宣告明确型别的方式,有时候可能会觉得有点烦;如果想要偷懒一下的话,Angular 提供了在样版将变数转型成 any 的方法 – $any,我们可以透过 $any(data) 的方式在样板上将变数转成 any 型别!我们就不需要修改任何的 ts 档,只要调整一下样板就好了:

@Component({
  selector: 'app-root',
  template: `{{ $any(data).value }}`
})

另外如果成市内没有宣告变数,却在样板上使用某个变数时,aot build 也不会过,这时候可以改成将 this 转成 any 型别:

@Component({
  selector: 'app-root',
  template: `{{ $any(this).data }}`
})

透过这种方式,就不怕 production build 失败啦。

不过最后还是要提醒一下,这只应该算是冷知识分享,在实务上不应该常用,最好还是应该把型别定义明确,才是最好的方法喔!