TypeScript,接口(Interfaces),对象数组和函数的类型
接口(Interfaces)
在面向对象语言中,接口(Interfaces)是一个很重要的概念,它是对行为的抽象,具体如何行动需要由类(classes)去实现(implement)。
对象的类型
TypeScript 使用接口(Interfaces)来定义对象的类型。TypeScript中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。
数组的类型
1、最简单的方法是使用「类型 + 方括号」来表示数组;2、使用数组泛型(Array Generic) Array 来表示数组;3、用接口(可索引接口)来描述数组,。
函数的类型
JavaScript中,有两种常见的定义函数的方式:函数声明(Function Declaration)和函数表达式(Function Expression)。
1、函数声明(Function Declaration);2、函数表达式(Function Expression);3、用接口定义函数的形状;4、函数的可选参数;5、参数默认值;6、函数的剩余参数;7、函数的重载。代码案例
1、案例1 interface User { readonly id: number; // 只读属性 name: string; age: number; address?: string; // ?可选属性 [propName: string]: any; // 定义了任意属性取 string 类型的值 } let user: User = { id: 10001, name: "小奋斗", age: 32 } // user.id=20001; // 无法分配到 "id" ,因为它是只读属性。 console.log("user=", user); let user2: User = { id: 10002, name: "IT小奋斗", age: 32, address: "山西省太原市" } console.log("user2=", user2); let user3: User = { id: 10003, name: "IT小奋斗", age: 32, mobile: "15303511234" } console.log("user3=", user3); let user4: User = { id: 10004, name: "IT小奋斗", age: 32, mobile2: "15303511234" } console.log("user4=", user4);
输出:user= { id: 10001, name: "小奋斗", age: 32 } user2= { id: 10002, name: "IT小奋斗", age: 32, address: "山西省太原市" } user3= { id: 10003, name: "IT小奋斗", age: 32, mobile: "15303511234" } user4= { id: 10004, name: "IT小奋斗", age: 32, mobile2: "15303511234" }
2、案例2 // 「类型 + 方括号」表示法 let array1: number[] = [1, 1, 2, 3, 4]; console.log("array1=", array1); // 数组泛型(Array Generic) Array 来表示数组 let array2: Array = [1, 1, 2, 3, 4]; console.log("array2=", array2); // 用接口表示数组 interface NumberArray { // 定义索引key为number类型,索引值为number类型 [index: number]: number; } let array3: NumberArray = [1, 1, 2, 3, 4]; console.log("array3=", array3); function sum(params:number[]) { let args: { [index: number]: number; length: number; callee: Function; } = arguments; return args; } let array4:number[] = [1, 1, 2, 3, 4]; console.log("sum=", sum(array4)); // any类型 let list: any[] = ["小奋斗", 32, { website: "http://www.what21.com" }]; console.log(list);
输出:array1= [ 1, 1, 2, 3, 4 ] array2= [ 1, 1, 2, 3, 4 ] array3= [ 1, 1, 2, 3, 4 ] sum= [Arguments] { "0": [ 1, 1, 2, 3, 4 ] } [ "小奋斗", 32, { website: "http://www.what21.com" } ]
3、案例3 // 函数声明(Function Declaration) function mySum1(x: number, y: number): number { return x + y; } console.log("mySum1=", mySum1(3, 5)); // 函数表达式(Function Expression) let mySum2 = function (x: number, y: number): number { return x + y; }; console.log("mySum2=", mySum2(3, 5)); // 用接口定义函数的形状 interface SumFunc { (x: number, y: number): number; } let mySum3: SumFunc = function (x: number, y: number) { return x + y; } console.log("mySum3=", mySum3(3, 5)); let mySum4: SumFunc; mySum4 = function (x: number, y: number) { return x + y; } console.log("mySum4=", mySum4(3, 5)); // 函数的可选参数 function buildName(firstName: string, lastName?: string) { if (lastName) { return firstName + "." + lastName; } else { return firstName; } } let tomcat = buildName("Tom", "Cat"); console.log("tomcat=", tomcat); let tom = buildName("Tom"); console.log("tom=", tom); // 参数默认值 function buildName2(firstName: string, lastName: string = "Cat") { return firstName + " " + lastName; } let tomcat2 = buildName2("Tom", "Cat"); console.log("tomcat2=", tomcat2); let tom2 = buildName2("Tom"); console.log("tom2=", tom2); // 函数的剩余参数,ES6 中,可以使用 ...rest 的方式获取函数中的剩余参数 function push(array: any[], ...items: any[]):number[] { items.forEach(function(item) { array.push(item); }); return array; } let arr:any = []; push(arr, 1, 2, 3); console.log("arr=", arr); // 重载允许一个函数接受不同数量或类型的参数时,作出不同的处理。 function reverse(x: number | string): number | string | void { if (typeof x === "number") { return Number(x.toString().split("").reverse().join("")); } else if (typeof x === "string") { return x.split("").reverse().join(""); } } let r1 = reverse(1); console.log("r1=", r1); let r2 = reverse("2"); console.log("r2=", r2);
输出:mySum1= 8 mySum2= 8 mySum3= 8 mySum4= 8 tomcat= Tom.Cat tom= Tom tomcat2= Tom Cat tom2= Tom Cat arr= [ 1, 2, 3 ] r1= 1 r2= 2