请选择 进入手机版 | 继续访问电脑版
查看: 142|回复: 0

走进TypeScript章节回顾:初识TypeScript【TS系列】TypeScript进阶(三)

[复制链接]

132

主题

134

帖子

713

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
713
发表于 2022-10-26 06:59:17 | 显示全部楼层 |阅读模式
走进 TypeScript

章节回顾:【TS系列】认识TypeScript【TS系列】TypeScript的基本类型【TS系列】进阶TypeScript(一)【TS系列】进阶TypeScript(2)【TS系列】进阶TypeScript(3)

如果文章有任何改进的地方,请告诉我

先谢谢各位了~

1. TypeScript 泛型

在软件工程中泛目录源码,我们不仅要创建一致且定义明确的 API,还要考虑可重用性。组件不仅可以支持当前的数据类型,还可以支持未来的数据类型,这为您在构建大型系统时提供了很大的灵活性。

在 C# 和 Java 等语言中,泛型可用于创建可支持多种数据类型的可重用组件。这允许用户使用具有自己数据类型的组件。

设计泛型的关键目的是在成员之间提供有意义的约束,这些成员可以是:类的实例成员、类的方法、函数参数和函数返回值。

泛型是一个模板,它允许同一个函数接受不同类型的参数。使用泛型创建可重用组件比使用任何类型更好,因为泛型保存参数类型。

1.通用接口

<p><pre>    <code class="prism language-typescript"><span class="token keyword">interface</span> <span class="token class-name">GenericIdentityFn<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token punctuation">{</span>
  <span class="token punctuation">(</span>arg<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></p>
2.泛型类

<p><pre>    <code class="prism language-typescript"><span class="token keyword">class</span> <span class="token class-name">GenericNumber<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token punctuation">{</span>
  zeroValue<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">;</span>
  <span class="token function-variable function">add</span><span class="token operator">:</span> <span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token constant">T</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> myGenericNumber <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">GenericNumber<span class="token operator"><</span><span class="token builtin">number</span><span class="token operator">></span></span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
myGenericNumber<span class="token punctuation">.</span>zeroValue <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
myGenericNumber<span class="token punctuation">.</span><span class="token function-variable function">add</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> x <span class="token operator">+</span> y<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></p>
3. 通用变量

对于 TypeScript 泛型的新手来说,看到 T 和 E 以及 K 和 V 等泛型变量估计会一头雾水。其实这些大写字母并没有本质的区别,就是只是一个约定。也就是说,大写字母AZ定义的类型变量属于泛型类型,将T替换为A也是如此。下面我们介绍一些常见的泛型变量的含义:

4. 通用工具类型

为了方便开发者,TypeScript 内置了一些常用的工具类型,如 Partial、Required、Readonly、Record 和 ReturnType。限于篇幅,这里只简单介绍Partial工具类型。不过在具体介绍之前,我们还是要先介绍一些相关的基础知识,以便读者自行学习其他工具类型。

1.typeof

在 TypeScript 中,typeof 运算符可用于获取变量声明或对象的类型。

<p><pre>    <code class="prism language-typescript"><span class="token keyword">interface</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  age<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> sem<span class="token operator">:</span> Person <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">&#39;semlinker&#39;</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">30</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">type</span> <span class="token class-name">Sem</span><span class="token operator">=</span> <span class="token keyword">typeof</span> sem<span class="token punctuation">;</span> <span class="token comment">// -> Person</span>
<span class="token keyword">function</span> <span class="token function">toArray</span><span class="token punctuation">(</span>x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Array</span><span class="token operator"><</span><span class="token builtin">number</span><span class="token operator">></span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">[</span>x<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">type</span> <span class="token class-name">Func</span> <span class="token operator">=</span> <span class="token keyword">typeof</span> toArray<span class="token punctuation">;</span> <span class="token comment">// -> (x: number) => number[]</span>
</code></pre></p>
2.keyof

keyof 运算符可用于对象中的所有键值:

<p><pre>    <code class="prism language-typescript"><span class="token keyword">interface</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
    age<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">K1</span></span> <span class="token operator">=</span> <span class="token keyword">keyof</span> Person<span class="token punctuation">;</span> <span class="token comment">// "name" | "age"</span>
<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">K2</span></span> <span class="token operator">=</span> <span class="token keyword">keyof</span> Person<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// "length" | "toString" | "pop" | "push" | "concat" | "join" </span>
<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">K3</span></span> <span class="token operator">=</span> <span class="token keyword">keyof</span> <span class="token punctuation">{</span> <span class="token punctuation">[</span>x<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> Person <span class="token punctuation">}</span><span class="token punctuation">;</span>  <span class="token comment">// string | number</span>
</code></pre></p>
3.在

in 用于迭代枚举类型:

<p><pre>    <code class="prism language-typescript"><span class="token keyword">type</span> <span class="token class-name">Keys</span> <span class="token operator">=</span> <span class="token string">"a"</span> <span class="token operator">|</span> <span class="token string">"b"</span> <span class="token operator">|</span> <span class="token string">"c"</span>
<span class="token keyword">type</span> <span class="token class-name">Obj</span> <span class="token operator">=</span>  <span class="token punctuation">{</span>
  <span class="token punctuation">[</span>p <span class="token keyword">in</span> Keys<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">any</span>
<span class="token punctuation">}</span> <span class="token comment">// -> { a: any, b: any, c: any }</span>
</code></pre></p>
4.推断

在条件类型语句中,您可以使用 infer 声明类型变量并使用它。

<p><pre>    <code class="prism language-typescript"><span class="token keyword">type</span> <span class="token class-name">ReturnType<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token constant">T</span> <span class="token keyword">extends</span> <span class="token punctuation">(</span>
  <span class="token operator">...</span>args<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">infer</span> <span class="token constant">R</span> <span class="token operator">?</span> <span class="token constant">R</span> <span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
</code></pre></p>
上面代码中,infer R就是声明一个变量来携带传入函数签名的返回值类型。简单来说,就是为了方便获取函数返回值的类型。

5.扩展

有时候我们定义的泛型不想太灵活或者想继承某些类等,我们可以通过extends关键字添加泛型约束。

<p><pre>    <code class="prism language-typescript"><span class="token keyword">interface</span> <span class="token class-name">ILengthwise</span> <span class="token punctuation">{</span>
  length<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token generic-function"><span class="token function">loggingIdentity</span><span class="token generic class-name"><span class="token operator"><</span><span class="token constant">T</span> <span class="token keyword">extends</span> ILengthwise<span class="token operator">></span></span></span><span class="token punctuation">(</span>arg<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">T</span> <span class="token punctuation">{</span>
  <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arg<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> arg<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></p>
现在这个泛型函数是有界的泛目录源码,所以它不再适用于任意类型:

<p><pre>    <code class="prism language-typescript"><span class="token function">loggingIdentity</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// Error, number doesn&#39;t have a .length property</span>
</code></pre></p>
这时候我们需要传入一个符合约束类型的值,该值必须包含需要的属性:

<p><pre>    <code class="prism language-typescript"><span class="token function">loggingIdentity</span><span class="token punctuation">(</span><span class="token punctuation">{</span>length<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></p>
6.部分

Partial 的作用是让某个类型中的所有属性都是可选的。

定义:

<p><pre>    <code class="prism language-typescript"><span class="token comment">/**
* node_modules/typescript/lib/lib.es5.d.ts
* Make all properties in T optional
*/</span>
<span class="token keyword">type</span> <span class="token class-name">Partial<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token punctuation">[</span><span class="token constant">P</span> <span class="token keyword">in</span> <span class="token keyword">keyof</span> <span class="token constant">T</span><span class="token punctuation">]</span><span class="token operator">?</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">P</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></p>
在上面的代码中,首先通过keyof T得到T的所有属性名,然后使用in进行遍历,赋值给P,最后通过T[P]得到对应的属性值。中间 ?符号用于使所有属性可选。

例子:

<p><pre>    <code class="prism language-typescript"><span class="token keyword">interface</span> <span class="token class-name">Todo</span> <span class="token punctuation">{</span>
  title<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  description<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">updateTodo</span><span class="token punctuation">(</span>todo<span class="token operator">:</span> Todo<span class="token punctuation">,</span> fieldsToUpdate<span class="token operator">:</span> Partial<span class="token operator"><</span>Todo<span class="token operator">></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token operator">...</span>todo<span class="token punctuation">,</span> <span class="token operator">...</span>fieldsToUpdate <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> todo1 <span class="token operator">=</span> <span class="token punctuation">{</span>
  title<span class="token operator">:</span> <span class="token string">"organize desk"</span><span class="token punctuation">,</span>
  description<span class="token operator">:</span> <span class="token string">"clear clutter"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> todo2 <span class="token operator">=</span> <span class="token function">updateTodo</span><span class="token punctuation">(</span>todo1<span class="token punctuation">,</span> <span class="token punctuation">{</span>
  description<span class="token operator">:</span> <span class="token string">"throw out trash"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></p>
在上面的updateTodo方法中,我们使用Partial工具类型来定义fieldsToUpdate的类型为Partial,即:

<p><pre>    <code class="prism language-typescript"><span class="token punctuation">{</span>
   title<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
   description<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></p>
概括

豪侠泛目录站群程序,专业泛目录,站群,二级目录,泛站群程序!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表