03 TypeScript进阶语法

学习来源：

20分钟TypeScript进阶！无废话快速提升水平 前端速看_哔哩哔哩_bilibili

1. ts函数重载

ts可以对函数重载多个类型的函数，比如声明是string或者是number类型，并且可以在编译器中进行类型的选择。

1. ts接口继承

由02ts基础的接口知识点已知，interface用于声明接口，可以在单个接口中声明类型，也可以使用孩子继承接口，同时孩子自己也可以继续定义接口类型，以便更好地对接口进行复用

const myObj：Child = { prop1:'', prop2:1, prop3:'' } //使用是Child包含的类型

1. 类

类的修饰符分为以下的类型

类通过对属性值先设定类型再在构造器中对属性值进行实例化，如果属性值设定了类型但是没有进行构造器的实例化，就会出现报错（因为ts初始化配置文件严格模式是默认开启的，确保必须值要在构造器中使用上）

因此如果没有实例化的值通过可选值的方式进行声明类型

1. 类的公有属性、私有属性、保护属性、静态属性、只读属性

class Article{ 
//先对类的属性做声明
 public title:string //类中的属性值默认是公有，但是写上更加清晰
 content: string // 与上面属性范围一样 
aaa?:string //设置可选属性值
 bbb= 100 // 设置根据值判断类型 

private tempData?:string //设置私有属性 
protectd:innerData?:string // 设置保护属性 
static author:string // 限定静态类型，不限定类的位置 
private static c:string //限定静态类型的同时限定类的位置，只能在类中进行使用，同样可以前面换成是public或者是protected 
private static readonly b:string = 'haha' //加上readonly代表是只读属性，不能在后面进行修改 

constructor(title: string,cont ent:string) {
     //在构造器中对类声明的属性进行实例化 
    this.tltle = title this.content = content 
    }
  } 


//对类创建实例 
const a = new Article('标题'，'内容')
 a.author //错误，author是静态类型，不能在事例中进行使用 
    Article.author // 正确，可以在类中进行使用静态类型
 Article.b = 'sss' // 错误，设置为只读不能进行修改
 //子类继承
 class B extends Article{ constructor(title: string,content:string){ 
        super(title,content) 
        this.innerData //innerData作为保护属性可以在类中或者是继承的子类中进行使用                         
        this.tempData //tempData作为私有成员只能在类中进行使用，因此为错误
     } 
}

1. 类的存取器属性

存取器常用于内部的密码不让外界看到

class User {
private _password: string //设置私有属性 ，为了和下面的存取器区分开通常加上_
//设置存取器，让外部访问返回******
get password(): string {
return '******'
}
//设置
    set password(newPass: string){
    this._password = newPass //设置密码在内部
    }
const u= new User()
console.log(u.password) //读取结果是******

1. 抽象类

抽象类可以生成多个具体类

//定义抽象类与抽象属性，抽象方法，普通方法
abstract class Animal{
abstract name: string  //抽象属性
abstract maskSound():void //抽象类
//抽象类中也可以设置普通的方法
move():void {
console.log('移动')
}
}
class Cat extends Animal {
//注意事例化时候必须包含抽象类所有的抽象属性不然报错，比如删除下面的句子就会报错
name:string ='小猫
maskSound(): void {
}
}

同时抽象类也是可以进行子类的继承的

1. 类实现的接口

用类实现接口能够达到实现多个接口效果，而类是无法继承多个类的

//定义两个接口
interface Animal {
    name: string
    get sound(): string
    makeSound():void
}

interface B {
age: number
}
//类实现接口Animal和B
class Dog implements Animal,B {
//里面值必须包含接口设定的所有属性值
    name:string ='小狗'
    age:number=10
    get sound(){
    return ''
}
makeSound(): void{

}

1. 泛型类

class MyClass<T>{
    public value: T
    constructor(value:T){
    this.value = value
}
//设定类中一个do方法
    do(input:T):T{
    console.log('处理数据'，this.value)
    return input
    }
}

const myStr = new MyClass<string>('hello')
myStr.do('abwadw') //使用泛型类规定使用是字符串
const myNum = new MyClass<number>(123)
myNum.do('asdasdsa') //错误，泛型类使用是数字，但是这里写成字符串