TS-泛型
 
1.当需要 定义 一个 参数 类型 与 返回 值 类型 不确定的 函数 时：
 
使用 any
 
function test(name:any):any{
	console.log('this is 泛型 demo');
	/*
		...
	*/
	return name
}
test(123);
使用 any  定义 时  存在 问题： 虽然 可以 知道 传入值 的类型 但是  无法 获取 函数 返回 值 的 类型 。
 
这 个 问题 可以 用 泛型 很好 的解决。
 
2.泛型定义：
 
泛型 是 指 在 定义 函数 /接口 / 类 时，不预先 指定 具体 的 类型，而是 在 使用 的 时候 再 指定 类型限制 的 一种 特性。
用法：
 使用 方法 一：
 
function test<T>(name:T):T{
	console.log('hellow 泛型');
	/*
		...
	*/
	return name;
}
test<number>(123);   //  最终 返回 值 是 number 类型

//定义 多个 类型
test<number|string>(123);  //  返回 值为 number 类型     可以 传入 字符串 或者  数值 类型
//类型 之间 用 | 符号 分隔
 
使用 类似 于 函数 传参，传 什么 数据 类型 则 T 表示 什么 数据类型，使用 <…> 表示。T也可以 换成 任意 字符。
 
若指定 了 返回 值为 泛型 如 上述函数 ，则 函数 必须 返回 任意类型，即 返回值 类型 不可以 是 明确 规定 的 类型，注意 隐式转换。
 eg:
 
function test<T>(name:T):T{
	console.log('hellow 泛型');
	/*
		...
	*/
	return name+'aaa';   // error          because 字符串 + 任何 数据 都等于 字符串  所以 这里 相当于 固定了 返回 值 为 字符串
}
 
使用 方法 二：
 类型 推断
 
//直接调用 不传 泛型 实参
test(123);  // 此时 相当 与   test<number>(123)       编译器 会 自动识别 传入 的 参数 ，将 传入 的 参数  类型 认为 是 泛型 指定 的 类型

//若 函数 有 2个 及 以上 参数  且 有 2个 及 以上 参数 指定的 类型 都为 泛型
function test<T>(name:T,age:T):T{
	return name;
}
//此时 类型 推断 会 默认 将 第一个 参数 的 数据类型 作为 泛型 指定的 类型
test(123,'111'); //error  此时 必须 传 numbe 类型
 
注意：使用 泛型 会相当 容易 出错 ，所以 看情况 使用 ，不要 什么 都使用 泛型。
 eg: 当 一个 函数 的 参数 使用 泛型 限制 类型 时，则 在 该 方法 内 此 参数 使用 的 方法 必须是 所有 类型 通用 的 方法 ，否则会报错。
 
function test<T>(titile:T,name:T):boolean{
	let  index = title.indexOf(name);    // error     indexOf  number boolean等 类型  不能 使用  
	return index === -1;
}
 
在 接口 中 使用 泛型
 
interface Search {
	<T>(name:T,age:T):boolean
}
let fn:Search =  function <T>(name:T,age:T):boolean{
	return  name === age;
}
fn<string>('111','222');
 
泛型 在 类 中 的 运用
 
class  Animal <T>{    // 此处 的 泛型 为 限制 构造 函数参数 类型  以及  类 成员 变量 的 类型
	name:T;
	constructor(name:T){
		this.name = name;
	}
	action<T>(say:T):T{//  此处 为  限制 类 中 成员 方法 action    若 此处 不写 <T> 则 使用 类 声明的 <T>
		return say;
	}
}
let dog = new Animal<string>('dog');        // 此处 的 striing 为 限制 构造 函数参数 类型  以及  类 成员 变量 的 类型
dog.action<number>(123); //  此处 为  限制 类 中 成员 方法 action   
 
扩展：
 (1).约束泛型 使用 接口 约束 泛型
 使用 extends 用于 约束 泛型 如下:
 
interface LengthNum {
	length:number;
}
function fn<T extends LengthNum>(name:T):T{
	return name
}
//  此时  相当于 约束 了 泛型 的 类型 必须 是 含有 length 属性 的 数据类型
fn<number>(123);// error     number 类型 没有 length 属性

fn<string>('111'); // success   string 类型 有 length 属性

fn<object>({}); //error    object 类型 没有 length 属性
 
(2).数组 泛型
 
let arr: Array<number> = [1,2,3,4];     ===    let arr: number[] = [1,2,3,4]
 
写一个 稍微复杂的 例子:
 
function createArray<T>(length:number,value:T):Array<T>{
		let  result: T[] = [];
		for(let i=0;i<length;i++){
			result.push(value);
		}
		return result;
}
createArray<string>(3,'x');   //   此时 表示 该 函数 必须 返回 一个 字符串 数组

 
注意：
 1.函数 在定义 时 若 指定 返回 值 不为 void 或者 any 则 在函数 内 必须 写 return

TS泛型
 
泛型可以创建可重用的组件,一个组件可以支持多种类型,解决类,接口,方法的复用性,以及对不确定数据类型的使用
 
class MinCla<T>{
    public list:T[]=[];
    add(value:T):void{
        this.list.push(value)
    }
    min():T{
        var minNum=this.list[0];
        for(var i=0;i<this.list.length;i++){
            if(minNum>this.list[i]){
                minNum=this.list[i]
            }
        }
        return minNum
    }
}
//这样做的一个好处是可以做类型校验,如果是any就不行,这是泛型的特点,传入什么类型返回什么类型是一致的
var m=new MinCla<number>()
m.add(1)
m.add(3)
console.log(m.min());//1
var m1=new MinCla<string>()
m1.add('a')
m1.add('z')
console.log(m1.min());//a
 
 
 
泛型接口用法跟泛型类差不多就是把类型换成泛型就行了
 
 
interface Config{
        <T>(value1:T):T
}
var getData:Config =function<T>(value1:T){ //直接在后面加:泛型接口名称,注意类和接口都可以作为参数传入
    return value1
}
//第二种写法
interface Config<T>{
        (value1:T):T
}
function getData<T>(value1:T):T{
    return value1
}
var myGetData:Config<string>=getData
 
把类作为参数类型的泛型类
 
//把类作为参数约束数据传入的类型
class User {
   username:string|undefined;
   password:string|undefined
}
class MySql<T> {
    add(user:T):boolean{ //把User类型作为参数赋值进去
        console.log(user);//打印出User对象
        return true
    }
}
var u=new User();
u.password='123456'
u.username="张三"
var Db=new MySql<User>();
Db.add(u)
 
TS命名空间(namespace)
 
命名空间属于内部模块,主要用于模块避免命名冲突,一个模块里可以有多个命名空间
 
namespace A{
	//因为命名空间是私有的,所以需要暴露出来
	export 代码
}
//调用
var a=new A.类名/方法名
 
TS装饰器
 
普通装饰器不传参
 
//扩展类,方法的功能
function logClass(params:any){
	console.log(params);//params作为第一个参数,默认就是Animal这个类
	//动态扩展逻辑代码
	params.prototype.run=function(){
	}
}
@logClass//注意后面不要冒号
class Animal{
	//逻辑代码
}
 
装饰器工厂可以传参
 
function logClass(params:string){
	return function(target:any){
		console.log(params);//字符串参数
        console.log(target);//target打印出来就是Animal这个类	
	}
}
@logClass('字符串参数')//注意后面不要冒号
class Animal{
	//逻辑代码
}
 
装饰器还可以重载类或者方法
 
function logClass(params:any){
   return class extends params {
      apiUrl:any='我是修改的'
      getData(){
          this.apiUrl=this.apiUrl+'---------0'
          console.log(this.apiUrl);
      }
   } 
}
@logClass
class HttpClient {
    public apiUrl:string|undefined;
    constructor() {
        this.apiUrl='我是构造函数里面的apiurl'
    }
    getData(){
        console.log(this.apiUrl);
    }
}
var http=new HttpClient();
http.getData()//我是修改的---------0
 
装饰器中每个参数打印的结果
 
//类装饰器
function logClass(params:any){
	return function(target:any){
    	 console.log(params);//12345 装饰器参数
     	 console.log(target);//target打印出来就是这个HttpClient类	
 }
}
//属性装饰器
function shuxing(params:any){
    return function(target:any,attr:any){
        console.log(params);//属性参数
        //getData跟a方法组成的数组对象,对于静态成员来说就是类的构造函数,对于实例来说就是类的原型对象 
        console.log(target);
        console.log(attr); //apiUrl  就是属性名称
        target[attr]=params//修改属性
    }
}
//方法装饰器
function logMethod(params:any){
    return function(target:any,mName:any,desc:any){
        console.log(params);//aaa 方法参数
        console.log(target);//当前类
        console.log(mName);//getdata方法名
        console.log(desc);//描述信息 desc.value就是当前方法可以用于修改方法
        //扩展属性
        target.name='张三'
        target.Fn=function(){
            console.log(111)
        }
    }
}
@logClass(12345)
class HttpClient {
    @shuxing('属性参数')
    public apiUrl:string|undefined;
    constructor() {
        // this.apiUrl='我是构造函数里面的apiurl'
    }
     @logMethod('aaa')
    getData(){
        console.log(this.apiUrl);//属性参数
    }
    a(){

    }
}
var http=new HttpClient();
http.getData()
console.log(http.name); //张三
console.log(http.Fn);//fn扩展方法

 

 代码冗余
 泛型：函数名< T >(value:T):T{}
 
 
 

 
 不能这样，万一传入的是数字就出错，所以只能传入什么返回什么。
 
泛型类 解决类的复用。
 

 
 
 
 
深入泛型类
 
 

 
 

 若是不加上类CC作为规范，传入其他值也可以。
 
 定义A类泛型，并且把类作为传入参数的规范，就可以实现类的复用。
 
泛型接口
 
普通函数接口
 
 
 接口泛型加上函数也要定义
 第二种
 
 相当于不把接口给函数B，而是在声明C的时候用泛型接口A规范其里面的写法。

泛型
 
在定义函数、接口或者类的时候、不需要先指定具体类型、而在用的时候再指定类型的一种特性。
 其实就是把类也当作变量（类是可变的，未知的）使用，把类放在<>尖括号内，表示声名的类型。
 
定义 function 函数名<类型变量声明>(length: number, value: 类型变量): Array<类型变量> {}
如：
 function 函数名(length: number, value: T): Array {}；其中T就是类型的变量名；调用 函数名(参数) //给变量T赋值为string。
 
1、函数里使用泛型
 
function fun<T>(a:number,b:T):any{
    return a+"----"+b
}
let demo1=fun<string>(8,"哈哈")
console.log(demo1)//8----哈哈
 
2、类里面使用泛型
 
class Person1<T,S>{
    name:T;
    sex:S;
    age:number
    constructor(name,sex,age){
        this.name=name;
        this.sex=sex;
        this.age=age;
    }
}
let demo2=new Person1<string,number>("张三","name",18)
console.log(demo2)//Person1 {name: "张三", sex: "男", age: 18}
 
注意看与上面不同的地方
 
class Person1<T,S>{
    name:T;
    sex:S;
    age:number
    constructor(name:T,sex,age:number){
        this.name=name;
        this.sex=sex;
        this.age=age;
    }
}
let demo2=new Person1<string,number>("张三","男",18)
console.log(demo2)//Person1 {name: "张三", sex: "男", age: 18}