一文大白话讲清楚typescript接口interface

一文大白话讲清楚typescript接口interface

1. 啥是接口（interface）

• 接口是一系列抽象的属性和方法的声明，是属性和方法特征的集合。这些方法和属性都是抽象的，但不提供创建对应对象实例的方法。
• 这嘎嘎嘎讲了一顿，一头雾水
• 大白话讲一下
• 接口，就是定义了我定定义了我里面有什么属性，然后属性是什么类型的，如果你想把我当成变量的类型去创建变量，那你一定要有这个属性，而且属性的值必须是我规定的类型

interface Person{name:string,age:number
}
let p:Person={name:'tom',age:12
}
console.log(p)//{ name: 'tom', age: 12 }

• 或者我们定义一个方法，传入一个Person对象User，然后返回对象的name

interface Person{name:string,age:number
}
function sayName(User:Person):string{return User.name;
}
let p:Person={name:'tom',age:12
}
console.log(sayName(p))//tom

2. 属性的限制

2.1 限制属性可选

• 设置属性可选，如果属性设置为可选，则可以传入对应的类型变量或者不传，即undefined

interface Person{name:string,age:number,height?:number
}
let p:Person={name:'tom',age:12,height:15
}
let p2:Person={name:'tom',age:12,
}

2.2 设置属性只读

• 可以设置属性为只读，不允许赋值操作

interface Person{name:string,age:number,height?:number,readonly job:string
}
let p:Person={name:'tom',age:12,height:15,job:'boss'
}
p.job='new boss'//Cannot assign to 'job' because it is a read-only property.

3. 接口继承

• 就是把别人的东西继承到你自己身上，让你不仅有自己的属性，还有被人的属性
• 可以继承一个，也可以继承多个接口，用逗号隔开
• -类比交叉类型

interface Leader{job:string
}
interface Workere{salary:string
}
interface  Person extends Leader,Workere{name:string
}
let p:Person={name:'tom',job:'boss',salary:'tom'
}
console.log(p)//{ name: 'tom', job: 'boss', salary: 'tom' }

4. 应用场景

• 验证登录

interface Login{phone:number,password:string,login(phone:number,password:string):boolean
}
let login={phone:12453678912,password:'hdj@484',login(phone,password){return true}
}
console.log(login.login)