TypeScript `unknown` 类型

一筋两堵 發表於 2019-6-4 02:43:00

<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">
<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
--TypeScript 3.0 Release notes - New unknown top type
</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;
function isNumber(val: any): val is number { 
return typeof val === "number"; 
}
if (isNumber(a)) { 
b = a; 
}</pre></div>
所以在使用时，<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
// 任何类型都可赋值给 <code>unknown</code>，所以都为 true 
type a = T31<number>; // true 
type b = T31<any>; // true</pre></div>
<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>TypeScript 3.0 Release notes - New unknown top type</li>
<li>When to use <code>never</code> and <code>unknown</code> in TypeScript</li>
</ul>
</td>
</tr>
</tbody>
</table>

</div>
<div id="MySignature" role="contentinfo">
<div>
<img src="https://licensebuttons.net/l/by-nc-sa/3.0/88x31.png" style="vertical-align: middle">
CC BY-NC-SA 署名-非商业性使用-相同方式共享
</div> 
来源：https://www.cnblogs.com/Wayou/p/typescript_unknown_type.html

頁: [1]

琼殿技术论坛's Archiver

TypeScript `unknown` 类型