logo头像

Edward.K Thinking

使用Visual Studio Code寫TypeScript

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

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

安裝Typescript Package


1
npm install -g typescript

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

1
sudo npm install -g typescript

測試


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

1
2
3
4
5
6
7
{
"compilerOptions": {
"target": "es5",
"module": "amd",
"sourceMap": true
}
}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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檔案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 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"
}

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

打入下列指令

1
tsc *.ts --watch

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

上一篇