浅聊一下

在上篇文章中，我们已经讨论了在TS中的一些基础数据类型和变量声明，本文中将继续为大家带来TS接口的内容...

在金三银四的尾巴上了车，如果你也和我一样也想在大三找一份还不错的实习，欢迎掘友们私聊我交流面经（wechat: LongLBond）

接口

我们为什么需要接口？来看下面的例子：

function a(user){
    console.log(user.age);
}

我希望限制user的传入类型，要传入的user要包括age和name属性,但是在基础类型中我们没法使用一种类型来描述这个参数，所以我们要使用接口来解决这个问题

interface User{
    name:string;
    age:number;
}

function a(user:User){
    console.log(user.age);
};

const user: User = {
    name:'juejue',
    age:18
};

a(user)

注意，定义的user必须具有User接口的所有属性

可选属性

在上面我们说到，定义的user必须要具有User接口的所有属性，那么如果我想让其中的某个属性是可选的呢？比如一个人，他一定会有性别、年龄、名字，但是他不一定有车对吧...

interface People {
    name: string;
    age: number; 
    car?: string; // 可选属性
}

用?拼接在属性后面，此时car属性就是一个可选属性了

只读属性

有些接口的属性是永恒不变的，我们不希望改变这个属性的值，那么我们该如何定义这个属性？

interface People {
    name: string;
    age: number; 
    car?: string; // 可选属性
    readonly ID:number
}

const people: People = {
    name: 'juejue',
    age: 18,
    ID: 1234567890
}

我们可以使用readonly来修饰这个属性,当我们尝试对其进行改变时

函数类型

如果我们要在接口中定义一个函数类型的属性，该如何是好？

• 第一种方法

我们可以直接在接口中描述函数类型，传入一个string类型的参数,返回值也为string类型

interface People {
    name: string;
    age: number; 
    car?: string; // 可选属性
    readonly ID:number,
    say:(words:string) => string//在接口内部描述函数
}

const people: People = {
    name: 'juejue',
    age: 18,
    ID: 1234567890,
    say: function(words: string){
        return words;
    }
}

• 第二种方法

使用接口来描述函数类型

interface People {
    name: string;
    age: number; 
    car?: string; // 可选属性
    readonly ID:number,
    say:(words:string) => string//在接口内部描述函数
    run: Run;
}
interface Run {
    (speed: number): number;//直接使用接口来描述函数类型
}
const people: People = {
    name: 'juejue',
    age: 18,
    ID: 1234567890,
    say: function(words: string){
        return words;
    },
    run: function(speed){
        return speed;
    }
}

属性检查

当我们给一个函数传入参数时，会被“检查”，如果传入的参数存在任何“目标类型”不包含的属性时就会报错

interface Student {
    name: string;
    phone?: string;
}

function creatStudent(student: Student): { ID: string }{
    let id = ''
    if(student.name){
        id = student.name + '1234567890'
    }
    return {
        ID: id
    }
}

creatStudent({name:'juejue',car:'bmw'})

很明显，car属性在Student接口中并不存在

可索引类型

当某个属性包含多个不确定类型值的时候，我们可以使用可索引类型表示，可索引类型具有一个索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。

如何改变代码让它不再报错？

interface Student {
    name: string;
    phone?: string;
    [x: string]: any//代表可能还有一个any类型的属性，string是索引x的类型
}

function creatStudent(student: Student): { ID: string }{
    let id = ''
    if(student.name){
        id = student.name + '1234567890'
    }
    return {
        ID: id
    }
}

creatStudent({name:'juejue',car: 'BMW'})

我发现在接口中虽然只定义了一个可索引类型的属性，但是在传入参数的时候可以传入多个符合类型的参数

继承接口

接口是可以继承的，并且一个接口可以继承多个接口，在TypeScript中，接口继承是一种机制，允许我们创建一个新接口，继承另一个接口的所有属性和方法。这使得我们可以复用代码，避免重复定义相同的接口。

当一个接口继承另一个接口时，子接口必须包含父接口的所有属性和方法。这确保了子接口与父接口兼容，并且可以替代父接口使用

interface sports {
    run:(name:string) => void;
}

interface todo {
    cook: (name:string) => void;
}
interface Students extends sports, todo {
    name: string;
    age: number;
}

let st: Students = {
    name:'juejue',
    age: 18,
    run: (name) => {
        console.log(name + ' is running...');
    },
    cook: (name) => {
        console.log(name + ' is cooking...');
    }
}

st.run(st.name);
st.cook(st.name);

结果：

结尾

没想到，一个小小的接口中居然有这么多知识点...还得继续深造