[從 0 開始的 Angular 生活]No.24 避免在範本中出現 TypeScript 型別錯誤

發表於 | 更新於 | 分類於

前言

從我開始學習 Angular 到現在雖然不是很久，但也有一段時間了。蠻容易在 Template 內跑出 TypeScript 的型別錯誤，那麼又該如何避免呢？

Template 內跑出 TypeScript 的型別錯誤

像這樣，這種類似的情況其實蠻容易發生的，很容易看到類似像這樣 TypeScript 型別的錯誤。

這段錯誤的意思是說，這個 item 的區域變數並沒有定義它有個屬性叫做 subjec ，所以它認不得這是什麼。

這種情況下有兩個解法：

  • 使用中括號選取屬性的方式，透過這種方式 TypeScript 就沒辦法檢查 item 下是否有 subjec 這個屬性，此時就會回傳 任意 ( any ) 型別
  • 另一個解法則是官網提供的類型轉換函式

類型轉換函式

類型轉換函數的用法的則是在一個區域變數或者屬性的前後加上一個 $any() 的函式將其包覆，而官網的範例是這樣的：

1
2
3
4
<!-- Accessing an undeclared member -->
<div>
  The hero's marker is {{$any(hero).marker}}
</div>

透過這個函式回傳的型別的一定是 any 型別，這樣也能使 Angular 跳過 TypeScript 型別的檢查

於是我們依樣畫葫蘆的嘗試看看

這時會發現出現錯誤 Unknown Method ，原因是目前 Angular language service 這個擴充套件還不支援 $any()，未來等這個套件更新後這個問題應該會自然消失。

不過網頁仍然可以正常運行沒有錯誤，代表這個語法其實是可以用的。

如果真的覺得這個錯誤很礙眼，那還是使用第一種介紹的方法吧～

0%