發表文章

目前顯示的是 5月, 2020的文章

Typescript 2 使用 interface,module,namespace,alias type 和簡單提 declare

圖片
在處理typescript宣告型別的中,最常的是先利用interface / type去做基本定義宣告 interface IFoo { bar: string ; } 在這層的關係裡面,只要有宣告 const anything: IFoo 裡面帶的內容就是要照著開出的interface / type去做,要不然會有error而無法正常compile 而重複命名的 interface 型別會進行再對其做屬性擴充 interafce IFoo { something: string ; } interface IFoo { bar: string ; } //same as interface IFoo { something: string ; bar: string ; } 而 type 的情況跟 interface 像但是又有點不一樣 就基本的宣告來說的話 type IFoo = { bar: string ; } 其實對於使用上來說,type和interface差距不大,不過還是有主要的區別的,type可以對已經定義的typescript型別再命名 type alias ,例如說 interface IFoo { bar: string ; } type IFoo2 = IFoo; 這樣就可以對該項型別重新命名了,而有此項功能的type,就可以對相關參數進行更詳細定義 例如說1 / 0這個是在php裡面傳值時也會使用到的boolean型別,既然如此,我就可以將他這樣定義 type IPHPBoolean = 1 | 0 ; 注意, | 這個為typescript2新增的運算子,為 union 的運算子,照上面sample來說,即為 1 或者 0 ,同意 or 。後續會對常用operator再做解說 而 type 要如何進行擴充呢? type IFoo = { bar: string ; }; type IFoo2 = IFoo & { something: string ; }; 如此一來, IFoo2 將 IFoo 進行擴充,也可以使用 something 此項欄位 type 和 interface 使用上差不多,可是如果使用在editor上尤其是...

Typescript 1 - basic

跟上次的文章比起來已經很久沒有更新了XD,這次正好算自己回顧一下曾經寫typescript的一些心得吧,另外這系列的文章比較會在於實務上的操作,新手級別的介紹(初入JS的新手們),就麻煩先行去找  mdn  等相關的網站學一下囉。 有寫過javascript的通常都會遇到trace code的時候,到處串api/events/option然後沒有文件,只好在每個點下console.log去查到底會出現什麼。這時候如果改成使用typescript的話,就可以很輕鬆的解決掉這些問題。只要定義好型別,做好pass value的架構,typescript可以協助輕鬆import/restructure/type hint,也是因為這些的好處,讓我越來越不能接受沒有type hint的情況了XD 有興趣的可以看一下 playground 會被compile成什麼樣子 以下就先簡單介紹下typescript常用的一些宣告方式,先用常見的來說明 let str: string ; let num: number ; 如果是以object來進行宣告的話 let foo: { bar: string ; // foo.bar是string type } 這樣在傳值的時候foo就只能接受 {bar: string} 裡面的bar被限制為string type 如果是Array的話 let arr: string [] = ['hello', 'world'] 這樣的 arr 就只能接受 string 型別的資料輸入 此外實務使用上亦有 string literal 和 numeric literal 兩種型別 let str: 'foo' | 'bar' ; let dice: 1 | 2 | 3 | 4 | 5 | 6 ; 如此一來 str 僅能接受 foo 及 bar 的文字,而 dice 同樣只能接受1~6的數字輸入 另外typescript亦有提供 enum 的型別(只有在typescript可以使用到) 至於 enum 是什麼呢? 查wiki大概解釋中文=>列舉...XD enum 其實不會很難,想成是自定...