开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

🎈大家好，我是李乐一，新人初来乍到，请多多关照~
📝小小的前端一枚，分享一些日常的学习和项目实战总结~
😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~

在上一篇文章typeScript学习（一），我们学习了typescript的基本类型，类型注解和类型推断，以及元组的使用和类型的约束，本文我将介绍接口的定义和类的使用。我们一起看看吧~

接口

接口的基本定义

📝举个栗子

// 定义接口
interface Person{
    name: string;
    age: number;
    sex: string;
    // 在属性后面加上？来表示该属性不确定是否存在
    money?: number;
}
// 定义对象
const person1= {
    name: 'leo',
    age: 18,
    sex: "男",
    money:100000
}
const person2= {
    name: 'sara',
    age: 18,
    sex: "女",
}
const screenResume = (person1: Person) => {
    // 判断两个属性的值，然后输出相应的值
    person1.age < 18 && console.log(person1.name + '未成年')
    person1.age >= 18 && console.log(person1.name + '已成年')
}

const getResume = (person2: Person) => {
    console.log(person2.name + "的年龄是" + person2.age)
    console.log(person2.name + "的性别是" + person2.sex)
    person2.money&& console.log(person2.name + "资金是" + person2.money)
}
screenResume(person1)
screenResume(giperson2)
getResume(person1)

接口的属性和方法

// 定义接口
interface Person{
    name: string;
    age: number;
    sex: number;
    money?: number;
    // 定义任何属性的方法,值使用any表示任何值
    // 表示我定义一个键名，他的类型是string，他的值是any
    [propname: string]: any;
    // 这个方法返回值必须是string
    say(): string
}
// 接口Teacher继承Person接口
interface Teacher extends Person{
    teach(): string
    teach()=>string
}

// 这个类继承了Person接口，接口约束了该类
// 表示接口有的所有必须属性和方法都必须被实现
class student implements Person{
    name:'sara'
    age: 18
    sex: "女"
    say() {
        return "老师好"
    }
}

// 这个对象是包涵了Teacher和Person所有的必须属性和方法
const student1= {
    name: 'leo',
    age: 18,
    money: 1000,
    sex: "男",
    say() {
        return "同学们好"
    },
    teach() {
        return "我教语文"
    }
}

const screenResume = (student1: Person) => {
    student1.age < 18 && console.log(student1.name + '未成年')
    student1.age >= 18 && console.log(student1.name + '已成年')
}

// 在这里 student 实现接口Teacher，所以对象student必须包涵Teacher所有的必须方法和属性，否则报错
const getResume = (student1: Person) => {
    console.log(student1.name + "性别是" + student1.sex)
    console.log(student1.name + "年龄是" + student1.age)
    student1.money && console.log(student1.name + "生活费是" + student1.money)
}
screenResume(student1)
// 调用下面这个方法时，他里面所包含的方法属性，要实现接口teacher里面所有的属性和方法
getResume(student1)

多个接口的继承

interface IB{
    name：string
}

interface IC{
    age:string
}
// 两种方式的继承
interface ID extends IB,IC{
    sex:string
}

let person:IB&IC&ID{
    
}

类

类的使用

定义一个类，有相关属性和方法

class male{
    content = "hello"
    name = 'leo,'
    sayHello() {
        return this.name + this.content
    }
}

// 定义一个类，继承一个类
class Boy extends male{
    // 重写父类的方法
    sayHello() {
        // 使用父类的方法
        return super.sayHello() + '.你好'
    }
    sayHi() {
        return this.name + 'Hi'
    }
}

const man= new male()
console.log(man.sayHello())

const boy1= new Boy ()
console.log(boy1.sayHello())
console.log(boy1.sayHi())

类的访问类型

• private 私人的，只能在自己的类里面访问
• public 公开的，可以在任何地方访问
• protected 受保护的，可以在自己的类中，或者在继承的类中访问。

class Person {
    private name: string;
    protected age: number;
    public sayHello() {
        console.log(this.name + ' say hello')
    }
}

class teacher extends Person {
    public sayHello() {
        console.log(this.age + 'say goodBay')
    }
}

类的构造函数

class Person {
    name: string;
    constructor(name: string) {
        this.name = name
    }

   // 可以简化
   // constructor(public name: string) {}
}

// 类继承类，构造函数里面要构造父类的值
class Teacher extends Person {
    constructor(public age: number, name: string) {
        super(name)
    }
}

const person = new Person('123')
console.log(person.name)

const teacher = new Teacher(18, 'sara')
console.log(teacher.name)
console.log(teacher.age)

类的get set函数 及static的使用

class Person{
    constructor(private age: number) { }
    get ages() {
        return this.age
    }
    set ages(age: number) {
        this.age = age
    }
}

const man= new Person(28)
console.log(man.ages)
// 修改年龄后
man.ages = 25
console.log(man.ages)

class Girl{
    sayLove(){
        return 'love'
    }
}

const girl =new Girl()
console.log(girl.sayLove())

// 只读属性 readonly
class Person {
    public readonly _name:string
    constructor( name: string) {
        this._name=name
     }
}
const person = new Person('japang')
// 在这里的-name属性是只读属性
person._name = '123'
console.log(person._name)

抽象类的使用

在抽象类里面，方法是不会被定义的，因为是不确定的

abstract class Man{
    abstract skill()
}

在具体继承的类中去实现抽象类的方法

class waiter extends Man{
    skill() {
        console.log('喝水吧！')
    }
}

class BaseTeacher extends Man{
    skill() {
        console.log('吃饭吧！')
    }
}

class seniorTeacher extends Man{
    skill() {
        console.log('出去玩吧！')
    }
}