ts中定义接口（Interface）0基础教学

接口

1.定义接口

接口定义只能定义类型，不能直接赋值，要通过类似于类的实例化的方式，给其赋值。

interface Person {
  name: string;
  age: number;
}
let p1: Person = {
  name: "剑非出我心",
  age: 18,
};
console.log(p1);

2.接口中的属性

       1.可选属性

       name后面+？变成可选属性

      2.只读属性 在name （属性）前面添加readonly 不能修改

      3.使用接口定义函数数据类型

interface fn {
  (m: string): void;
}
let f1: fn = function (m): void {
  console.log("2222", m);
};
f1("100");

interface fn1{
    (m:string,n:number):string
}
let f2:fn1 = (m,n)=>{
return `${m}永远${n}`
}
console.log(f2("剑非出我心",18))

4.接口中使用函数

interface newArr{
    [name:number]:string
}
interface Say{
    ():string
}
interface women{
    name:string,
    age:number,
    say:Say,
    like:newArr
}
let liugege:women={
    name:"剑非出我心",
    age:18,
    say():string{
        return `${this.name}早上说：“hello world”`
    },
    like:["写博客","学前端"]
}
console.log(liugege)
console.log(liugege.say())

5. 使用接口定义数组数据类型

统称为可索引接口 name是固定写法

1）数组类型

interface newArr{
    [name:number]:string
}
let arr1 = ["刘","管","张"]
console.log(arr1[1])

 

2）对象类型

interface newObj{
    [name:string]:string
}
let obj = {
    name:"貂蝉",
    age:30
}
console.log(obj["name"]) 

难

接口的继承

interface me{
    name:string,
    age:number,
    say():string
}

interface honey extends me{
    love:Array<string>
    play():any
}
let Liu:honey={
    love:['打篮球','写ts'],
    play(){
        return `夜晚微醺`
    },
    name:"剑非出我心",
    age:20,
    say(){
        return `${this.name}喜欢${this.love[0]}并且对它说 hello world`
    }
}
console.log(Liu.say())

 

下篇文章将讲解类的属性，以及怎样用类去实现接口