前端 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 = [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 (str)
// // 类型断言 也可以获取数字的长度
// // （就是告诉编辑器我知道自己在干啥）
// // 断言方式1 (str)
function getStra(str:number|string):number{
if((str).length){
return (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((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
})()
