快捷導(dǎo)航

VSCode開發(fā)TypeScript的實(shí)現(xiàn)步驟

更新時間：2022年02月21日 10:36:01 作者：尋找無名的特質(zhì)

本文主要介紹了VSCode開發(fā)TypeScript的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

第一個程序

在VS Code中開發(fā)TypeScript，首先要安裝TypeScript，這里使用npm安裝：

npm install typescript -g

安裝完成后，運(yùn)行下面代碼看一下版本:

tsc -version

進(jìn)入控制臺，創(chuàng)建一個文件夾，進(jìn)入這個文件夾，運(yùn)行命令code .。這會啟動VS Code，并且打開當(dāng)前的文件夾。在文件夾中創(chuàng)建一個文件hello.ts，寫幾句代碼：

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

進(jìn)入控制臺，輸入 tsc hello.ts，會生成對應(yīng)的hello.js，輸入node hello.js，會運(yùn)行代碼。

配置文件tsconfig.json

現(xiàn)在我們創(chuàng)建TypeScript項(xiàng)目的配置文件tsconfig.json，最簡單的內(nèi)容如下：

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

編輯這個文件時，VSCode的智能提示很有幫助。常用的設(shè)置還有：js代碼的輸出路徑、是否可以包括js文件、調(diào)試時使用的代碼映射等等，下面是復(fù)雜一些的配置：

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

這里輸出路徑設(shè)置為out，我們把前面編譯生成的js文件刪掉，重新編譯一下，注意，由于有了tsconfig.json文件，在終端中只要輸入tsc就可以了。

可以看到，編譯的文件保存在out子目錄中，并且多了map文件。

調(diào)試

現(xiàn)在我們看如何在VS Code中進(jìn)行調(diào)試，在前面的ts代碼界面，按F5調(diào)試，會出現(xiàn)選擇環(huán)境的提示框，選擇Node.js，出現(xiàn)下面的錯誤：

選擇“配置任務(wù)”，然后選擇“tsc: 構(gòu)建 - tsconfig.json”，這時，會創(chuàng)建新的文件夾.vscode，在這個文件夾中創(chuàng)建task.json，內(nèi)容如下：

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

再次按F5，仍然出現(xiàn)上面的錯誤。選擇添加配置，會創(chuàng)建“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，仍然會出現(xiàn)錯誤，檢查一下，會發(fā)現(xiàn)生成的兩個文件中，任務(wù)的名稱是不一樣的，將task.json中的“tsc: 構(gòu)建 - tsconfig.json”修改為“tsc: build - tsconfig.json”，再次按F5運(yùn)行，這次可以了。試著加個斷點(diǎn)，也可以：

模塊化

我們希望模塊化開發(fā)我們的代碼，將代碼分割到獨(dú)立的文件中，便于分別開發(fā)與調(diào)試。我們希望顯示地聲明引用，避免全局變量函數(shù)等等帶來的混亂。這時，我們需要使用export聲明可以被其它模塊使用的函數(shù)和變量，在使用這些函數(shù)和變量的模塊中，使用import導(dǎo)入需要的函數(shù)、變量等等。我們創(chuàng)建一個新的文件myfunctions.ts，里面只有一個函數(shù):

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

修改helloworld.ts，調(diào)用這個函數(shù)：

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

使用Webpack打包客戶端代碼

前幾部分針對的是服務(wù)端開發(fā)，對于客戶端的代碼，我們希望1）可以打包為單獨(dú)的js文件進(jìn)行發(fā)布；2）可以方便地運(yùn)行客戶端程序；3）可以方便地進(jìn)行調(diào)試。這里我們使用Webpack作為打包工具，在VS Code中創(chuàng)建TypeScript的客戶端項(xiàng)目骨架。

首先，為我們的測試項(xiàng)目創(chuàng)建一個目錄，在控制臺進(jìn)入這個目錄，運(yùn)行code . 啟動vs code。在終端中執(zhí)行npm init，創(chuàng)建項(xiàng)目的packeg.json，內(nèi)容如下：

{
  "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"
}

然后，安裝必要的程序包，在終端中執(zhí)行：

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/',//靜態(tài)資源目錄,可以設(shè)為“編譯文件所在目錄”, 代碼自動編譯，網(wǎng)頁自動刷新
    },
    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",

到此，配置環(huán)境基本完成，可以寫代碼了，創(chuàng)建src目錄用來保存代碼，在src中創(chuàng)建main.ts和hello.ts，代碼如下：

import {myName} from "hello"
console.log("TypeScript測試項(xiàng)目");
console.log(myName());
document.body.innerHTML="你好！"+myName();

hello.ts是一個小的模塊：

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

在根目錄創(chuàng)建一個引導(dǎo)頁面index.html：

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

<head>
    <meta charset="UTF-8">
    <title>TypeScript測試項(xiàng)目</title>
</head>

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

</html>

這時，我們可以在終端中運(yùn)行 npm run dev，啟動webpack 的web server，在瀏覽器中，輸入http://localhost:8888，可以看到，已經(jīng)可以運(yùn)行了：