Ts中的interface接口语法用法

1,192 阅读3分钟

出现再别人的生活里要像一份礼物! d34b15c6aba0b0e1931409fda95cfb7.jpg

什么是接口类型,接口interface?

.接口也是一种类型同理用来约束使用者 和number,string,boolean,enum这些数据类型一样
.是一种描述对象||函数的东西(可以理解为形状)
.一个对象需要上面样的属性
.函数需要什么参数或者返回什么样的值
.数组应该是什么样子
.一个类和继承类得符合什么样的描述
.对象接口 函数接口 可索引接口 类接口 及接口的继承 定义混合类型...

对象类型接口

interface FullName{ //需求定义一个函数输出一个人完整的名字,这个人的姓必须是字符串,名必须也是字符串 
        firstName: string;     
        lastName: string;
    }
    let obj = {
        firstName: "隔壁",
        lastName: "老王"        //如果不是string 会报错,比如lastName: 18
    }
                                //{farstName,lastName} 使用了解构赋值   
    fucntion say({firstName,lastName}:FullName):void{
        console.log(`我叫:${farstName}+${lastName}`) 
    }
    say(obj)                   //我叫:隔壁+老王

.接口一般首字母大写 I 这是tslint要求的否则报错 *可以再tslint中关闭 在rules中添加如下规则 "interface-name":[true,"never-prefix"]
.赋值的时候 变量的形状必须跟接口的形状保持一致
.注意! 接口中可定义?
.``1可选属性 2只读属性 3任意属性 让接口更加的灵活

定义接口 强约束
 interface Istate {    
        name:String,
        age:number
    }
    var obj1:Istate;
    obj1 = {name:"张三",age:10}
可选属性 存疑
interface Istate2 {
    name: string,        //普通属性 设置需要存在的普通属性 
    age?: number,        //可选属性 存疑可有可无?  注意可选属性如果没有赋值 获取到的值是undefined 
    sex?: number,        //...
    studay?():void       //可选方法 存疑可有可无?  //对于可选的方法 必须先进行判断 再调用 否则报错 
}         
var obj2: Istate2;
obj2 = {name:"张三",age:20}
obj2 = {name:"马六"}    //这里赋值时 未给age也行  
console.log(obj2.sex)   //可选属性未赋值 获取到的值为undefined 
console.log(obj2.studay)//不可以这样调用 因为可能是未定义的对象  
                        //正确的调用方法 
if(obj2.studay){obj2.studay()}                               

只读属性 (即默认情况下接口中定义的属性为可读可写的)
interface Istate {
    name: string,
readonly age: number        //只读属性 即定义初始值后 不想让它后续更改 在属性前面加上readonly关键字 
}
var obj4:istate = {name:"赵四",age:10}
obj4.name = "傻子"
obj4.age = 20           //报错 因为上面已经为只读状态了readonly 
任意类型
//属性个数不确定的时候 any必须是任意类型 
//即后续我动态插入 添加的 
interface Istate3 {
name:string|number,     //联合类型 这样的话 name可以是 字符串|数字
age?:number,            //存疑的一个age属性 给不给都可以 
[propName:string]:any   //后添加    还可以通过as或[propName: string]: any 来制定可以接受的其他额外属性
}        
var obj3:Istate3 = {name:"张三",age:10,sex:"男",isMarry:true}
接口中定义方法
//定义接口不仅仅可以有属性 也可以有方法  
  interface Ipersson {
      name: String;
      run(): void;
      eat(): void;
  }
  //如果我们有一个对象是该接口类型 那么必须包含对应的属性和方法 
  const p: Iperson = {
      name: "why",
      run(){
          console.log("这是一个方法")
      },
      eat(){
          console.log("这是一个方法too")
      }
  }

大佬请走开,如果有错误或者不严谨的地方,请留言备注,十分感谢,对作者也是一种鼓励。