Node.js & TypeScript 環境安裝

Huashen
Mar 21, 2021

--

接下來我們要做一些基本的環境安裝及設定。

(可選)Visual Studio Code

如果你沒有慣用的文字編輯器,在這裡非常推薦Visual Studio Code(簡稱VSCode)這款開源的文字編輯器,內建的Terminal讓我們在操作Node.js時非常方便,除了內建Git版本控制、程式碼提示與補全之外,也有許多可用的擴展(Extensions)可以安裝,讓我們開發起來更方便,並且與TypeScript同樣是由微軟開發的,相容性自然不在話下。

以下示範將使用VSCode來開發,你也可以使用任何你習慣的工具。

Node.js

Node.js的官網上可以下載,寫這篇文章時的LTS版本為14.16.0。

Node.js是 基於Chrome V8引擎打造的JavaScript跨平台執行環境(runtime),讓原先只能跑在瀏覽器上的JavaScript程式碼,能夠脫離瀏覽器環境執行,並透過事件循環機制來執行非同步(Asynchronous)程式設計。由於Node.js是開源的,因此有一個龐大的社區在維護它,也有非常多套件讓我們使用。

(可選)yarn

yarn是Node.js的一個套件管理器。原先Node.js預設的套件管理器npm有許多缺陷,因此Facebook、Google等公司合作開發了yarn這個套件管理器來取代npm,即使npm升級到npm5後狀況明顯改善,但yarn仍然是更好的選擇,不過由於我們只需要安裝TypeScript這個套件,因此需不需要安裝yarn就留給大家自己選擇。安裝yarn只需要打開Terminal並輸入:

npm i -g yarn

(i 為 install 的縮寫,-g 代表全域安裝,未來才可以直接呼叫yarn執行)

若是沒有安裝yarn也沒關係,幾乎所有接下來的yarn指令都改成npm就好(除了yarn add 要改成npm install,詳細可以參考GeeksforGeeks的這篇文章)

TypeScript

TypeScript是微軟開發並開源的程式語言,目的是在現有的JavaScript上加上強型別系統以及擴充語法,讓TypeScript比起JavaScript更適合做大型軟體的開發。TypeScript的程式碼可以透過轉譯器轉譯為JavaScript程式碼,進而在Node.js上執行,安裝TypeScript可以透過yarn或者npm。

安裝之前必須進行初始化,以生成package.json檔案,請移動到專案的目標資料夾,打開Terminal輸入以下指令。

yarn init -y

(-y 代表全部採用預設值,未來仍然可以修改)

接著進行TypeScript轉譯器的安裝,-D 代表這是只在開發時使用的套件。

yarn add -D typescript

這樣就算是安裝完成了,但是我們還有幾件事情要做,首先是設定我們的tsconfig.json、package.json。

tsconfig.json & package.json設定

輸入以下指令:

yarn tsc --init

輸入指令後,會產生一個tsconfig.json檔案,裡面包含我們的所有TypeScript設定,打開tsconfig.json,我們把outDir與rootDir這兩行取消註解並修改為:

"outDir": "./dist",
"rootDir": "./"

這樣可以指定我們轉譯出來的JavaScript檔案要放在哪裡。接著打開package.json,裡面應該會長這樣:

為了方便我們之後的開發,我們要手動加入一些指令:

"scripts":{"watch": "tsc -w", "start": "node dist/src/index.js"},

如此一來我們的package.json應該會變成這樣:

第一個指令是告訴tsc(TypeScript Compiler)我們要監視所有TypeScript檔案的變化,並隨時轉譯,我們可以輸入以下指令來執行它:

yarn watch 

第二個指令則是讓Node.js執行我們放在dist/src/中的index.js檔案。

yarn start

這樣設定就完成了。

資料夾結構

要開始寫程式碼前,還要調整我們的資料夾結構,我們在當前目錄下建立一個名為src的資料夾,裡面將會放上我們的TypeScript程式碼,未來我們針對不同的設計模式來創建對應的資料夾,也都會放在裡面。

這時的資料夾結構應該是這樣

Hello World!

所有設定都處理完了,終於可以開始動手寫程式碼了,我們在src資料夾中,創建一個index.ts檔案,並在裡面輸入:

console.log('hello world');

接著打開Terminal,輸入我們的watch指令:

yarn watch

就可以看到dist/src資料夾出現了,裡面也有剛轉譯好,熱呼呼的index.js。

"use strict";console.log('hello world');

此時我們的Terminal正在努力監視我們的TypeScript檔案,我們可以選擇同時按下ctrl+c來關閉監視任務,也可以按下ctrl+shift+`開啟新的Terminal來輸入我們的start指令:

yarn start

應該就可以看到Terminal上面的hello world了。

下一篇文章 <SOLID原則>

如果對於我的文章或程式碼有任何問題,歡迎在下方留言指教。

若有幫助到你,也歡迎給文章拍手一下,讓我在寫文章的路上更加進步!

--

--

Huashen

嗨,我是Huashen,一位軟體工程師,這裡會記錄我的程式設計心得與筆記。