TypeScript `unknown` 類型

時間 2020-05-21

標籤 typescript unknown 類型简体版

原文原文鏈接

<table class="d-block"> <tbody class="d-block"> <tr class="d-block"> <td class="d-block comment-body markdown-body js-comment-body rgh-linkified-code">html

<code>unknown</code> 字面理解和 <code>any</code> 其實沒差，任何類型均可賦值給它，但有一點， <blockquote> Anything is assignable to unknown, but unknown isn’t assignable to anything but itself and any without a type assertion or a control flow based narrowing --<a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html" rel="nofollow">TypeScript 3.0 Release notes - New unknown top type</a> </blockquote> <code>unknown</code> 類型不能賦值給除了 <code>unknown</code> 或 <code>any</code> 的其餘任何類型，使用前必需顯式進行指定類型，或是在有條件判斷狀況下可以隱式地進行類型推斷的狀況。 下面代碼是合法的： <div class="highlight highlight-source-ts"><pre>let a: unknown; const b: unknown = a; const c: any = a;</pre></div> 由於 <code>unknown</code> 是能夠賦值給 <code>unknown</code> 的，而下面的代碼則不行， <div class="highlight highlight-source-ts"><pre>let a: unknown; // 🚨Type 'unknown' is not assignable to type 'number'.ts(2322) const b: number = a;</pre></div> 可是若是使用時，明確知道了類型，則能夠這樣來修正： <div class="highlight highlight-source-ts"><pre>let a: unknown; // 🚨Type 'unknown' is not assignable to type 'number'.ts(2322) const b: number = a;</pre></div> 或者在條件語句中，已經能夠明確推斷出類型： <div class="highlight highlight-source-ts"><pre>let a: unknown; let b: number = <number>a;typescript

function isNumber(val: any): val is number { return typeof val === "number"; }安全

if (isNumber(a)) { b = a; }</pre></div>markdown

因此在使用時，<code>unknown</code> 類型會比 <code>any</code> 更加安全。這個安全體如今，雖然它和 <code>any</code> 同樣存儲了任意類型的值，可是具體使用的時候，這個類型須要顯式肯定，由使用者進行指定將 <code>unknown</code> 轉換成某一肯定類型。 <h2>優先級</h2> <h3>與正交類型的搭配</h3> 正交類型（intersection type）中，<code>unknown</code> 不起做用： <div class="highlight highlight-source-ts"><pre>type T00 = unknown & null; // null type T01 = unknown & undefined; // undefined type T02 = unknown & null & undefined; // null & undefined (which becomes never) type T03 = unknown & string; // string type T04 = unknown & string[]; // string[] type T05 = unknown & unknown; // unknown type T06 = unknown & any; // any</pre></div> <h3>與聯合類型的搭配</h3> 聯合類型（union type）中 <code>unknown</code> 起絕對做用： <div class="highlight highlight-source-ts"><pre>type T10 = unknown | null; // unknown type T11 = unknown | undefined; // unknown type T12 = unknown | null | undefined; // unknown type T13 = unknown | string; // unknown type T14 = unknown | string[]; // unknown type T15 = unknown | unknown; // unknown type T16 = unknown | any; // any</pre></div> 上面僅一個例外，及和 <code>any</code> 組成的聯合類型，最終結果是 <code>any</code>。 <h3>使用在條件類型中</h3> 條件類型（conditional type）中， <div class="highlight highlight-source-ts"><pre>type T30<T> = unknown extends T ? true : false; // Deferred type T31<T> = T extends unknown ? true : false; // Deferred (so it distributes)</pre></div> 對於上面的條件類型，進行如下測試： <div class="highlight highlight-source-ts"><pre>// `unknown` 不能賦值給 `number` type foo = T30<number>; // false // `unknown` 能夠賦值給 `any` type bar = T30<any>; // true測試

// 任何類型均可賦值給 unknown，因此都爲 true type a = T31<number>; // true type b = T31<any>; // true</pre></div>spa

<h2>可進行的操做</h2> 只能進行等於的判斷，其餘操做則會報錯。 <div class="highlight highlight-source-ts"><pre>function f10(x: unknown) { x == 5; x !== 10; x >= 0; // Error x + 1; // Error x * 2; // Error -x; // Error +x; // Error }</pre></div> 屬性字段獲取，方法調用等，也是不容許的： <div class="highlight highlight-source-ts"><pre>function f11(x: unknown) { x.foo; // Error x[5]; // Error x(); // Error new x(); // Error }</pre></div> 當解構中有 <code>unknown</code> 類型時，會致使解構出來的結果也是 <code>unknown</code>。 <div class="highlight highlight-source-ts"><pre>function f26(x: {}, y: unknown, z: any) { let o1 = { a: 42, ...x }; // { a: number } let o2 = { a: 42, ...x, ...y }; // unknown let o3 = { a: 42, ...x, ...y, ...z }; // any }</pre></div> <h2>具體使用場景</h2> <code>unknown</code> 用於變量類型不肯定，但確定能夠肯定的情形下，好比下面這個示例中，入參總歸會有個值，根據這個值的類型進行不一樣的處理，這裏使用 <code>unknown</code> 替代 <code>any</code> 則會更加類型安全。 <div class="highlight highlight-source-ts"><pre>function prettyPrint(x: unknown): string { if (Array.isArray(x)) { return "[" + x.map(prettyPrint).join(", ") + "]" } if (typeof x === "string") { return `"${x}"` } if (typeof x === "number") { return String(x) } return "etc." }</pre></div> <h2>相關資源</h2> <ul> <li><a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html" rel="nofollow">TypeScript 3.0 Release notes - New unknown top type</a></li> <li><a href="https://blog.logrocket.com/when-to-use-never-and-unknown-in-typescript-5e4d6c5799ad/" rel="nofollow">When to use <code>never</code> and <code>unknown</code> in TypeScript</a></li> </ul> </td> </tr> </tbody> </table>code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。