發表文章

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

Typescript 4_ 那些奇怪的字(上) extends, infer, typeof

這篇中途有點難產,畢竟我好像不小心難度拉太高了,所以在思考名詞解釋的情況的時候都是有點不太合適的感覺...另外這些關鍵字詞有 extends, infer, typeof, as, in, keyof, never, unknown, void, static, get, set, readonly,前面會先介紹一部分。 在這篇中,來介紹一下會在typescript看到的關鍵字詞 extends  繼承屬性 extends  的使用上,跟前一篇 & 的使用有那麼一點的類似,不過在typescript的用法更偏向於物件導向的 繼承 / inheritance 的概念。 那...什麼是繼承?就請去找oop相關的書籍,這邊就不再贅述了。畢竟寫oop的前輩對於繼承的相關說明都很透徹了,就無需我再重新解釋:P 有趣的是在typescript的實作中, extends 是可以拿來做 conditional type 來實作的。 也就是可以利用3元表達式  a ? b : c  來對  generic type  做更進一步的屬性判定。 interface IFoo { props: string ; } interface IFooReturn { result: string ; } interface IBar { name: string ; } interface IBarReturn { result: number ; } function Sample < T >( arg: T ): T extends IFoo ? IFooReturn : IBarReturn ; 而  conditional type  搭配  infer  就有各種的實作產生 infer   type inference  取得function裡面的數值 就如字面上的意義來說,這個是常用來取得  function  裡面的參數值,在 typescript 內建函數  utility types  中,可以看到其實作  ReturnType  的內容。 type ReturnType<T extends (...args: any ) => any > = T extends (...ar

Typescript 3 使用,那些奇怪的符號: operators, private, decorator, generic type

本篇會比較強調 typescript 中一些特殊符號,還有>ES6的一些符號,例如說optional chainning,private等的特殊符號。說實話,這篇真的覺得難寫,我不該把範圍開那麼大,不過常用的特殊符號分開來就感覺凌亂,還是寫在一篇我覺得比較好...吧? |   union type  的使用 Union type 使用的時候,即代表參數同時接受  |  兩邊的型別定義,但是注意,他只能符合其中一個型別 let strOrNumber: string | number | undefined ; // 同時接受 string, number, undefined的型別 進階使用方式我常用在撰寫 function 中若有不同的 state,代入的argument也會不同 // 通常出現在 react reducer 的 action 上 type IAction = { type : 'init' // 這些參數甚至可以搭配enum操作 } | { type : 'update' , payload: { arg: string } } | { type : 'disable' , payload: { isShow: boolean ; } } function reducer ( state = initialState, action: IAction ) { // do content switch (action.type) { case 'init' : // no payload break ; case 'update' : action.payload.arg // string type break ; case 'disable' : action.paylaod.isShow // boolean type