Coding life

本篇會比較強調 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 ...

今天在修改angularjs踩到顆地雷 主要是因為以下的code function init () { $scope . item . list = getList (); } function getList () { var items = new Array(); $http . get ( URL ). then ( function ( data ) { items = data ; }, function ( res ) { items = [{ "error" : "queryFailed" }] }); return items ; } 這樣在console.log叫出來看，$scopr.item.list會變成 [] 中間沒有東西 原因是在呼叫函式後，$http做的是Ajax的動作，他要去從遠端把資料拉出來 可是問題是這樣的傳輸需要時間，結果在傳輸狀態下return先被啟用了 花了有點長的時間去查詢解決辦法 我之前就有發生過這樣的問題，然後用callback解決掉，可是這樣搞總不是辦法，而且也不是我要的東西 後來採用了promise以及宣告的順序解決掉這個問題 這個例子中就是模仿我專案的情況，首先先開始init的function再進行getList的請求 執行後$scopr.item.list就會出錯 於是我將它改成以下的方式 function pre (){ getList (). then ( function ( data ){ onInit ( data ) }); } function onInit ( items ) { $scope . item . list = getList (); } function getList () { var items = new Array(); var deferred = $q . defer (); $http . get ( URL...

開始用typescript做開發了((目前還是先練習當中 使用情況還算OK，不過對於裝飾器(decorator)的東西，我不是很熟悉可能還要再多練習 Definition files也是還沒有開始動手寫過 目前大概都是非常前面的那種HelloWorld等級的東西 宣告部分來說大概類似底下的 let a: number = 1 ; let b: string = "helloworld" ; function部份為了回傳值，也是更進化了 function returnNumber (i: number ) : number { return i ; } function returnString(str: string ) : string { return str; } 也添加了class的應用，我記得ES6才會有支援 class test{ private m_a: string ; b: number ; constructor (q: string ){ this .m_a = "Hello" + q; this .b = 50 ; } returnA() : string { return this .m_a + this .b; } } let a = new test( "world" ); console.log(a.returnA()); 也添加了很多新概念進去，比原本的JS應該是可以讓其結構更清楚了一些 要不然全程用function+closure做類的處理...做的時候我會真的會回頭看不懂我寫啥鬼... Reference : https://blogs.msdn.microsoft.com/ericsk/2012/10/01/typescript/ https://www.gitbook.com/book/zhongsp/typescript-handbook/details

最近因為Electron與nodejs和工作上的關係，開始了對AngularJS的學習，約莫在9月初的尷尬時間點開始了Study和Survey。 Ang2 和 Ang1兩邊遊蕩，後者和前者聽說架構上差異頗大以及效能上也有差距，但是Ang2那時仍然在測試中，不過就在隔一個禮拜剛好看到final release 2.0.0決定開始進行對Ang2以及TypeScript(簡稱TS)的學習。 TS很有趣，跟一般的JS不一樣。對於我剛寫完C++跳來前端來說，TypeScript理解後反而更容易對我的胃口。(題外話:當初是聽說寫後端，結果搞一搞突然在開發前端了...真是各種意想不到...尤其又沒有前輩可以詢問，只好自己單幹) TS是JS的超集，這就不多說了，他可以直接拿JS的function拿來compile，跟我之前在看的CoffeeScript完全不一樣(個人有大括強迫症，CoffeeScript這種我就是各種不習慣)，加上Visual StudioCode的強力支援，在寫JS的東西就可以更細的去做區分了。 因為對於TS仍然在初步學習階段，又加上真的是從無到有(那怕之前已經有JS的經驗)，就不寫太深入的東西了... 以我一開始使用來說: 在nodejs當中開始實際使用TS一定要安裝兩樣東西 npm install typescript typings -g TS OK 沒問題  typings是啥玩意? Typings可以調出modules的definition檔案，近似於C++中的header file，一般來說安裝modules除了利用npm install以外，如果是使用TS就會需要用到Typings額外安裝該模組的.d.ts檔案供TS引入模組使用，如果沒有這檔案要做基本require在TS編譯中可是會報錯誤的喔! 後面安裝Angular2就...之後再說吧  呵呵