Typescript 中的 泛型
<p>typeScript 中的泛型</p><p>1. 泛型的定义</p>
<p><strong>泛型</strong>：软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。</p>
<p>在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以自己的数据类型来使用组件。</p>
<p>通俗理解：泛型就是解决 类 接口 方法的复用性、以及对不特定数据类型的支持。</p>
<p> </p>
<p>泛型： 可以支持不特定的数据类型。 要求： 传入的参数和返回的参数一致</p>
<p>T表示泛型，具体什么类型是调用这个方法的时候决定的</p>
<p><strong>2. 泛型函数</strong></p>
<div class="cnblogs_code">
<pre><span style="font-size: 15px"><span style="color: rgba(0, 0, 255, 1)">function</span> getData<T><span style="color: rgba(0, 0, 0, 1)">(value:T):T {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> value;
}
getData</span><number>(123<span style="color: rgba(0, 0, 0, 1)">);
getData</span><number>('13') <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 错误的写法</span></span></pre>
</div>
<p><strong>3. 泛型类</strong></p>
<div class="cnblogs_code">
<pre><span style="font-size: 15px"><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 比如有个最小堆算法 普通类型</span>
<span style="color: rgba(0, 0, 0, 1)">class MinClass{
public list:number[]</span>=<span style="color: rgba(0, 0, 0, 1)">[];
add(num:number){
</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.list.push(num)
}
min():number{
</span><span style="color: rgba(0, 0, 255, 1)">var</span> minNum=<span style="color: rgba(0, 0, 255, 1)">this</span>.list;
</span><span style="color: rgba(0, 0, 255, 1)">for</span>(<span style="color: rgba(0, 0, 255, 1)">var</span> i=0;i<<span style="color: rgba(0, 0, 255, 1)">this</span>.list.length;i++<span style="color: rgba(0, 0, 0, 1)">){
</span><span style="color: rgba(0, 0, 255, 1)">if</span>(minNum><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.list) {
minNum </span>= <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.list;
}
}
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> minNum;
}
}
</span><span style="color: rgba(0, 0, 255, 1)">var</span> m1 = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> MinClass();
m1.add(</span>12<span style="color: rgba(0, 0, 0, 1)">);
m1.add(</span>2<span style="color: rgba(0, 0, 0, 1)">);
m1.add(</span>4<span style="color: rgba(0, 0, 0, 1)">);
m1.add(</span>1<span style="color: rgba(0, 0, 0, 1)">);
alert(m1.min());</span></span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="font-size: 15px">// 泛型类<br>class MinClass<T><span style="color: rgba(0, 0, 0, 1)">{
public list:T[]</span>=<span style="color: rgba(0, 0, 0, 1)">[];
add(value:T):</span><span style="color: rgba(0, 0, 255, 1)">void</span><span style="color: rgba(0, 0, 0, 1)">{
</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.list.push(value)
}
min():T{
</span><span style="color: rgba(0, 0, 255, 1)">var</span> minNum=<span style="color: rgba(0, 0, 255, 1)">this</span>.list;
</span><span style="color: rgba(0, 0, 255, 1)">for</span>(<span style="color: rgba(0, 0, 255, 1)">var</span> i=0;i<<span style="color: rgba(0, 0, 255, 1)">this</span>.list.length;i++<span style="color: rgba(0, 0, 0, 1)">){
</span><span style="color: rgba(0, 0, 255, 1)">if</span>(minNum><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.list) {
minNum </span>= <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.list;
}
}
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> minNum;
}
}
</span><span style="color: rgba(0, 0, 255, 1)">var</span> m1 = <span style="color: rgba(0, 0, 255, 1)">new</span> MinClass<number><span style="color: rgba(0, 0, 0, 1)">();
m1.add(</span>12<span style="color: rgba(0, 0, 0, 1)">);
m1.add(</span>2<span style="color: rgba(0, 0, 0, 1)">);
m1.add(</span>4<span style="color: rgba(0, 0, 0, 1)">);
m1.add(</span>1<span style="color: rgba(0, 0, 0, 1)">);
alert(m1.min());<br><br></span></span></pre>
<div>
<div> <span style="font-size: 15px">var m2 = new MinClass<string>(); // 实例化类 并且指定了类的T代表的类型是string</span></div>
<div><span style="font-size: 15px"> m2.add('a');</span></div>
<div><span style="font-size: 15px"> m2.add('b');</span></div>
<div><span style="font-size: 15px"> m2.add('c');</span></div>
<div><span style="font-size: 15px"> alert(m2.min());</span></div>
</div>
<pre><span style="font-size: 15px"><span style="color: rgba(0, 0, 0, 1)"> </span></span></pre>
</div>
<p><strong>4. 泛型接口</strong></p>
<div class="cnblogs_code">
<pre><span style="font-size: 15px"><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 第一种定义方式</span>
<span style="color: rgba(0, 0, 0, 1)">interface ConfigFn{
</span><T><span style="color: rgba(0, 0, 0, 1)">(value:T):T;
}
</span><span style="color: rgba(0, 0, 255, 1)">var</span> getData:ConfigFn = <span style="color: rgba(0, 0, 255, 1)">function</span><T><span style="color: rgba(0, 0, 0, 1)">(value:T):T {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> value;
}
getData</span><number>(123<span style="color: rgba(0, 0, 0, 1)">);
getData</span><number>('123') <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 错误写法</span></span></pre>
</div>
<p> </p>
<div class="cnblogs_code">
<pre><span style="font-size: 15px"><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 第二种定义方式</span>
interface ConfigFn<T><span style="color: rgba(0, 0, 0, 1)">{
(value:T):T;
}
</span><span style="color: rgba(0, 0, 255, 1)">function</span> getData<T><span style="color: rgba(0, 0, 0, 1)">(value:T):T{
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> value;
}
</span><span style="color: rgba(0, 0, 255, 1)">var</span> myGetData:ConfigFn<string> =<span style="color: rgba(0, 0, 0, 1)"> getData;
myGetData(</span>'123'<span style="color: rgba(0, 0, 0, 1)">);
myGetData(</span>123);</span></pre>
</div>
<p><strong>5. 把类作为参数类型的泛型类</strong></p>
<div>
<div> 1. 定义一个类</div>
<div> 2. 把类作为参数来约束数据传入的类型</div>
</div>
<div class="cnblogs_code">
<pre><span style="font-size: 15px"><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">
定义一个 User的类，这个类的作用就是映射数据库字段
然后定义一个 MysqlDb的类，这个类用于操作数据库
然后把User类作为参数传入到MysqlDb中
var user = new User({
username: '张三',
password: '123456'
});
var Db = new MysqlDb();
Db.add(user);
</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
class User{
username:string </span>|<span style="color: rgba(0, 0, 0, 1)"> undefined;
password:string </span>|<span style="color: rgba(0, 0, 0, 1)"> undefined;
}</span></span></pre>
<div>
<div><span style="font-size: 15px"> class MysqlDb<T>{</span></div>
<div><span style="font-size: 15px"> add(info:T):boolean{</span></div>
<div><span style="font-size: 15px"> console.log(info);</span></div>
<div><span style="font-size: 15px"> return true;</span></div>
<div><span style="font-size: 15px"> }</span></div>
<div><span style="font-size: 15px"> }</span></div>
<div><span style="font-size: 15px"> var u = new User();</span></div>
<div><span style="font-size: 15px"> u.username = '李斯';</span></div>
<div><span style="font-size: 15px"> u.password = '1232123';</span></div>
<br>
<div><span style="font-size: 15px"> var Db = new MysqlDb<User>();</span></div>
<div><span style="font-size: 15px"> Db.add(u);</span></div>
</div>
<pre><span style="font-size: 15px"><span style="color: rgba(0, 0, 0, 1)"> </span></span></pre>
</div>
<p> </p>
</div>
<div id="MySignature" role="contentinfo">
生活是痛苦的白天，死亡是凉爽的夜晚。<br><br>
来源：https://www.cnblogs.com/buluzombie/p/15063831.html
頁:
[1]