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

继承

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

// 继承之间的叫法
// A类继承了B类，那么A类叫做子类，B类叫成基类
// 子类 ---》派生类
// 基类 ---》超类（父类）(() => {// 定义属性class Person {name: stringage: numbergender: stringconstructor(name: string,age:number,gender:string){this.name = namethis.age = agethis.gender = gender}// 定义实例方法sayHi(str:string){// ${str} 代表你是谁console.log(`我是：${this.name},${str}`)}}// 定义类 继承personclass 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换成自己的namesuper(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.eatper.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,nameconsole.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)  // econsole.log(args) // ['e', 'eee', 'e', 'eee']}showRun('a', 'e', 'eee', 'e', 'eee')})()

函数重载

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

(() => {// 函数重载   (名称相同了)function add (x:string,y:string):stringfunction add (x:number,y:number):numberfunction 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: stringlastName: string}// 定义类型  这些就相当于默认值 谁都可以用class Person {// 、定义公共字段firstName: stringlastName: stringfullName: string// 定义构造器函数constructor(firstName: string, lastName: string) {// 更新数据值this.firstName = firstNamethis.lastName = lastNamethis.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)  //111114let 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 :stringlastName : stringconstructor(firstName:string,lastName:string){this.firstName = firstNamethis.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  没有就是falsereturn source.search(subString) > -1}// 有就是true  没有就是falseconsole.log(searchString('哈哈，年度十大' , '你')) //falseconsole.log(searchString('哈哈，年度十大' , '大')) //true
})()