Typescript入門-Day3：環境建置

環境建置

安裝Node.js和npm

1. 下載Node.js：
2. • 進入Node.js官方網站：Node.js
   • 下載並安裝最新的LTS版本，這個版本包含npm（Node Package Manager）。
2. 驗證安裝：
3. • 打開命令提示符（Command Prompt）或終端（Terminal），輸入以下命令來檢查Node.js和npm是否安裝成功：

     node -v
     npm -v
     

安裝TypeScript

1. 全局安裝TypeScript編譯器（tsc）：
2. • 使用npm來全局安裝TypeScript編譯器：

     npm install -g typescript
     

2. 驗證安裝：
3. • 輸入以下命令來檢查TypeScript編譯器是否安裝成功：

     tsc -v
     

建立TypeScript項目

1. 創建項目目錄：
2. • 創建一個新的項目目錄並進入該目錄：

     mkdir my-typescript-project
     cd my-typescript-project
     

2. 初始化npm：
3. • 初始化npm，這會生成一個package.json文件：

     npm init -y
     

3. 安裝TypeScript作為項目依賴：
4. • 將TypeScript作為開發依賴安裝在項目中：

     npm install typescript --save-dev
     

4. 配置TypeScript：
5. • 創建一個tsconfig.json文件來配置TypeScript編譯器選項：

     npx tsc --init
     
     

   • tsconfig.json文件的基本配置如下：

     {
       "compilerOptions": {
         "target": "es5",
         "module": "commonjs",
         "strict": true,
         "esModuleInterop": true,
         "skipLibCheck": true,
         "forceConsistentCasingInFileNames": true,
         "outDir": "./dist"
       },
       "include": ["src/**/*"]
     }
     
     

設置編輯器

1. 選擇編輯器：
2. • 建議使用Visual Studio Code（VSCode），因為它對TypeScript有良好的支持。
2. 安裝TypeScript插件：
3. • 在VSCode中安裝TypeScript插件來提供代碼自動補全、錯誤檢查和重構功能。

編寫和編譯TypeScript代碼

1. 創建源文件目錄：
2. • 在項目目錄中創建src目錄：

     mkdir src
     

2. 編寫TypeScript代碼：
3. • 在src目錄中創建一個TypeScript文件，例如index.ts，並編寫一些示例代碼：

     // src/index.ts
     let message: string = "Hello, TypeScript!";
     console.log(message);
     

3. 編譯TypeScript代碼：
4. • 使用TypeScript編譯器來編譯src目錄下的所有TypeScript文件：

     npx tsc
     

   • 編譯完成後，編譯器會在dist目錄中生成相應的JavaScript文件。
4. 運行編譯後的JavaScript代碼：
5. • 使用Node.js運行生成的JavaScript文件：

     node dist/index.js
     

至此，你已經成功建置了一個TypeScript開發環境，並且能夠編寫、編譯和運行TypeScript代碼。接下來可以根據需要安裝其他庫和框架來擴展你的項目。