TypeScript之接⼝函数
TypeScript之接⼝&函数
⼀、什么是接⼝？
在⾯向对象语⾔中，接⼝（Interfaces）是⼀个很重要的概念，它是对⾏为的抽象，⽽具体如何⾏动需要由类（classes）去实现（implements）。
TypeScript 中的接⼝是⼀个⾮常灵活的概念，除了可⽤于对类的⼀部分⾏为进⾏抽象以外，也常⽤于对「对象的形状（Shape）」进⾏描述。
⼆、接⼝的实现
// ⽤接⼝定义对象
interface List {
name: string,
age: number,  // 必选属性
job?: string, //可选属性，表⽰不是必须的参数，
readonly id: number; // readonly 只读属性
[ propName : string ] : any,  // 任意类型
}
interface Result {
data: List[]
}
function render(result: Result){
result.data.forEach(value => {
console.log(value.id, value.name)
if(value.age){
console.log(value.age)
}
// value.id ++
})
}
let result = {
data: [
{id: 1, name: 'A', age: 12, sex: 'male'},
{id: 2, name: 'B', age: 10}
]
}
render(result)
typescript 字符串转数组上⾯例⼦中的就是⼀个接⼝的实例，利⽤接⼝约束了接收变量的类型，注意，在赋值时：变量的类型必须和接⼝的形状保持⼀致。
接⼝类型有以下⼏种属性可选
必选属性 => "：" 带冒号的属性是必须存在的，不可以多也不能少
可选属性 => " ? " 表⽰有选择的选项，可有可⽆
只读属性 => " readonly " 对象的字段只在创建的时候赋值，注意哦，注意，只读的约束存在于第⼀次给对象赋值的时候，⽽不是第⼀次给只读属性赋值的时候：
任意属性 [ propName : 类型 ] : any 表⽰定义了任意属性取string 类型的值
三、可索引接⼝：数组、对象的约束（不常⽤）
1、对数组的约束
interface StringArray {
[index: number]: string;
} // ⽤任意的number去索引StringArray，最后得到的是⼀个字符串的数组
let chars: StringArray = ['A', 'B']
interface Names {
// [x: string]: string  // 字符串索引签名
[x: string]: any
// y: number
// [z: number]: string  // 数字索引签名
[z: number]: number
}
注：数字索引签名的返回值⼀定是字符串索引签名返回值的⼦类型，因为js会进⾏转换，将number转换成string，保证类型的兼容性
interface UserObj{
[index : string] : string // 讨论点：为啥⼀定是string，⽽不能是number
}
var arr : UserObj = { name : '张三' };
四、函数的定义
1、函数声明
function add1(x: number, y: string) : string {
return x + y
}
console.log('add1', add1(3, '4'))
形式和JavaScript中的函数声明⼀样，但不⼀样的是：
指定了参数的类型（因为有类型检查，所以要遵循），随后指定了返回值的类型，这个时候返回值类型可以省略，因为typescript会根据返回语句⾃动推断出返回值的类型。
参数不可多不可少，只能刚刚好，且和顺序有关。
2、函数声明的⽅式有哪些？
function add1(x: number, y: string)  {
return x + y
}
let add2: (x: number, y: number) => number
type add3 = (x: number, y: number) => number
interface add4 {
(x: number, y: number): number
}
3、函数表达式
1）左边的student的类型定义是通过赋值操作进⾏类型推论⽽推断出来的，并没有给student指定类型定义。
let student = function(x:string,y:number):string{
return `我是${x}，今年${y}岁`;
}
console.log(student("wzy",22));  // 我是wzy，今年22岁
2）如果要给student指定类型的话，应该是这样：
let student:(x:string,y:number)=>string = function(x:string,y:number):string{
return `我是${x}，今年${y}岁`;
}
console.log(student("wzy",22)); // 我是wzy，今年22岁
注：1.前后参数名称可以不⼀致
2.当没有返回值的时候使⽤void
4、定义⼀个可选参数
function add5(x : number, y ?: number){
return y ? x + y : x;
}
add5(4)
之前提到过函数的参数是不可多不可少的，但是也可以像接⼝那样的形式⽤？表⽰可选参数
注：可选参数必须位于必需参数后
5、定义默认参数
function add6(x: number, y = 0, z: number, q = 1){
return x + y + z + q
}
add6(2, undefined, 4)
注：必传参数前的默认参数必传，如果没有，⽤undefined代替
function add7(x : number, ...rest: number[]){ // 剩余参数，即不知道参数的个数
return x + duce((pre, cur) => pre + cur)
}
console.log(add7(1,2,3,4,5))
当你想同时操作多个参数或者你并不知道会有多少个参数会传进来时可以采⽤剩余参数定义
在JavaScript中，可以使⽤arguments来访问所有传⼊的参数。
在typescript⾥，可以把所有参数收集到⼀个变量⾥
注：
（1）剩余参数会被当做个数不限的可选参数，可以⼀个都没有，也可以有任意个。同样要放在必要参数后⾯。
（2）是数组类型，名字是省略号后⾯的字段名，可以在函数体内使⽤这个数组。
（3）当调⽤函数时，别传⼊数组，依次传⼊就⾏。
7、函数重载（不需要为相似函数选取不同的函数名称）
function add8(...rest: number[]) : number;
function add8(...rest: string[]) : string;
function add8(...rest: any[]) : any {
let first = rest[0];
if(typeof first === 'string'){
return rest.join('')
}
if(typeof first === 'number'){
duce((pre, cur) => pre + cur)
}
}
console.log(add8(1,2,3))
console.log(add8('2','add', 'asd'))
注：TypeScript 会优先从最前⾯的函数定义开始匹配，所以多个函数定义如果有包含关系，需要优先把精确的定义写在前⾯。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。