TypeScript - 泛型
<h1 id="什么是泛型">什么是泛型</h1><p>官方是这样介绍的：</p>
<blockquote>
<p>软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。<br>
在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。</p>
</blockquote>
<p>从上面的信息概括为泛型是支持多种类型的变量，根据用户需求灵活的变动，达到复用的效果。<br>
在实际开发中，函数是同样的逻辑，只是因为类型的不同，可能要再写一个函数，这样的问题很糟糕。正好泛型就可以用来解决这种问题。</p>
<h1 id="举例">举例</h1>
<p>现在有一个处理数组的函数，这里只是简单的返回，当做进行处理</p>
<pre><code class="language-javascript">function formatArr(arr:Array<string>):Array<string>{
return arr.map(item=>item)
}
</code></pre>
<p>如果这时候有其他类型的数组需要同样的操作，而 <code>formatArr</code> 只接受字符串数组，我们有什么方法来解决呢？</p>
<h2 id="第一种any">第一种：any</h2>
<p>函数接受一个任意类型的数组，这确实能够解决问题，但是也失去了类型检查的意义</p>
<pre><code class="language-javascript">function formatArr(arr:Array<any>):Array<any>{
return arr.map(item=>item)
}
</code></pre>
<h2 id="第二种重新定义函数">第二种：重新定义函数</h2>
<p>再写一个同样逻辑的函数，这看起来就不妥。如果还要接受更多的类型，而函数内部的逻辑复杂，这样重复定义多个同样逻辑的函数，会显得代码的冗余</p>
<pre><code class="language-javascript">function formatArr2(arr:Array<number>):Array<number>{
return arr.map(item=>item)
}
</code></pre>
<h2 id="正解泛型">正解：泛型</h2>
<p>泛型函数的类型与非泛型函数的类型没什么不同，只是声明一个类型参数在最前面。因为类型参数相当于变量，我们不必在函数定义时就定义类型，而是执行时由使用者规定类型。</p>
<pre><code class="language-javascript">function formatArr<T>(arr:Array<T>):Array<T>{
return arr.map(item=>item)
}
formatArr<string>(['1', '2', '3'])
formatArr<number>()
</code></pre>
<p>定义函数 <code>formatArr</code> 时，在函数名后定义一个类型参数 <code><T></code>，同时参数数组项也接受 <code>T</code> 类型的值。<br>
在使用函数时，使用者传入的类型即为 <code>T</code> 的类型。</p>
<blockquote>
<p>尖括号内的变量名并不是固定的，可以自定义，一般都是大写</p>
</blockquote>
<h1 id="泛型类">泛型类</h1>
<p>泛型类实例化传入的泛型类型，可以在整个作用域中使用该泛型类型，但要注意的是类的静态属性无法使用泛型类型</p>
<pre><code class="language-javascript">class Handsome<T>{
static myname:T = 'Jack'// 静态成员不能引用类类型参数
girlfriend: Array<T>
constructor(){
this.girlfriend = []
}
addGirlfriend(name:T){
this.girlfriend.push(name)
}
getAllGirlfriend():Array<T>{
return this.girlfriend
}
}
</code></pre>
<pre><code class="language-javascript">let handsome = new Handsome<string>()
handsome.addGirlfriend('Julia')
handsome.addGirlfriend('Vivian')
//handsome.addGirlfriend({name:'Ellie'})类型“{ name: string; }”的参数不能赋给类型“string”的参数
handsome.getAllGirlfriend() // ['Julia', 'Vivian']
</code></pre>
<h1 id="泛型接口">泛型接口</h1>
<h2 id="使用含有泛型的接口来定义函数">使用含有泛型的接口来定义函数</h2>
<pre><code class="language-typescript">interface CreateArrayFunc {
<T>(length: number, value: T): Array<T>;
}
let createArray: CreateArrayFunc;
createArray = function<T>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i++) {
result = value;
}
return result;
}
createArray(3, 'x'); // ['x', 'x', 'x']
</code></pre>
<h2 id="泛型参数提前到接口名">泛型参数提前到接口名</h2>
<pre><code class="language-typescript">interface CreateArrayFunc<T> {
(length: number, value: T): Array<T>;
}
let createArray: CreateArrayFunc<string>;
createArray = function<T>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i++) {
result = value;
}
return result;
}
createArray(3, 'x'); // ['x', 'x', 'x']
</code></pre>
<blockquote>
<p>这种方式使用泛型接口的时候，需要定义泛型的类型</p>
</blockquote>
<h2 id="接口范围内的泛型">接口范围内的泛型</h2>
<p>看到上面这两种方式定义函数，使用起来差不多，可能你会有个疑问，它们有什么区别，哪种更好？（我第一次看到的时候也会有这个疑问）<br>
接下来，我用第二种方式再写一个例子，看看它们的区别在哪里。</p>
<pre><code class="language-typescipt">interface People<T>{
name: T;
friends: Array<T>;
say: (msg:T)=>T
}
let student:People<string> = {
name: 'Joe',
friends: ['Mike','James','LuLu'],
say: function(msg){
return this.name+':'+msg
}
}
</code></pre>
<p>就像泛型类一样，当你需要在接口范围内多次用到泛型参数时，可以将它提前到接口名。</p>
<p>总的来说，以这种方式定义接口，可以统一接口内的类型，控制内部多个属性的参数类型。是不是这种就更好？不一定，如果你的需求只会用到一次泛型参数时，那就不必把泛型参数提前到接口名，因为在多人协同合作中，可能会引起其他使用者的误会。</p>
<h1 id="泛型约束">泛型约束</h1>
<p>泛型约束提供更智能的类型推导，为类型提供扩展。有时候我们希望泛型参数符合某些规则时，你应该想到使用泛型约束来解决问题。</p>
<h2 id="基于接口约束">基于接口约束</h2>
<p>使用泛型约束来对 <code>formatArr</code> 做一些改造，改造后的函数功能为对传入的参数进行切片，返回除第一项的数据。但并不是每个类型都有 <code>slice</code> 方法，这时候就需要对泛型进行约束，规定只有 <code>slice</code> 方法的参数才可以传入。为此，定义一个含有 <code>slice</code> 方法的接口，使用这个接口和 <code>extends</code> 关键词实现约束。</p>
<pre><code class="language-typescript">interface Slice{
slice:Function;
}
function formatArr<T extends Slice>(arg:T):T{
return arg.slice(1)
}
formatArr()
formatArr('hello')
</code></pre>
<h2 id="keyof约束">keyof约束</h2>
<p>再来看一个泛型约束的例子，为函数定义两个泛型类型，<code>T</code>类型为对象，keyof定义<code>U</code>类型为<code>T</code>类型上的一个key值。在使用该函数，ts会进行类型推导，提示你第二个参数应该为第一个参数上的key值。</p>
<pre><code class="language-javascript">function getValue<T extends object, U extends keyof T>(obj:T, key:U){
return obj
}
let obj = {
color: 'white',
size: 'big'
}
getValue(obj, "color") //ok
getValue(obj, "name") //error类型“"name"”的参数不能赋给类型“"color" | "size"”的参数
</code></pre>
<p>上面的例子可能你会想到接口继承，因为接口继承也使用了 <code>extends</code> 关键词，要注意在泛型约束里<code>extends</code>并不是表示继承关系。</p>
<h1 id="泛型参数的默认类型">泛型参数的默认类型</h1>
<p>在 TypeScript 2.3 以后，我们可以为泛型中的类型参数指定默认类型。当使用泛型时没有在代码中直接指定类型参数，从实际值参数中也无法推测出时，这个默认类型就会起作用。就像 ES6 中的函数默认参数一样，为代码增加健壮性。</p>
<pre><code class="language-javascript">function createArray<T = string>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i++) {
result = value;
}
return result;
}
</code></pre>
<h1 id="写在最后">写在最后</h1>
<p>通过以上使用泛型的几个例子，不难发现泛型的强大，可变的类型变量和泛型约束为 TypeScript 的类型推导都提供了很大的贡献。开发者根据类型提示能轻松知道怎么调用其他开发者封装的方法，像是基于文档编程的感觉，这也是为什么我们说在多人开发中，TypeScript 可以提高开发效率。类型是 TypeScript 的核心，也是它的魅力所在。理解并应用泛型，可以使我们的 TypeScript 水平更上一层楼。</p>
</div>
<div id="MySignature" role="contentinfo">
<div>作者：WahFung</div>
<div>出处：http://www.cnblogs.com/chanwahfung/</div>
<div>本文版权归作者和博客园共有，转载请贴出原文链接，并保留此段声明，否则保留追究法律责任的权利。 </div><br><br>
来源：https://www.cnblogs.com/chanwahfung/p/11965469.html
頁:
[1]