Typescript 实用程序类型

Q神日志 2023-08-07 15:52:04

在这篇小文章中我将讨论Typescript 的实用类型

实用程序类型是所有打字稿代码都可用的功能。让我们看看其中的一些：

对象的实用程序类型

首先让我们定义一些对象作为类型：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-name-color)">User</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">id</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">number</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">userName</span><span style="color:var(--syntax-text-color)">?:</span> <span style="color:var(--syntax-declaration-color)">string</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>
</code></span></span>

部分的

使该类型的所有属性都未定义。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>type PartialUser = Partial<User>;
</code></span></span>

必需的

使该类型的所有属性都成为必需的。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>type RequiredUser = Required<User>;
</code></span></span>

忽略

我们可以省略该类型的某些属性并创建一个没有它的新类型。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>type OmitUserUsername = Omit<User, "userName">;
</code></span></span>

我们可以传递联合类型以获得更多属性：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>type OnlyId = Omit<User, "userName" | "name">;
</code></span></span>

挑选

与 Omit 不同，我们可以选择该类型的一些属性

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>type PickId = Pick<User, "id">;
</code></span></span>

作为省略，我们可以传递联合类型以获得更多属性：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>type WithoutUser = Pick<User, "id" | "userName">;
</code></span></span>

只读

将属性变为只读

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>type ReadOnlyUser = Readonly<User>;
</code></span></span>

如果我们尝试更改某些属性，则会出现一些错误：

联合类型的实用程序类型

让我们创建我们的联合类型：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-name-color)">Role</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">admin</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-error-color)">|</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">user</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-error-color)">|</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">manager</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>

排除

它将删除联合类型中的某些类型

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-name-color)">NoUserRole</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">Exclude</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">Role</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">user</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>

提炼

让我们创建另一种联合类型：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-name-color)">RoleAttributes</span> <span style="color:var(--syntax-error-color)">=</span>
  <span style="color:var(--syntax-error-color)">|</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">role</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">admin</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
      <span style="color:var(--syntax-text-color)">permission</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">all</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-error-color)">|</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">role</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">user</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-error-color)">|</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">role</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">manager</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-text-color)">};</span>
</code></span></span>

现在让我们提取admin使用：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-name-color)">AdminRole</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">Extract</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">RoleAttributes</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">role</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">admin</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>

不可为空

让我们定义一个联合类型，其结果可以是字符串、空或未定义；

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-name-color)">MaybeString</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">string</span> <span style="color:var(--syntax-error-color)">|</span> <span style="color:var(--syntax-declaration-color)">null</span> <span style="color:var(--syntax-error-color)">|</span> <span style="color:var(--syntax-declaration-color)">undefined</span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-name-color)">NonNullableString</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">NonNullable</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">MaybeString</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>

函数的实用程序类型

让我们定义我们的函数类型：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-name-color)">myFunction</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">a</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">number</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">b</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">number</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-declaration-color)">number</span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>

返回类型

return它将返回函数的类型

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-name-color)">ReturnValueFunction</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">ReturnType</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">myFunction</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>

参数

它将返回函数参数的元组：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-name-color)">MyParameters</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">Parameters</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">myFunction</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>

期待

它将返回 Promise 的类型

让我们定义一种 Promise

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-name-color)">PromiseUser</span><span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">Promise</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">User</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-name-color)">Result</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">Awaited</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">PromiseUser</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>

就是这样，伙计们！让我们看看有什么挑战吗？

定义该异步函数的结果类型：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">getMyName</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">async</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Kevin</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-text-color)">};</span>
<span style="color:var(--syntax-text-color)">};</span>
</code></span></span>

我们如何获得字符串类型的对象？

答案：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">type</span> <span style="color:var(--syntax-name-color)">MyNameResult</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">Awaited</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">ReturnType</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-declaration-color)">typeof</span> <span style="color:var(--syntax-name-color)">getMyName</span><span style="color:var(--syntax-error-color)">>></span><span style="color:var(--syntax-text-color)">;</span>
</code></span></span>