聊聊TypeScript中unknown和any的差異

這篇文章帶大家比較一下TypeScript中的unknown和any，聊聊unknown和any之間有什麼差別，希望對大家有幫助！

我們知道 any 類型的變數可以被賦給任何值。

let myVar: any = 0;
myVar = '1';
myVar = false;

TypeScript 指南並沒有鼓勵使用any，因為使用它就會丟掉型別限制--而需要型別限制也是我們選擇TypeScript 的原因，所以就是有點背道而馳。

TypeScript（3.0 以上版本）也提供了類似 any 的特殊型別 unknown。我們也可以為unknown 類型變數指派任何值：

let myVar: unknown = 0;
myVar = '1';
myVar = false;

那現在就有一個問題了， any 和unknown 那現在就有一個問題了，

和unknown 那現在有啥區別？

1. unknown vs any為了更好地理解

和any 之間的區別，我們先從編寫一個想要呼叫其唯一參數的函數開始。 我們將

的唯一參數設定為any 類型<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">function invokeAnything(callback: any) { callback(); } invokeAnything(1); // throws &quot;TypeError: callback is not a function&quot;</pre><div class="contentsignin">登入後複製</div></div>因為callback 參數是任何類型的，所以語句

不會觸發型別錯誤。我們可以用any 類型的變數做任何事。 但是運行會拋出一個運行時錯誤:

。 1 是一個數字，不能作為函數調用，TypeScript並沒有保護程式碼避免這個錯誤

那既允許invokeAnything() 函數接受任何類型的參數，又要強制對該參數進行類型檢查防止上面這種報錯，要怎麼做呢？

unknown 大哥來控場。 與 any 一樣，

變數接受任何值。但是當嘗試使用 unknown 變數時，TypeScript 會強制執行類型檢查。這不就是我們想要的嘛。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">function invokeAnything(callback: unknown) { callback(); // Object is of type &amp;#39;unknown&amp;#39; } invokeAnything(1);</pre><div class="contentsignin">登入後複製</div></div>因為callback 參數的型別是unknown，所以語句callback() 有一個型別錯誤:

。與 any 相反，TypeScript會保護我們不呼叫可能不是函數的東西。 在使用一個

類型的變數之前，你需要進行類型檢查。在這個例子中，我們只需要檢查callback 是否是函數類型。

function invokeAnything(callback: unknown) {
  if (typeof callback === 'function') {
    callback();
  }
}

invokeAnything(1);

2. unknown 和 any 的心智模式#說實話，當我學習的時候，我很難理解

。它與

有什麼不同，因為這兩種類型都接受任何值
• 下面是幫助我理解兩者區別的規則:可以將任何東西賦給
unknown
• 類型，但在進行類型檢查或類型斷言之前，不能對unknown 進行操作可以把任何東西分配給
any

any類型進行任何操作

上面的例子剛好說明了unknown 和`any 之間的相似和不同。

unknown 範例：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">function invokeAnything(callback: unknown) { // 可以将任何东西赋给 `unknown` 类型， // 但在进行类型检查或类型断言之前，不能对 `unknown` 进行操作 if (typeof callback === &amp;#39;function&amp;#39;) { callback(); } } invokeAnything(1); // You can assign anything to `unknown` type</pre><div class="contentsignin">登入後複製</div></div>類型檢查

，檢查callback# 是否為函數，如果是，則可以呼叫。

any 範例：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">function invokeAnything(callback: any) { // 可以对 `any` 类型执行任何操作 callback(); } invokeAnything(1); // 可以把任何东西分配给`any`类型</pre><div class="contentsignin">登入後複製</div></div>如果<code>callback是any

, TypeScript 就不會強制callback() 語句進行任何型別檢查。

3.總​​結

和 any 是2個特殊的類型，可以容納任何值。 推薦使用unknown 而不是

，因為它提供了更安全的類型--如果想要對unknown 進行操作，必須使用類型斷言或縮小到一個特定的類型。

以上是聊聊TypeScript中unknown和any的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！