Typescript入門之旅（2）

1、接口相關

/**
 * 1、接口對類的約束
 */
//接口定義
interface Iprinter{
    printing(msg:string):string;
}
interface Imessage{
    getMsg():string;
}

//接口實現
class ColorPrinter implements Iprinter,Imessage{
    printing(msg: string): string {
        return `打印${msg}成功`
    }
    getMsg():string{
        return `msg001`
    }
}
let bd1 = new ColorPrinter()
console.log(bd1.printing("簡歷"))
console.log(bd1.getMsg())

/**
 * 2、接口對方法的約束
 */
interface Imyfunction{
    (a:string,b:number):boolean
}
let fun1:Imyfunction
fun1 = function(a:string,b:number):boolean{
    return true
}

/**
 * 3、接口對數組的約束
 */
interface Iarr{
    [index:number]:number
}
let arr1:Iarr
arr1 = [12,1]

/**
 * 4、接口對json的約束
 */
interface Idata{
    name:string,
    age?:number,
    readonly email:string
}
function showData(n:Idata){
    console.log(JSON.stringify(n))
}
showData({name:"zhangsan",email:"[email protected]"})

/**
 * 5、接口的繼承
 */
interface Icolor extends Iprinter{
    consolHello():void
}
class Print implements Icolor{
    printing(msg:string):string{
        return msg
    }
    consolHello():void{
        console.log("hello")
    }
}
let p2=new Print();
console.log(p2.printing("我是接口繼承後實現的類輸出信息"))
p2.consolHello()

二、類相關

/**
 * 1、類的定義
 */
class Person{
    name:string
    age:number
    constructor(name:string,age:number){
        this.name=name
        this.age=age
    }
    print(){
        return `name:${this.name}--age:${this.age}`
    }
}
let p1 = new Person("zhangsan",12)
console.log(p1.print())

/**
 * 2、類的繼承
 */
class Student extends Person{
    cardNumber:string
    school:string
    constructor(name:string,age:number,cardNumber:string,school:string){
        super(name,age)
        this.cardNumber=cardNumber
        this.school=school
    }
    print(){
        return `name:${this.name}--age:${this.age}--cardNumber:${this.cardNumber}--school:${this.school}`
    }
}
let s1 = new Student("zhangsan",12,"1234","beijingdaxue")
console.log(s1.print())

/**
 * 3、多態
 */
class Animal{
    eat(){
        console.log("animal eat")
    }
}
class Wolf extends Animal{
    eat(){
        console.log("狼喫肉")
    }
}
class Dog extends Animal{
    eat(){
        console.log("狗喫屎")
    }
}
let w=new Wolf()
let d=new Dog()
w.eat()
d.eat()

/**
 * 4、抽象類、抽象方法
 * 抽象類是提供其他類繼承的基類，不能直接被實例化
 * 抽象方法只能存在於抽象類中，抽象類中可以有抽象方法和非抽象方法
 * 子類繼承抽象類，實現基類的抽象方法
 */
abstract class Shape{
    abstract run():void
    fly():void{
        console.log("fly")
    }
}
class Circle extends Shape{
    run(): void {
        console.log("circle")
    }
}
class Round extends Shape{
    run():void{
        console.log("round")
    }
}
let c1=new Circle()
let r1=new Round()
c1.run()
r1.run()

三、方法相關

/**
 * 1、方法重載
 */
function getInfo(info:string):void
function getInfo(info:number):void
function getInfo(info:any):void{
    switch(typeof info){
        case 'string':
            console.log(`string:${info}`)
            break;
        case 'number':
            console.log(`number:${info}`)
            break;
        default:
            console.log(`any:${info}`)
    }
}
getInfo("zhangsan")
getInfo(12)

四、泛型相關

/**
 * 1、泛型方法
 */
function printArr<T>(arr:T[]):void{
    for(let item of arr){
        console.log(item)
    }
}
printArr<number>([11,22,33])
printArr<string>(["aa","dd","ee"])

 /**
 * 2、泛型類
 */
class ArrayList<T>{
    public list:T[]=[]
    add(val:T):void{
        this.list.push(val)
    }
}
let numberList = new ArrayList<number>();
numberList.add(12)
numberList.add(23)
console.log(numberList.list)

 /**
 * 3、泛型接口
 */
interface IArrayList<T>{
    (x:T,y:T):T
}
let stringList:IArrayList<string>
stringList = function(x:string,y:string):string{
    return `${x}${y}`
}
console.log(stringList("1","2"))