VS Code開發TypeScript

尋找無名的特質發表於2022-02-21
TypeScript

TypeScript是JaveScript的超集，為JavaScript增加了很多特性，它可以編譯成純JavaScript在瀏覽器上執行。TypeScript已經成為各種流行框架和前端應用開發的首選。本文概要介紹使用VS Code開發TypeScript的過程。

第一個程式

在VS Code中開發TypeScript，首先要安裝TypeScript，這裡使用npm安裝：

npm install typescript -g

安裝完成後，執行下面程式碼看一下版本:

tsc -version

進入控制檯，建立一個資料夾，進入這個資料夾，執行命令code .。這會啟動VS Code，並且開啟當前的資料夾。在資料夾中建立一個檔案hello.ts，寫幾句程式碼：

let v="hello";
console.log(v);

進入控制檯，輸入 tsc hello.ts，會生成對應的hello.js，輸入node hello.js，會執行程式碼。

配置檔案tsconfig.json

現在我們建立TypeScript專案的配置檔案tsconfig.json，最簡單的內容如下：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs"
  }
}

編輯這個檔案時，VSCode的智慧提示很有幫助。常用的設定還有：js程式碼的輸出路徑、是否可以包括js檔案、除錯時使用的程式碼對映等等，下面是複雜一些的配置：

{
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "allowJs": true,
      "sourceMap": true,
      "outDir": "out"
    }
  }

這裡輸出路徑設定為out，我們把前面編譯生成的js檔案刪掉，重新編譯一下，注意，由於有了tsconfig.json檔案，在終端中只要輸入tsc就可以了。

可以看到，編譯的檔案儲存在out子目錄中，並且多了map檔案。

除錯

現在我們看如何在VS Code中進行除錯，在前面的ts程式碼介面，按F5除錯，會出現選擇環境的提示框，選擇Node.js，出現下面的錯誤：


選擇“配置任務”，然後選擇“tsc: 構建 - tsconfig.json”，這時，會建立新的資料夾.vscode，在這個資料夾中建立task.json，內容如下：

{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "typescript",
			"tsconfig": "tsconfig.json",
			"problemMatcher": [
				"$tsc"
			],
			"group": "build",
			"label": "tsc: 構建 - tsconfig.json"
		}
	]
}

再次按F5，仍然出現上面的錯誤。選擇新增配置，會建立“launch.json”檔案：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "啟動程式",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\helloworld.ts",
            "preLaunchTask": "tsc: build - tsconfig.json",
            "outFiles": [
                "${workspaceFolder}/out/**/*.js"
            ]
        }
    ]
}

再次按F5，仍然會出現錯誤，檢查一下，會發現生成的兩個檔案中，任務的名稱是不一樣的，將task.json中的“tsc: 構建 - tsconfig.json”修改為“tsc: build - tsconfig.json”，再次按F5執行，這次可以了。試著加個斷點，也可以：

模組化

我們希望模組化開發我們的程式碼，將程式碼分割到獨立的檔案中，便於分別開發與除錯。我們希望顯示地宣告引用，避免全域性變數函式等等帶來的混亂。這時，我們需要使用export宣告可以被其它模組使用的函式和變數，在使用這些函式和變數的模組中，使用import匯入需要的函式、變數等等。我們建立一個新的檔案myfunctions.ts，裡面只有一個函式:

export function myName(){
    return "張三";
}

修改helloworld.ts，呼叫這個函式：

import {myName} from './myfunctions'
let v="hello"+myName();
console.log(v);

使用Webpack打包客戶端程式碼

前幾部分針對的是服務端開發，對於客戶端的程式碼，我們希望1）可以打包為單獨的js檔案進行釋出；2）可以方便地執行客戶端程式；3）可以方便地進行除錯。這裡我們使用Webpack作為打包工具，在VS Code中建立TypeScript的客戶端專案骨架。

首先，為我們的測試專案建立一個目錄，在控制檯進入這個目錄，執行code . 啟動vs code。在終端中執行npm init，建立專案的packeg.json，內容如下：

{
  "name": "mydevnew",
  "version": "1.0.0",
  "description": "my new typescript project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

然後，安裝必要的程式包，在終端中執行：

npm install --save-dev webpack webpack-cli typescript ts-loader  webpack-dev-server source-map-loader

接下來，新增typescript的配置檔案tsconfig.json：

{
    "compilerOptions": {
        "module": "es6",
        "target": "es5",
        "sourceMap": true,
        "declaration": true,
        "declarationDir": "./dist/typing",
        "lib": [
            "webworker",
            "es6",
            "es5",
            "dom"
          ]
    },
    
    "exclude": [
        "node_moudles",
        "dist"
    ]
}

還要新增webpack.config.js:

const path = require('path'); 
module.exports = {
    mode: 'development',
    entry: './src/main.ts',//入口檔案
    output: {
        filename: 'main.js',//編譯出來的檔名
        path: path.resolve(__dirname, 'dist'),//編譯檔案所在目錄   
        publicPath: '/dist/',//靜態資源目錄,可以設為“編譯檔案所在目錄”, 程式碼自動編譯，網頁自動重新整理
    },
    module: {
        rules: [
            {
                // For our normal typescript
                test: /\.ts?$/,
                use: [
                    {
                        loader: 'ts-loader'
                    }
                ],
                exclude: /(?:node_modules)/,
            },
        ]
    },
    resolve: {
        modules: [
            'src',
            'node_modules'
        ],
        extensions: [
            '.js',
            '.ts'
        ]
    },
    devServer: {
        static: {
            directory: path.join(__dirname, ''),
          },
        hot: true,
        compress: true,
        host: 'localhost',
        port: 8888
  }, 
  devtool:'source-map',
 };

修改package.json,在scritps中增加：

    "build": "webpack",
    "dev": "webpack-dev-server",

到此，配置環境基本完成，可以寫程式碼了，建立src目錄用來儲存程式碼，在src中建立main.ts和hello.ts，程式碼如下：

import {myName} from "hello"
console.log("TypeScript測試專案");
console.log(myName());
document.body.innerHTML="你好！"+myName();

hello.ts是一個小的模組：

export function myName(){
    return "張三";
}

在根目錄建立一個引導頁面index.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>TypeScript測試專案</title>
</head>

<body>
    <script src="dist/main.js"></script>
</body>

</html>

這時，我們可以在終端中執行 npm run dev，啟動webpack 的web server，在瀏覽器中，輸入http://localhost:8888，可以看到，已經可以執行了：

如果只是希望編譯，執行npm run build,生成js檔案儲存在dist目錄中，index.html是引導頁面。

相關文章