TypeScript 雜談


最近因為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就...之後再說吧  呵呵

留言

張貼留言

這個網誌中的熱門文章

ts-node 應用

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
閱讀完整內容

ubuntu 日常(X)紀錄

今天開機發現了螢幕log in的部分沒有了input field的黑色小框框 我猜是周五裝了一些東西沒有仔細檢查就做了update的關係吧.... 情況大概跟 這篇 有點像 不過還是可以輸入進去畫面 不過進去後所有的東西都跑掉啦，button的邊框、選擇的邊框、filesystem變得我都認不出來你是啥鬼、Wallpaper變黑的 第一直覺是unity你又再玩我了，基本上ubuntu有關視覺效果部分找unity算帳大概八九不離十 不過在檢查的時候一時不小心手賤KEY了以下指令 $ sudo startx GOOD  我的login部分可以loop了.... ctrl+alt+f1切上Terminal趕快把家目錄底下的.Xauthority幹掉重開再進去 接下來就是回復桌面的項目... sudo apt-get udpate sudo apt-get autoremove ubuntu-desktop unity sudo apt-get install ubuntu-desktop unity 或許有人說不是用 sudo apt-get install -reisntall ubuntu-desktop 就好，我試過，很神奇的沒有用... 結果我的桌面依然沒有出現不過按鈕其他的地方正常啦 想說就算了 之前因為有動過.conf的地方  很多東西要重來 開始處理輸入法問題((對  我的輸入法也跑掉了 這中間又發生一件手殘的事情.... sudo apt-get autoremove ibus 導致我的top banner 和 launch bar消失 然後就開始默默地重新安裝起了ubuntu-desktop 和 unity... 參考的是 這篇 然後回頭想到是不是我只有update沒有進行過一次upgrade 於是做了一次 sudo apt-get upgrade 謝天謝地  背景、launch bar、top banner全部都回來了，覺得開心
閱讀完整內容

Angular 2 with Third Party files

來紀錄一下最近遇到的一些小問題 用新的工具就是踩坑加上撞牆 對於在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()&
閱讀完整內容