TypeScript學習（四）—— 介面和泛型

conqorld發表於2019-04-24
TypeScript泛型

前篇：TypeScript學習（三）—— 類

多型

父類定義一個方法不去實現，讓繼承它的子類去實現，每一個子類有不同的表現。

class  Animal {
    name:string
    constructor(name:string){
        this.name = name
    }
    getVariety(){} //父類定義了getVariety方法不去實現
}
class Cat extends Animal{
    constructor(name:string){
        super(name)
    }
    getVariety():string{
        return `${this.name}是隻貓!` //子類Cat對getVariety的實現
    }
}
class Dog extends Animal{
    constructor(name:string){
        super(name)
    }
    getVariety():string{
        return `${this.name}是隻狗!` //子類Dog對getVariety的實現
    }
}
//這種子類繼承父類後重寫了getVariety方法，每個子類有自己不同的實現，叫多型
複製程式碼

抽象類和抽象方法

TS中的抽象類是提供其他類繼承的基類，不能直接例項化。用abstract關鍵字定義抽象類和抽象方法，抽象類中的抽象方法不包含具體實現並且必須在派生類中實現。

抽象類和抽象方法用來定義標準，來約束子類必須實現指定方法

abstract class Animal {
    name:string
    constructor(name:string){
        this.name = name
    }
    abstract getVariety():any
    run():void{} //沒有abstract標識的方法在子類中可以不實現
}
// const animal = new Animal()  //報錯！！抽象類無法例項化
class Dog extends Animal{
    constructor(name:string){
        super(name)
    }
    getVariety(){  //實現抽象方法中的getVariety方法，如果沒有則報錯！如果要標明返回值型別，必須和抽象方法中一致
        return `${this.name}是隻狗!`
    }
}
const dog = new Dog('旺財')
console.log(dog.getVariety()) //旺財是隻狗!
複製程式碼

TS中的介面

在OOP中，介面是一種規範的定義，它定義了行為和動作的規範，在程式設計裡面，介面起到一種限制和規範的作用，介面定義了某一批類所需要遵守的規範，介面不關心這些類的內部裝藥資料，也不關係這些類裡方法的實現細節，它只規定這批類裡必須提供某些方法，提供這些方法就可以滿足實際需要。

使用interface關鍵字來定義：

屬性型別介面

interface AnimalInfo{ //對傳入物件的約束
    name:string
    age:number
    sex?:boolean
}
function Dog(info:AnimalInfo) { //info使用定義好的約束，要求傳進來的info必須滿足AnimalInfo約定好的條件
    console.log(`${info.name},${info.age}歲！`)
}
Dog({name:'mimi', age:2}) //不報錯
Dog({name:'mimi'}) //報錯
複製程式碼

函式型別介面

//函式型別介面：對方法傳入的引數以及返回值進行約束
interface encrypt {
    (key:string,value:string):string   //對函式進行約束
}
var md5:encrypt = function (key:string, value:string):string {
    return key + value
}
md5('我是key', '我是value') //我是key我是value
md5('我是key') //報錯
複製程式碼

可索引介面

//可索引介面：對陣列、物件進行約束
interface userArry { //對陣列約束
    [index:number]:string
}
const arr:userArry = ['111122', '23333']
const arr:userArry = [123, '23333'] //報錯

interface userObj {  //對物件進行約束
    [index:string]:string  //如果[index:string]:any，不管是Object或者是Arry都不會報錯
}
const obj:userObj = ['22','333'] //報錯
const obj:userObj = {a: '22', b: '333'} //不報錯
複製程式碼

類型別介面

interface Animal { //定義類型別介面
    name:string
    getVariety():string
}
class Dog implements Animal{  //對Dog類新增約束，使用implements關鍵字，Dog中必須有name屬性和getVariety方法
    name:string
    constructor(name:string){
        this.name = name
    }
    getVariety(): string {
        return `${this.name}是隻狗!`
    }
}
const dog = new Dog('旺財')
複製程式碼

類型別介面和前面的抽象類相似，都是要求子類按照約定好的標準去具體實現。

介面的擴充套件

interface Dog extends Animal{
    say():void
}
class NorthDog {
    unClod():void{
        console.log('北極狗不怕冷！')
    }
}
class Husky extends NorthDog implements Dog{ //繼承+介面
    name:string
    constructor(name){
        super()
        this.name = name
    }
    getVariety(): string {
        return `${this.name}是隻狗!`
    }
    say(): void {
        console.log('汪汪！！！')
    }
}
const husky = new Husky('二哈')
husky.unClod()
複製程式碼

泛型

泛型是解決類、介面、方法的複用以及對不特定資料型別的支援。

泛型可以支援不特定資料型別，要求傳入引數和返回的引數一致。

function getDate<T>(value:T):T {  //T由呼叫這個方法的時候決定
    return value
}
getDate<number>(123) //正確
getDate<string>(123) //要求傳入string 報錯
複製程式碼

泛型在class中的使用

class List<T>{
    list:T[]
    constructor(...list:T[]){
        this.list = list
    }
    add(item:T):void{
        this.list.push(item)
    }
    getList():T[]{
        return this.list
    }
}
const numList = new List<number>(1,2,3)
const stringList = new List<string>()
numList.add(8) //正確
stringList.add('a') //正確
console.log(numList.getList()) // [ 1, 2, 3, 8 ]
console.log(stringList.getList()) // [ 'a' ]
numList.add('a') //報錯
stringList.add(1) //報錯
複製程式碼

泛型介面

interface Config<T> {  //定義泛型介面
    name:T
    getName():T
}
class Dog<T> implements Config<T>{ //定義泛型類
    name:T
    constructor(name:T){
        this.name = name
    }
    getName(): T {
        return this.name
    }
}
const dog = new Dog<string>('旺財！')
console.log(dog.getName())
const dog = new Dog<string>(11) //報錯！
複製程式碼

相關文章