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