typescript是微軟出品的,javascript的超集。讓javascript的寫法很類似java,核心功能是讓JavaScript這個(gè)弱類型的語言,增加類型檢查,更適合編寫企業(yè)級應(yīng)用。之前的angular項(xiàng)目使用的是typescript,流行的框架vue和react也支持typescript的寫法,甚至node的替代品deno也是用typescript開發(fā)的,這就讓重新好好學(xué)習(xí)它成為必然。
第一篇筆記是接口。
1、接口介紹
在java中,接口是用來定義一些規(guī)范,使用這些接口,就必須實(shí)現(xiàn)接口中的方法,而且接口中的屬性必須是常量。
JavaScript中沒有接口的概念,而它的超集typescript核心之一就是對值所具有的的結(jié)構(gòu)進(jìn)行類型檢查,在typescript中,接口的作用就是為這些類型命名和為你的代碼定義契約并讓代碼更好理解。
2、接口的簡單使用
2.1、接口初探
interface LabelledValue {
label: string;
}
function printLabel(labelledObj: LabelledValue) {
console.log(labelledObj.label);
}
let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);
我們先定義一個(gè)接口,再把符合接口定義的對象傳進(jìn)去,就能提高代碼可讀性。類型檢查器不會去檢查屬性的順序,只要相應(yīng)的屬性存在并且類型也是對的就可以。
2.2、可選屬性
實(shí)際應(yīng)用中,接口中的屬性不全是必需的,這時(shí)就得用到可選屬性,就是在屬性名稱后面加一個(gè)?符號。可選屬性的好處之一是可以對可能存在的屬性進(jìn)行預(yù)定義,之二是可以捕獲引用不存在屬性時(shí)的錯(cuò)誤。
interface SquareConfig {
color?: string;
width?: number;
}
2.3、只讀屬性
如果我們希望對象屬性只能在對象剛創(chuàng)建的時(shí)候修改其值,可以在屬性名前制定readonly來指定只讀屬性。
interface Point {
readonly x: number;
readonly y: number;
}
let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!
2.4、定義只讀數(shù)組
typescript具有ReadonlyArray<T>類型,與Array<T>相似,只是把所有可變方法去掉了,因此可以確保數(shù)組創(chuàng)建后再也不能被修改。
let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // error!
a = ro; // error!
將ReadonlyArray賦值到普通數(shù)組也不可以,但可以用類型斷言重寫。
3、接口的高級使用
3.1、函數(shù)類型
接口可以描述JavaScript中對象擁有的各種各樣的外形,除了描述帶有屬性的普通對象外,接口也可以描述函數(shù)類型。
interface SearchFunc {
(source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
let result = source.search(subString);
return result > -1;
}
3.2、數(shù)組類型
跟接口描述差不多,我們也可以描述那些能夠通過索引得到的類型,比如通過下標(biāo)獲得數(shù)組中的值a[2],需要注意的是,索引器的類型只能是number或者string。
interface StringArray {
[index: number]: string;
}
let myArray: StringArray;
myArray = ["Bob", "Fred"];
let myStr: string = myArray[0];
3.3、類類型
與java中接口的基本作用一樣,typescript也可以用它來明確的強(qiáng)制一個(gè)類去符合某種契約。所謂類類型,就是一個(gè)類去實(shí)現(xiàn)接口,而不是直接把接口拿來用,寫法就是 class implements interface。接口可以定義屬性和方法。
interface IClock{
/*定義了一個(gè)接口 這個(gè)接口中有一個(gè)屬性和一個(gè)方法*/
currentTime:Date;
getTime(d:Date);
}
/*Time類實(shí)現(xiàn)IClock接口*/
class Time implements IClock{
currentTime:Date;
getTime(d:Date){
this.currentTime=d;
}
}
3.4、繼承接口
和類一樣,接口也可以相互集成。這讓我們能夠從一個(gè)借口里復(fù)制成員到另一個(gè)接口里,可以更靈活地將接口分割到可重用的模塊里。
3.5、混合類型
所謂的混合類型就是在一個(gè)接口中定義多種類型,比如屬性,函數(shù),數(shù)組等。
interface Counter {
(start: number): string;
interval: number;
reset(): void;
}
function getCounter(): Counter {
let counter = <Counter>function (start: number) { };
counter.interval = 123;
counter.reset = function () { };
return counter;
}
let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;