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 ...

在處理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上尤其是...

跟上次的文章比起來已經很久沒有更新了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 其實不會很難，想成是自定...

github page ts-node是直接執行typescript使用的，若是不想做tsc的動作而直接執行的話可以直接利用 ts-node <path-to-file> 直接去做執行 這中間當然可以套用一些其他的options不過簡單執行這個即可 注意：因為ts-node是執行typescript，所以先確定系統當中是否已經安裝typescript 一開始當然先說起手勢啦 yarn global add ts-node 上一篇提到了yarn那就當然用yarn來做安裝的動作啦 安裝期間東西會有點多，網速慢的大概要注意一下 雖然說ts-node可以直接執行typescript的程式，但是實際上執行情況是先將typescript先compile後放在cache中，然後再做執行，所以並不會像nodejs運行js檔案那樣來的快速，中間還是會有經過一次編譯的動作 該報錯還是會報錯，不過好處是它會直接trace到.ts的檔案，一般的.map.js檔案如果當中沒有註冊或者安裝其他套件做設定的話，最高一層只會追蹤到js就停止，並不會往上追到原始碼去 Options: -e, --eval [code] Evaluate code -p, --print [code] Evaluate code and print result -r, --require [path] Require a node module for execution -C, --compiler [name] Specify a custom TypeScript compiler -I, --ignoreWarnings [code] Ignore TypeScript warnings by diagnostic code -D, --disableWarnings Ignore every TypeScript warning -P, --project [path] Path to TypeScript project (or \`false\`) -O, --compilerOpti...

來紀錄一下最近遇到的一些小問題 用新的工具就是踩坑加上撞牆 對於在typescript上面使用外部的模組就是會有許許多多的狀況以及需要適應的地方 拿剛剛做的小東西來說明好了 import { Component , OnInit , ElementRef , Inject , AfterViewInit } from '@angular/core' ; declare let jQuery : any ; @ Component ({ ... }) export class test implements OnInit , AfterViewInit { elementRef : ElementRef ; logs = new Array(); constructor ( @ Inject ( ElementRef ) elementRef : ElementRef ) { this . elementRef = elementRef ; } ngOnInit() { let $button = jQuery ( this . elementRef . nativeElement ). find ( ".btn" ); $button . click (() => { let log = jQuery ( this ). attr ( 'log' ); ... logPush ( log ); function logPush ( log ){ this . logs . push ( log ); } }) } } 這只是一個簡易的示範使用jquery來實做button當被點擊到的時候進行處理 當然在ng2有提供(click)="onClick()...

開始用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就...之後再說吧  呵呵