快捷導(dǎo)航

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

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

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

TypeScript是JaveScript的超集，為JavaScript增加了很多特性，它可以編譯成純JavaScript在瀏覽器上運(yùn)行。TypeScript已經(jīng)成為各種流行框架和前端應(yīng)用開(kāi)發(fā)的首選。本文概要介紹使用VS Code開(kāi)發(fā)TypeScript的過(guò)程。

第一個(gè)程序

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

npm install typescript -g

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

tsc -version

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

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

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

配置文件tsconfig.json

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

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

編輯這個(gè)文件時(shí)，VSCode的智能提示很有幫助。常用的設(shè)置還有：js代碼的輸出路徑、是否可以包括js文件、調(diào)試時(shí)使用的代碼映射等等，下面是復(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)試，會(huì)出現(xiàn)選擇環(huán)境的提示框，選擇Node.js，出現(xiàn)下面的錯(cuò)誤：

選擇“配置任務(wù)”，然后選擇“tsc: 構(gòu)建 - tsconfig.json”，這時(shí)，會(huì)創(chuàng)建新的文件夾.vscode，在這個(gè)文件夾中創(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)上面的錯(cuò)誤。選擇添加配置，會(huì)創(chuàng)建“launch.json”文件：

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

再次按F5，仍然會(huì)出現(xiàn)錯(cuò)誤，檢查一下，會(huì)發(fā)現(xiàn)生成的兩個(gè)文件中，任務(wù)的名稱是不一樣的，將task.json中的“tsc: 構(gòu)建 - tsconfig.json”修改為“tsc: build - tsconfig.json”，再次按F5運(yùn)行，這次可以了。試著加個(gè)斷點(diǎn)，也可以：

模塊化

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

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

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

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

使用Webpack打包客戶端代碼

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

首先，為我們的測(cè)試項(xiàng)目創(chuàng)建一個(gè)目錄，在控制臺(tái)進(jìn)入這個(gè)目錄，運(yùn)行code . 啟動(dòng)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

接下來(lái)，添加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',//編譯出來(lái)的文件名
        path: path.resolve(__dirname, 'dist'),//編譯文件所在目錄   
        publicPath: '/dist/',//靜態(tài)資源目錄,可以設(shè)為“編譯文件所在目錄”, 代碼自動(dòng)編譯，網(wǎng)頁(yè)自動(dò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)境基本完成，可以寫(xiě)代碼了，創(chuàng)建src目錄用來(lái)保存代碼，在src中創(chuàng)建main.ts和hello.ts，代碼如下：

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

hello.ts是一個(gè)小的模塊：

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

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

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

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

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

</html>

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

如果只是希望編譯，運(yùn)行npm run build,生成js文件保存在dist目錄中，index.html是引導(dǎo)頁(yè)面。

到此這篇關(guān)于VSCode開(kāi)發(fā)TypeScript的實(shí)現(xiàn)步驟的文章就介紹到這了,更多相關(guān)VSCode開(kāi)發(fā)TypeScript內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: