使用Visual Studio Code寫TypeScript

Visual Studio Code的功能越來越多元，果然是一套跨平台好用的編輯器，雖然，現階段功能還沒有Sublime多，但是，它不僅能編輯前端還可以撰寫後端程式碼，這部分就可以讓人期待它的後續發展，因此，嘗試用它在Macbook pro上來開發微軟多方宣傳的Typescript試試看

要在Mac上使用，首先必須先安裝好Typescript套件

安裝Typescript Package

---

npm install -g typescript

如果發生下面這樣錯誤，表示你權限不夠，再下另一個指令就可以安裝完成了

sudo npm install -g typescript

測試

---

安裝完畢，我們就可以打開Visual Studio Code，建立一個Typescript的config檔案，這檔案名稱請命名tsconfig.json，然後在裡面打入這樣內容

{
    "compilerOptions": {
        "target": "es5",
        "module": "amd",
        "sourceMap": true
    }
}

這時候，打這些名稱別擔心不會打，因為會有～～～提示唷，想不到在Visual Studio中的Intellisense功能，這邊也可以用

之後，就可以開始撰寫Typescript了。趕緊建立一個.Ts檔案來試試看，Typescript主要是透過你撰寫.ts檔案後，透過編譯方式將ts轉換成js檔案，所以，必須先寫.ts檔案

class Greeter {
    greeting :string;
    
   constructor(msg:string) {
       this.greeting=msg+"eee";
        
    }
    greet(){
        
        return "Hello"+this.greeting;
    }
    
}

var AA=new Greeter("你好嗎");

撰寫好之後讓它去編譯，在Visual Code裡面的編譯，必須使用Task Runner去做build的動作，因此，必須先取得Task runner config檔案，只要在Visual Studio Code的命令列打上 config就會出現安裝

安裝完畢後，你在左側或是你的資料夾中就會出現Task.json檔案

// A task runner that calls the Typescript compiler (tsc) and
// Compiles a HelloWorld.ts program
{
	"version": "0.1.0",

	// The command is tsc. Assumes that tsc has been installed using npm install -g typescript
	"command": "tsc",

	// The command is a shell script
	"isShellCommand": true,

	// Show the output window only if unrecognized errors occur.
	"showOutput": "silent",

	// args is the HelloWorld program to compile.
	"args": [],

	// use the standard tsc problem matcher to find compile problems
	// in the output.
	"problemMatcher": "$tsc"
}

相關細節都可以在這邊進行設定，這樣就可以開始進行編譯的動作，不過，每次改完都要手動編譯，感覺也很擾人，我們可以透過指令進行自動編譯動作，首先，隨便針對檔案按右鍵打開『終端機』

打入下列指令

tsc *.ts --watch

這樣當你的ts檔案有做更新儲存後，就會自動編譯成js檔案了