前端 TS 语法继承多态修饰符 readonly 抽象类 ts 基本写法可选剩余参数函数重载接口类（3）

继承

继承之间的叫法
A类继承了B类，那么A类叫做子类，B类叫成基类
子类 ---》派生类
基类 ---》超类（父类）

// 继承之间的叫法
// A类继承了B类，那么A类叫做子类，B类叫成基类
// 子类 ---》派生类
// 基类 ---》超类（父类）

(() => {
    // 定义属性
    class Person {
        name: string
        age: number
        gender: string
        constructor(name: string,age:number,gender:string){
            this.name = name
            this.age = age
            this.gender = gender
        }

        // 定义实例方法
        sayHi(str:string){
            // ${str} 代表你是谁
            console.log(`我是：${this.name},${str}`)
        }
    }
    // 定义类 继承person
    class Student extends Person{
        constructor(name: string,age:number,gender:string){
            super(name , age, gender)
        }
        sayHi() {
            console.log('wos')
            super.sayHi('jjjj')
        }
    }
    const person = new Person('da',89,'a')
    person.sayHi('kkk')
    const stu = new Student('sss',98,'jjj')
    stu.sayHi()
})()

多态

多态：父类型的引用指向子类型的对象，不同类型的对象针对相同的方法，产生不同的行为

// 多态  ： 父类型的引用指向子类型的对象，不同类型的对象针对相同的方法，产生不同的行为
(() => {
    // 定义一个父类
    class Animak {
        // 定义属性
        name: string
        // 定义一个构造函数
        constructor(name: string) {
            // 进行赋值
            this.name = name
        }
        // 实例方法
        run(distance: number = 0) {
            // this.name  是每个类的名字
            console.log(`跑了${distance} 米`, this.name)
        }
    }

    // 定义一个子类
    class Dog extends Animak {
        // 定义构造函数
        constructor(name: string) {
            // 调用父类的构造函数，实现子类种属性的初始化操作，
            // 换句话说 继承了父类的属性  但是把原有的name换成自己的name
            super(name)
        }
        // 实例方法
        run(distance: number = 7) {
            console.log(`跑了${distance} 米`, this.name)
        }
    }

    // 定义一个子类
    class Pig extends Animak {
        constructor(name: string) {
            super(name)
        }
        run(distance: number = 40) {
            console.log(`跑了${distance} 米`, this.name)
        }
    }

    // 实例化父类对象
    const ani: Animak = new Animak('动物')
    // 实现run方法
    ani.run()

    // 实例化子类对象
    const dog: Dog = new Dog('大黄')
    // 实现run方法
    dog.run()

    // 实例化子类对象
    const pig: Pig = new Pig('八戒')
    // 实现run方法
    pig.run()

    console.log('====================================')

    // 实例化子类对象  他是通过继承父类的 进行实例化
    const dog1: Animak = new Dog('小黄')
    // 实现run方法
    dog1.run()

    // 实例化子类对象  他是通过继承父类的 进行实例化
    const pig1: Animak = new Pig('小猪')
    // 实现run方法
    pig1.run()

    console.log('====================================')
    // 该函数需要的参数Animak类型的
    function showRun(ani: Animak) {
        // 实现run方法
        ani.run()
    }
    // 实例化
    const dog2: Animak = new Dog('oo黄')
    // 实现run方法
    showRun(dog2)
    showRun(pig1)
    //都是继承父类的属性，在子类进行运行的，然后分别实现了子类的run方法
})()

修饰符

修饰符主要描述类中的成员（属性，构造函数，方法）可访问性

类中的成员都有自己的默认的访问修饰符

public 默认修饰符代表公共任何位置都可以访问

private 私有的修饰符号类成员如果使用private来修饰，那么外部将无法访问内部数据，子类也无法访问数据

protected 受保护修饰符那么外部无法访问这个成员数据的，当然子类也可以访问


// // 修饰符 主要描述类中的成员（属性，构造函数，方法）可访问性
// // 类中的成员都有自己的默认的访问修饰符
// //  public  默认修饰符  代表公共任何位置都可以访问
// // private 私有的修饰符号  类成员如果使用private来修饰，那么外部将无法访问内部数据，子类也无法访问数据
// // protected 受保护修饰符 那么外部无法访问这个成员数据的，当然子类也可以访问
(()=>{
    // // 定义类
    // class Person{
    //     // 定义属性
    //    public name : string
    //     // 、定义构造函数 
    //    public constructor(name:string){
    //         // 更新属性
    //         this.name = name
    //     }
    //     // 定义方法
    //    public eat(){
    //         // 输出  this.name  当前名字
    //         console.log('输出',this.name)
    //     }
    // }
    // // 实例化
    // const per = new Person('大蛇丸')
    // // 输出per。name
    // console.log(per.name)
    // // 输出 per.eat
    // per.eat()
    // ------------------------------------------
        // 定义类
        class Person{

            // 定义属性
           protected name : string
            // 、定义构造函数 
           public constructor(name:string){
                // 更新属性
                this.name = name
            }
            // 定义方法
           public eat(){
                // 输出  this.name  当前名字
                console.log('输出',this.name)
            }
        }

        // 定义子类
        class Student extends Person{
            constructor(name:string){
                super(name)
            }
            play(){
                console.log('woxh',this.name)
            }
        }



        // 实例化
        const per = new Person('大蛇丸')
        // 输出per。name
        // console.log(per.name)
        // 输出 per.eat
        per.eat()
        const stu = new Student('hod')
        stu.play()
})()

readonly

readonly修饰符修饰后该成员的值就不可以被外部随意修改


// readonly修饰符 修饰后 该成员的值 就不可以被外部随意修改
(()=>{
    // // 定义类
    // class Person{
    //    readonly  name:string
    //     // 定义构造函数
    //     constructor(name:string){
    //         // 更新变量
    //         this.name = name
    //     }
    //     // 方法
    //     sayHi(){
    //         // 输出
    //         console.log("你好",this.name)
    //     }
    // }
    // // 实例化
    // const person:Person = new Person('小甜甜')
    // // 修改内容
    // // person.name = '大甜甜'  //readonly  不可以外部修改
    // // 打印person
    // console.log(person)
    // // 打印name
    // console.log(person.name)
    // --------------------------------------------------------
    class Person{
        // 构造函数中的name，一旦使用readonly进行修饰，
        // 那么person中就有name的属性成员，外部也是无法修改的name属性成员值

        // constructor(private name:string ='大甜甜'){
        //     this.name = name
        // }

        constructor(readonly name:string ='大甜甜'){
            this.name = name
        }

        // constructor(protected name:string ='大甜甜'){
        //     this.name = name
        // }

    }
    const person :Person = new Person('小甜甜')
    console.log(person)
    // person.name = '佐助'  readonly  不可以外部修改
    console.log(person.name)

})()

抽象类

抽象类：包含抽象方法(抽象方法一般没有任何的具体内容的实现)，
也可以包含实例方法，抽象类是不能实例化，为了让子类实例化，实现内部抽象的方法

abstract 抽象类定义之后，没有具体的方法所以没有办法打印
但是可以通过派生类（子类）进行继承来达到效果在进行打印
也可以在定义属性的时候定义默认值例子： name: string= 'xiaohuang'

// // 抽象类 ：包含抽象方法(抽象方法一般没有任何的具体内容的实现)，
// // 也可以包含实例方法，抽象类是不能实例化，为了让子类实例化，实现内部抽象的方法

// // abstract  抽象类  定义之后，没有具体的方法  所以没有办法打印
// // 但是可以通过派生类（子类）进行继承来达到效果 在进行打印
// // 也可以在定义属性的时候定义默认值  例子：  name: string= 'xiaohuang'
(()=>{
    // 定义抽象类
    abstract class Animak{
        // 定义抽象类 的属性
        abstract name :string
        // 定义抽象类的方法
        abstract eat()
        // 定义普通方法
        sayHi(){
            console.log('ninhao')
        }
    }
    // 定义派生类 （子类）
    class Dog extends Animak{
        // 继承父类的属性  并添加了默认值（ name: string= 'xiaohuang'）
        name: string= 'xiaohuang'
        // 继承父类的eat()方法 输出
        eat() {
            console.log('chi')
        }
    }
    // 实例化
    const dog :Dog = new Dog()
    // 派生类输出eat()方法
    dog.eat()

    // 调用的是抽象类中的实例化方法
    // 派生类输出父类的sayhi方法
    dog.sayHi()
    // 输出dog,name
    console.log(dog.name)

})()

ts 基本写法

// 可以把function 放在前边也可以放在后边，的书写方式

// function 放前边需要实例化才行

// function 放后边直接输出附带值就可以

// ：string 代表的是返回值是什么类型的

(() => {

    // ts书写方法  字符串
    function add(x:string,y:string):string{
        return x+y
    }
    const res :string = add('11','22')
    console.log(res,' ts书写方法  字符串')
// ==========================================================
    // // ts书写方法  数字方法一
     function add1(x:number,y:number):number{
        return x+y
    }
    const res1 :number = add1(8,77)
    console.log(res1,'ts书写方法  数字方法一')
// ==========================================================

    //  // ts书写方法  数字方法二
    const add2=function(x:number,y:number):number{
        return x+y
    }
    console.log(add2(99,8),' ts书写方法  数字方法二')
})()

可选

// 可选参数和默认参数

// ？表示可选参数可以写也可以不写默认值

// firstName :string='东方' 默认参数

(()=>{
   //定义属性
    const getFullName = function (firstName :string='东方',lastName?:string):string{
        // 判断
        if(lastName){
            return firstName+ lastName
        }else{
            return firstName
        }
    }

    console.log(getFullName)
    console.log(getFullName('hzhsha'))
    console.log(getFullName('hzhsha','hdh'))
})()

剩余参数

剩余的参数

...args: string[] 代表剩下的所有参数的属性都是str的类型

如果有两个或者属性，从第0开始计算，抛去已有的属性，剩下的才是。。。args

(() => {
    function showRun(str: string,...args: string[]) {
        // 有多余的属性
    // function showRun(str: string, str2: string,...args: string[]) {
        console.log(str)  // a 
        // console.log(str2)  // e
        console.log(args) // ['e', 'eee', 'e', 'eee']
    }
    showRun('a', 'e', 'eee', 'e', 'eee')

})()

函数重载

定义一个函数的时候,可能会遇见定义同名字的函数写这个时候就是函数重载了

(() => {
    // 函数重载   (名称相同了)
    function add (x:string,y:string):string
    function add (x:number,y:number):number

    function add(x:string|number,y:string|number):string|number {
        if(typeof x==='string'&& typeof y==='string'){
            return x+y
        }else if (typeof x==='number'&& typeof y==='number'){
            return x+y
        }
        return 'll' //因为报错缺少return  
    }

        console.log(add('主管', '不知道'))
        console.log(add(1022, 44))
        // console.log(add("1022", 44))

})()

接口

interface 定义接口

(()=>{
    // 定义一个默认接口
    interface IPerson{
        firstName :string //姓氏
        lastName : string //名字
    }
    // 输出姓名  (引用默认接口添加新的名称)
    function showFullName (person:IPerson){
        return person.firstName + "_"+ person.lastName
    }

    const person ={
        firstName :'懂法',
        lastName:'不到'
    }

    console.log(showFullName(person))

})()

类的样式

(() => {
    // 定义接口
    interface IPerson {
        firstName: string
        lastName: string
    }
    // 定义类型  这些就相当于默认值 谁都可以用
    class Person {
        // 、定义公共字段
        firstName: string
        lastName: string
        fullName: string
        // 定义构造器函数
        constructor(firstName: string, lastName: string) {
            // 更新数据值
            this.firstName = firstName
            this.lastName = lastName
            this.fullName = this.firstName+'-'+this.lastName
        }
    }
    // 从新定义函数 然后返回自己想要的类型 
    //可以从新定义一个函数  然后继承上边的接口类型
    function showFullName (person:IPerson){
        return person.firstName + '-' +person.lastName
    }
    // 实例化对象
    const person = new Person('诸葛','大壮')
    console.log(showFullName(person))

})()

元组

一旦定义了数组类型就必须用指定的类型用其他类型报错

let arr1 :number[] = [10,29,394,45]
console.log(arr1)  //[10, 29, 394, 45]

// 数组定义方式2
let arr2 :Array<number> = [10,29,394,45]
console.log(arr2)   //[10, 29, 394, 45]

// 元组
// 就是按照属性的数据 进行后边数据的类型进行对应  
let arr3 :[string,number,boolean] = ['天',2,true]
console.log(arr3)  //['天', 2, true]

枚举

// // // enum 枚举的意思 枚举就是按照顺序输出 也可以获取索引值
enum Color {
    red = 5,
    green,
    blue
}
console.log(Color[1])  //red
console.log(Color.red)  //5

any

any类型如果不确定当前类型的时候我们可以使用any类型

// // any类型  如果不确定当前类型的时候我们可以使用any类型
let str :any = 111114
console.log(str)  //111114

let str1 :any = "111114"
console.log(str1)  //"111114"

void类型

// // 表示没有返回值  没有return
function showRun():void{
    console.log('简单是') //"简单是"
}
console.log(showRun())   //undefined

联合数据

function getObj(str:number|string):number{
    // 获取数字长度
    return str.toString().length
}
    console.log(getObj("22211111111111111")) //17

// // 就是可以在里边定义多个属性   返回字符串 
function getObja(str: number | string): string {
    //转换成字符串 
    return str.toString()
}
console.log(getObja("22211111111111111")) //22211111111111111

断言

类型断言也可以获取数字的长度
（就是告诉编辑器我知道自己在干啥）
断言方式1 (<string>str)

// // 类型断言  也可以获取数字的长度   
// // （就是告诉编辑器我知道自己在干啥）
// // 断言方式1 (<string>str)
function getStra(str:number|string):number{
    if((<string>str).length){
        return (<string>str).length
    }else{
        return str.toString().length
    }
}
console.log(getStra('22222')) //5
console.log('----------------------------')


// 断言方式2  (str as string)
function getStr(str:number|string):number{
    if((<string>str).length){
        return (str as string).length
    }else{
        return str.toString().length
    }
}
console.log(getStr('2222222')) //7

set get 去值器

(()=>{
// 有报错  但是不影响输出
    class Person{
        firstName :string
        lastName : string
        constructor(firstName:string,lastName:string){
            this.firstName = firstName
            this.lastName = lastName
        }
        get fullName(){
            return this.firstName + '-' + this.lastName
        }
        set fullName(val){
            let name = val.split('_')
            this.firstName = name[0]
            this.lastName = name[1]

        }
    }

    const person : Person = new Person('东方' , '大壮')
    console.log(person)  //Person {firstName: '东方', lastName: '大壮'}
    console.log(person.fullName)  //东方-大壮
    person.fullName = "诸葛_大壮"  //firstName: "诸葛"  lastName: "大壮"

})()

静态资源

静态资源无法正常通过方法进行访问


(()=>{

    // class Person {
    //     name : string
    //     age : string
    //     constructor(name:string ,age :string){
    //         this.name = name
    //         this.age = age 
    //     }
    //     sayHi(){
    //         console.log('萨瓦迪卡')
    //     }
    // }
    // const person : Person = new Person('xiao','jjdl')
    // console.log(person.name)  //xiao
    // console.log(person.age)   //jjdl
    // person.sayHi() //萨瓦迪卡


//     // --------------------------------
// // 静态资源无法正常通过方法进行访问
// // static  静态资源
    class Person{
        static name1:string = '天'
        constructor(){

        }
        static sayHi(){
            console.log('萨瓦迪卡')
        }
    }
    console.log(Person.name1) //天
    Person.name1 = '做主'
    console.log(Person.name1) //做主
})()

函数类型

通过接口的方式作为函数的类型使用、

(()=>{
    // 定义接口
    interface ISearchFunc {
        // 定义接口值类型
        (source : string , subString : string) : boolean
    }

    // 创建函数  类型是上边的接口
    const searchString : ISearchFunc = function (source : string , subString : string) : boolean{
        // 返回的source字符串中查找subString 这个字符串有没有字  
            //  有就是true  没有就是false
        return source.search(subString) > -1
    }
    // 有就是true  没有就是false
    console.log(searchString('哈哈，年度十大' , '你')) //false
    console.log(searchString('哈哈，年度十大' , '大')) //true
})()