ts 接口

當一個對象類型被多次使用時,一般會使用接口(interface)來描述對象的類型,達到復用的目的
示例如下

當一個對象類型被多次使用時,可以看到,很明顯代碼有大量的冗余

let personTom: { name: string, age?: number, sayHi(name: string): void } = {
  name: 'Tom',
  sayHi(name: string) {
    console.log(`Hi, ${name}`)
  }
}
let personJack: { name: string, age?: number, sayHi(name: string): void } = {
  name: 'Tom',
  sayHi(name: string) {
    console.log(`Hi, ${name}`)
  }
}

這個時候可以將這個對象定義為接口,以進行復用,可以看到,這樣代碼就少了很多冗余

interface Person {
  name: string
  age?: number
  sayHi(name: string): void
}
let personTime: Person = {
  name: 'time',
  sayHi(name: string) {
    console.log(`hello ${name}`)
  }
}

let personJohn: Person = {
  name: 'John',
  sayHi(name: string) {
    console.log(`hello ${name}`)
  }
}

1. 使用interface關鍵字來聲明接口
2. 接口名稱(比如,此處的Person)可以是任意合法變量名稱
3. 聲明接口后,直接使用接口名稱作為變量的類型
4. 因為每一行只有一個屬性類型,因此,屬性類型后沒有分號或逗號

interface 與 type 類型別名的區(qū)別

在 TypeScript中，interface和type都可以用來定義類型的別名

• 定義方式：type別名可以用來給一個類型起新名字，使用type創(chuàng)建類型別名。它更加靈活，可以用來定義任意類型的別名，包括原始類型、函數(shù)、對象等。而interface則是命名數(shù)據(jù)結構的另一種方式，僅限于描述對象類型，聲明語法也不同于type的聲明語法。
• 使用范圍：與type不同，interface僅限于描述對象類型。也就是說，interface無法用來定義非對象類型的別名，如原始類型、函數(shù)等。type則沒有這些限制，可以用來定義各種類型的別名。
• 組合類型：在TypeScript中，type可以使用交叉類型（intersection type）和聯(lián)合類型（union type）來組合多個類型，而interface則不能。這意味著type可以創(chuàng)建更復雜和靈活的類型結構，而interface在這方面的能力較弱。
  總的來說，type和interface在TypeScript中都可以用來定義類型的別名，但它們在定義范圍、組合類型的能力等方面存在明顯的差異。

interface(接口)和type(類型別名)的對比

• 相同點: 都可以給對象指定類型
• 不同點:
  - 接口只能為對象指定類型
  - 類型別名,不僅可以為對象指定類型,實際上可以給任意類型指定別名

代碼示例

interface Person {
  name: string
  age?: number
  sayHi(name: string): void
}

type animal = {
  name: string
  age?: number
  sayHi(name: string): void
}

在編譯器中使用,兩者都可以實現(xiàn)對對象的類型監(jiān)測

接口的繼承

如果兩個接口之間有相同的屬性或方法,可以將公共的屬性或方法,抽離出來,通過繼承來實現(xiàn)復用
比如,這兩個接口都有x,y兩個屬性,重復寫兩次,可以,但是很繁瑣

	interface Point2D { x: number, y: number }
	interface Point3D { x: number, y: number, z: number }

這個時候就可以使用extends繼承來讓Point3D 繼承Point2D 就可以省去x和y的定義了
如下

	interface Point2D { x: number, y: number }
	// interface Point3D { x: number, y: number, z: number }
	interface Point3D extends Point2D { z: number }

tips:

1. 使用extends(繼承)關鍵字實現(xiàn)了接口Point3D 繼承Point2D
2. 繼承后,Point3D 就有了Point2D的所有方法和屬性了(此時Point3D 同時有x,y,z三個屬性)

繼承多個接口

一個接口可以繼承多個接口,如下 video3D繼承了video接口和3D接口 ,繼承后,Video3D接口就同時擁有兩個接口的所有屬性和方法了

interface Point2D { x: number, y: number }
// interface Point3D { x: number, y: number, z: number }
interface Point3D extends Point2D { z: number }

interface Video { video: object }

interface Video3D extends Video, Point3D {
  lookAt(target: Point3D): void;
}


let v: Video3D = { video: {}, x: 10, y: 10, z: 10, lookAt: (t) => { } } 

typescript 多態(tài)

先看下面這個例子

interface Animal {  
    name: string;  
    age: number;  
    sound: () => void;  
}  
  
interface Dog extends Animal {  
    breed: string;  
}  
  
let myDog: Dog = {  
    name: "Rex",  
    age: 3,  
    breed: "German Shepherd",  
    sound: () => console.log("Bark!")  
};

在這個例子中，Dog 接口繼承了 Animal 接口。這意味著，Dog 對象必須包含 Animal 接口定義的所有屬性和方法，也就是 name、age 和 sound。然后，Dog 接口還定義了自己的額外屬性，即 breed。
這是一個很有意思的現(xiàn)象,因為這已經(jīng)是靜態(tài)類型語言才能實現(xiàn)多態(tài)的基礎了

如上在 TypeScript 中，接口繼承可以實現(xiàn)多態(tài)性。如果你有一個函數(shù)接受 Animal 類型的參數(shù)，那么你也可以傳入一個 Dog 類型的參數(shù)，因為 Dog 是 Animal 的子類型。這是基于 Liskov 替換原則，也就是子類型必須能夠替換它們的基類型。
原理有了,開始實現(xiàn)

	//定義基類
	interface Animal {
	  name: string;
	  age: number;
	  sound: () => void;
	}
	
	//定義基礎
	interface Dog extends Animal {
	  breed: string;
	}
	
	let myDog: Dog = {
	  name: "Rex",
	  age: 3,
	  breed: "German Shepherd",
	  sound: () => console.log("Bark!")
	};
	
	//實現(xiàn)多態(tài)
	function polymorphicDisplay(a: Animal) {
	  a.sound();
	}
	
	polymorphicDisplay(myDog);

輸出成功, js牛逼! ,不對ts牛逼
文章來源地址http://www.zghlxwxcb.cn/news/detail-826368.html

到了這里，關于typescrip接口 interface詳解,以及ts實現(xiàn)多態(tài)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！