ts 學習筆記 高階篇 1

2022-07-12 09:06:09 字數 4258 閱讀 3433

目錄列舉

型別別名用來給乙個型別起個新名字

type name = string


type nameresolver = () => string


type nameorresolver = name | nameresolver


function getname(n: nameorresolver): name else 


}
上例中， 我們使用type建立型別別名。

型別別名常用於聯合型別。

字串字面量型別用來約束取值只能是某幾個字串中的乙個。

type eventnames = 'click' | 'scroll' | 'mousemove'


function handleevent(ele: element, event: eventnames) 


handleevent(document.getelementbyid('hello'), 'scoll')


handleevent(document.getelementbyid('world'), 'dbclick') // err dbclick 未存在於 eventnames 定義中
注意：型別別名與字串字面量型別都是使用type進行定義

陣列合併了相同型別的物件， 而元祖（tuple)合併了不同型別的物件。

元祖起源與函式程式語言（如f#)， 在這些語言中頻繁使用元祖。

定義一對值分別為string和number的元祖。

let tao: [string, nubmer] = ['tao', 26]
當賦值活訪問乙個已知索引的元素時， 會得到正確的型別：

let tao: [string, nubmer]


tao[0] = 'tao'


tao[1] = 26


tao[0].slice(1)


tao[1].tofixed(2)
也可以只賦值其中一項：

let tao: [string, nubmer]


tao[0] = 'tao'
但是當直接對元祖型別的變數進行初始化或賦值時， 需要提供所有元祖型別中指定的項。

let tao: [string, number] = ['tao']


// err
let tao: [string, number]


tao = ['tao']


// err
當新增越界的元素時， 它的型別會被限制為元祖中每個型別的聯合型別

let tao: [string, number]


tao = ['tao', 26]


tao.push('') // success


tao.push(true) // err 型別必須是 string 或者 number
列舉（enum） 型別用於取值被限定在一定範圍內的場景， 比如一周只能有七天， 顏色限定為紅綠藍等。

列舉使用enum關鍵字來定義：

enum days
列舉成員會被賦值為從0開始遞增的數字（步長為 1， 注意觀察負數與小數）， 同時也會對列舉值到列舉名進行反向對映：

enum days ;


// 在未手動賦值時， 列舉值會預設從數字0 開始遞增


console.log(days["sun"] === 0); // true


console.log(days["mon"] === 1); // true


console.log(days["tue"] === 2); // true


console.log(days["sat"] === 6); // true


console.log(days[0] === "sun"); // true


console.log(days[1] === "mon"); // true


console.log(days[2] === "tue"); // true


console.log(days[6] === "sat"); // true
事實上， 上面的例子會被編譯為：

var days;


(function (days) )(days || (days = {}))
我們也可以給列舉項手動賦值

enum days ;


console.log(days["sun"] === 7); // true


console.log(days["mon"] === 1); // true


console.log(days["tue"] === 2); // true


console.log(days["sat"] === 6); // true
如果未手動賦值與手動賦值重複了，正常情況下是正常的，可當進行方向對映時， 手動賦值會覆蓋掉前者。 （尤其列舉值為數字時）， 所以最好不要讓這種情況發生。

手動賦值的列舉項也可以不是數字， 此時需要使用型別斷言來讓 tsc 無視型別檢查(編譯結果同樣可用)

enum days ;
編譯結果

var days;


(function (days) )(days || (days = {}));
手動賦值， 型別斷言不應該影響列舉其他值， 即必須放置在最後一位， 且應該是個數值， 儘管上文中的's'是可用的

enum days ;
列舉項有兩種型別：常數項（constant member） 和計算所得項（computed member）。

當滿足以下條件時， 列舉成員被當作是常數：

所有其它情況的列舉成員被當作是需要計算得出的值。

常數列舉是使用const enum定義的列舉型別：

const enum directions 


let directions = [directions.up, directions.down, directions.left, directions.right]
常數列舉與普通列舉的區別是， 它會在編譯階段被刪除， 並且不能包含計算成員。

上例的編譯結果是：

var directions = [0 /* up */, 1 /* down */, 2 /* left */, 3 /* right */];
假如包含了計算成員，則會在編譯階段報錯：

const enum color ;


// err
外部列舉（ambient enums）是使用declare enum定義的列舉型別：

declare enum directions 


let directinos = [directions.up, directions.down, directions.left, directions.right]
之前提到過，declare定義的型別只會用於編譯時的檢查，編譯結果中會被刪除。

上例的編譯結果是：

var directions = [directions.up, directions.down, directions.left, directions.right];
外部列舉與宣告語句一樣，常出現在宣告檔案中。

同時使用declare和const也是可以的：

declare const enum directions 


let directions = [directions.up, directions.down, directions.left, directions.right];
編譯結果：

var directions = [0 /* up */, 1 /* down */, 2 /* left */, 3 /* right */];

ts學習筆記（1）

ts的介面有兩種，乙個是物件型別介面，乙個是函式型別介面 先來看物件型別的介面 inte ce a var obj1 a 介面定義了什麼屬性，該介面型別的物件就只能有這些屬性,如果再新增其他屬性則會報錯。表示該屬性可以沒有 inte ce a inte ce b var result functio...

Vue學習筆記 高階篇

乙個簡單的元件 button counter button counter div body 定義乙個名為 button counter 的新元件 vue.component button counter 如果不用return寫 count 0 則各個部件間會互相影響！template you cl...

TS學習筆記 范型

1.我們這裡寫了乙個函式，傳入的引數我們規定是number型別。如下 接著如果我們又要寫乙個函式實現的業務跟上面這個一樣，但傳入的引數型別卻規定要string 那我們就得重新寫乙個一模一樣的函式，函式內的 如果很多很多，那顯然這是不可取的。那如果我們把他的型別規定成any不就可以了嗎，但是這樣做的話...