在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。接口起到一个限制和规范的作用
type（类型别名）跟interface差不多
什么是接口
现实中的接口.png
接口差不多就这样，你大小宽度什么的得对应起来
在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。
interface Person {
name: string;
age: number;
}
let tom: Person = {
name: 'Tom',
age: 25
};
上面的例子中，我们定义了一个接口 Person，接着定义了一个变量 tom，它的类型是 Person。这样，我们就约束了 tom 的形状必须和接口 Person 一致。
定义的变量比接口少了一些属性是不允许的：
interface Person {
name: string;
age: number;
}
let tom: Person = {
name: 'Tom'
};
// index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'.
// Property 'age' is missing in type '{ name: string; }'.
多一些属性也是不允许的：
interface Person {
name: string;
age: number;
}
let tom: Person = {
name: 'Tom',
age: 25,
gender: 'male'
};
// index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
// Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.
可见，赋值的时候，变量的形状必须和接口的形状保持一致。
可选属性
有时我们希望不要完全匹配一个形状，那么可以用可选属性：
interface Person {
name: string;
age?: number;
}
let tom: Person = {
name: 'Tom'
};
or
let tom: Person = {
name: 'Tom',
age: 25
};
//都可
这时仍然不允许添加未定义的属性：
interface Person {
name: string;
age?: number;
}
let tom: Person = {
name: 'Tom',
age: 25,
gender: 'male'
};
// examples/playground/index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
// Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.
任意属性
有时候我们希望一个接口允许有任意的属性，可以使用如下方式：
interface Person {
name: string;
age?: number;
[propName: string]: any;
}
let tom: Person = {
name: 'Tom',
gender: 'male'
};
使用 [propName: string] 定义了任意属性取 string 类型的值。
🌰
interface FullName{
firstName:string; //⚠️：分号结束
secondName:string;
}
function printName(name:FullName){
//必须传入对象 firstName secondName
console.log(name.firstName+'--'name.secondName)
}
printName({
firstName:'赵',
second:'四',
age:20 //这个会报错，因为接口没有定义这个
})
但是 如果这样写：
let obj = {
firstName:'赵',
second:'四',
age:20
}
printName(obj) //不报错
//至于为啥，我也不造
🌰 ts封装ajax
interface Config{
type:string;
url:string;
data?:string;
dataType:string;
}
function ajax(config:Config){
let xhr = new HMLHttpRequest();
xhr.open(config.type,config.url,true);
xhr.send(config.data);
xhr.onReadyStatusChange = function(){
if(xhr.readyState === 4 && xhr.status === 200) {
console.log('success')
if(config.dataType =='JSON'){
return JSON.parse(xhr.responeseText)
} else{
return xhr.responeseText
}
}
}
}
ajax({
type:'get',
url:'http://www.xxx.com',
dataType:'json'
})
函数类型接口
对方法传入的参数已经返回值进行约束
实现一个加密的函数类型接口
interface encrypt{
(key:string,value:string):string;
}
//参数是key和value，必填。返回值是string
var md5:encrypt = function(key:string,value:string):string{
return key+value;
}
md5('name','zhangsan') //namezhangsan
var sha1:encrypt = function(key:string,value:string):string{
return value+key
}
sha1('name','zhangsan') //zhangsanname
可索引接口
对数组、对象的约束（不常用）
interface UserArr{
[index:number]:string
}
类类型接口
父定义一个标准，子实现。下面的例子，如果缺少name或者eat 就会报错。（与抽象类抽象方法类似）
interface Animal{
name:string;
eat(str:string):void;
}
class Dog implements Animal{
constructor(name:string){
this.name = name
}
eat(){
console.log(`${this.name}吃狗粮`)
}
}
let d = new Dog('小黑')
d.eat(); //小黑吃狗粮
class Cat implements Animal{
name:string;
constructor(name:string){
this.name = name
}
eat(food:string):void{
console.log(`${this.name}吃${food}`)
}
}
let c = new Cat('小猫');
c.eat('鱼') //小猫吃鱼
接口扩展（继承）
interface Animal{
eat():void
}
interface Person extends Animal{
work():void;
}
class Web implements Person{
name:string;
constructor(name:string){
this.name = name
}
eat(){
console.log(this.name+'喜欢吃棉条')
};
work(){
console.log(this.name+'敲代码')
}
}
let w = new Web('李四')
w.work(); //李四敲代码
interface Animal{
eat():void
}
interface Person extends Animal{
work():void;
}
class Programmer{
name:string;
constructor(name:string){
this.name = name
}
coding(code:string){
console.log(this.name+code)
}
}
class Web extends Programmer implements Person{
constructor(name:string){
super(name)
}
eat(){
console.log(this.name+'喜欢吃棉条')
};
work(){
console.log(this.name+'敲代码')
}
}
let w = new Web('李四')
w.work(); //李四敲代码
w.coding('写ts') //李四写ts
网友评论