在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
接上篇。 1 /*---------------------------------0.引子-----------------------------------*/ 2 /*现在很多语言里也有泛型的概念,也没啥好说的,简单的例子一个,主要就是看泛型在ts中的写法*/ 3 function getInfo<T>(params: T): T { 4 return params; 5 } 6 //调用泛型方法 7 let output_str = getInfo<string>("str"); 8 //简单的写法:而且ts的编译器能够自动帮我们推断类型 9 let output_num = getInfo(100); 10 /*--------------------------------------------------------------------------*/ 11 12 /*--------------------------------1.泛型参数---------------------------------*/ 13 //方法参数使用泛型,类型是指定类型的数组 14 function getMax<T>(arr: Array<T>): T { 15 let max = arr[0]; 16 arr.forEach(item => { 17 if (item > max) { 18 max = item; 19 } 20 }); 21 return max; 22 } 23 let numArr: Array<number> = [2, 3, 44, 1, 9, 10]; 24 let numStr: Array<string> = ['c', 'd', 'a', 'A']; 25 26 console.log(getMax(numArr)); //44 27 console.log(getMax(numStr)); //d 28 /*--------------------------------------------------------------------------*/ 29 30 /*--------------------------------2.泛型接口----------------------------------*/ 31 //在ts中就不要使用I做为接口名前缀了,这不是人家的规范 32 interface GetMinFn { 33 <T>(arg: Array<T>): T 34 } 35 /* 其实我更喜欢这么写 36 interface GetMin<T> { 37 (arg: Array<T>): T 38 } 39 */ 40 41 //写一个方法 42 function getMin<T>(arr: Array<T>): T { 43 let min = arr[0]; 44 arr.forEach(item => { 45 if (item < min) { 46 min = item; 47 } 48 }); 49 return min; 50 } 51 //用接口来接方法 52 let myGetMinFunction: GetMinFn = getMin; 53 console.log(myGetMinFunction(numArr)); //1 54 /*--------------------------------------------------------------------------*/ 55 56 /*--------------------------------3.泛型类-----------------------------------*/ 57 //跟泛型接口大差不差 58 class MySort<T>{ 59 private dataCollection: Array<T> = new Array<T>(); 60 61 constructor(arr?: Array<T>) { 62 if (arr) { 63 this.dataCollection = arr; 64 } 65 } 66 67 add(data: T): void { 68 this.dataCollection.push(data); 69 } 70 71 min(): T { 72 return getMin<T>(this.dataCollection); 73 } 74 75 max(): T { 76 return getMax<T>(this.dataCollection); 77 } 78 } 79 //实例化泛型类,需要传入类型参数 80 let numberSortObj = new MySort<number>(numArr); 81 let stringSortObj = new MySort<string>(numStr); 82 83 console.log(numberSortObj.min()); //1 84 console.log(numberSortObj.max()); //44 85 console.log(stringSortObj.min()); //A 86 console.log(stringSortObj.max()); //d 87 /*--------------------------------------------------------------------------*/ 88 89 /*--------------------------------4.泛型约束---------------------------------*/ 90 //就是T代表的类型不是所有类型都可以的,需要满足一定的条件,这个条件就称为“泛型约束” 91 //比如下面的函数,想获取传入的变量的长度,但是不是所有的类型都有“长度”这个属性的 92 // function getLength<T>(arg: T): T { 93 // console.log(arg.length); // Error: T一定就有".length"这个属性 94 // return arg; 95 // } 96 97 interface Lengthwise { 98 length: number; 99 } 100 //传入的参数必须满足接口 Lengthwise 的约束,约束就是必须有一个名为length的属性,并且返回 101 //值是number类型 102 function getLength<T extends Lengthwise>(arg: T): T { 103 console.log(arg.length); // OK 104 return arg; 105 } 106 107 //现在这个泛型方法传入的参数类型就得到了约束 108 //getLength(3); //Error:Argument of type '3' is not assignable to parameter 109 //of type 'Lengthwise'. 110 getLength([1, 2, 3, 4, 5]); //5 111 getLength({ length: 10, value: 3 }); //10 112 113 /*--------------------------------------------------------------------------*/ TypeSrcipt 类型兼容性1 //类型兼容性的话我们在其他语言(C#或者Java)中也都接触过,举几个典型例子 2 3 /********************************1. “接口”接收“类”*******************************/ 4 interface Named { 5 name: string; 6 } 7 8 class People { 9 name: string; 10 constructor(n: string) { 11 this.name = n; 12 } 13 } 14 15 let p: Named = new People("sherlock"); 16 17 //****2. "接口"接收对象,只要包含name属性即可,编译器检查的过程是递归进行的,检查每个成员及子成员。**** 18 //****所以说TypeScript是结构性的类型系统,咱对比两个类型是否相同就看你的内部结构是否一样************* 19 let alice: Named; 20 let aliceProfile = { name: 'Alice', location: 'Seattle' }; 21 //变量aliceProfile中包含name属性 22 alice = aliceProfile; 23 24 //********************************3. 同上,方法参数也可以是接口******************************** 25 function sayHello(n: Named) { 26 console.log('Hello, i am ', n.name); 27 } 28 sayHello(aliceProfile); 29 30 //********4. 比较两个函数,强类型语言中很少有这样的写法,但是在js中函数也是一种特殊对象,**************** 31 //********这样就好理解了,你可以对比到子类型和父类型 32 let a = (a: number) => 0; 33 let b = (b: number, s: string) => 0; 34 35 a = b; // 报错 36 b = a; // OK 37 38 let c = () => ({ name: 'Alice' }); 39 let d = () => ({ name: 'Alice', location: 'Seattle' }); 40 41 c = d; // OK 42 d = c; // 报错, 系统强制源函数的返回值类型必须是目标函数返回值类型的子类型 43 44 45 //********************************5. 不同的枚举类型之间是不兼容的******************************** 46 enum Status { Ready, Waiting }; 47 enum Color { Red, Blue, Green }; 48 49 let s = Status.Ready; 50 s = Color.Green; // Error 51 52 //********6. 比较两个类类型的对象时,只有实例的成员会被比较。 静态成员和构造函数不在比较的范围内*********** 53 //********并且变量的可访问等级也要是相同的 54 class Beauty { 55 eyes: number = 2; 56 constructor(name: string, height: number) { } 57 } 58 59 class Ugly { 60 eyes: number = 2; 61 constructor(height: number) { } 62 } 63 64 let jack: Beauty = new Beauty("jack", 190); 65 let jordan: Ugly = new Ugly(140); 66 67 jack = jordan; // OK 68 jordan = jack; // OK 69 70 //********************************7. 再看一下泛型********************************************* 71 interface Empty<T> { 72 } 73 74 let eNum: Empty<number>; 75 let eStr: Empty<string>; 76 77 eNum = eStr; // OK, 因为Empty<T>这个接口中的“结构”都是空的,所以这两个就是兼容的 78 79 interface NotEmpty<T> { 80 data: T; 81 } 82 let neNum: NotEmpty<number>; 83 let neStr: NotEmpty<string>; 84 85 neNum = neStr; // Error, 这种情况下两个对象中的“结构”一个是number型一个是string,就不同了
|
请发表评论