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

第VSCode開發(fā)TypeScript的實現(xiàn)步驟目錄第一個程序配置文件tsconfig.json調試模塊化使用Webpack打包客戶端代碼TypeScript是JaveScript的超集，為JavaScript增加了很多特性，它可以編譯成純JavaScript在瀏覽器上運行。TypeScript已經成為各種流行框架和前端應用開發(fā)的首選。本文概要介紹使用VSCode開發(fā)TypeScript的過程。

第一個程序

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

npminstalltypescript-g

安裝完成后，運行下面代碼看一下版本:

tsc-version

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

letv="hello";

console.log(v);

進入控制臺，輸入tschello.ts，會生成對應的hello.js，輸入nodehello.js，會運行代碼。

配置文件tsconfig.json

現(xiàn)在我們創(chuàng)建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文件。

調試

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

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

{

"version":"2.0.0",

"tasks":[

"type":"typescript",

"tsconfig":"tsconfig.json",

"problemMatcher":[

"$tsc"

"group":"build",

"label":"tsc:構建-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)生成的兩個文件中，任務的名稱是不一樣的，將task.json中的tsc:構建-tsconfig.json修改為tsc:build-tsconfig.json，再次按F5運行，這次可以了。試著加個斷點，也可以：

模塊化

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

exportfunctionmyName(){

return"張三";

修改helloworld.ts，調用這個函數：

import{myName}from'./myfunctions'

letv="hello"+myName();

console.log(v);

使用Webpack打包客戶端代碼

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

首先，為我們的測試項目創(chuàng)建一個目錄，在控制臺進入這個目錄，運行code.啟動vscode。在終端中執(zhí)行npminit，創(chuàng)建項目的packeg.json，內容如下：

{

"name":"mydevnew",

"version":"1.0.0",

"description":"mynewtypescriptproject",

"main":"index.js",

"scripts":{

"test":"echo\"Error:notestspecified\"exit1"

"author":"",

"license":"ISC"

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

npminstall--save-devwebpackwebpack-clitypescriptts-loaderwebpack-dev-serversource-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:

constpath=require('path');

module.exports={

mode:'development',

entry:'./src/main.ts',//入口文件

output:{

filename:'main.js',//編譯出來的文件名

path:path.resolve(__dirname,'dist'),//編譯文件所在目錄

publicPath:'/dist/',//靜態(tài)資源目錄,可以設為“編譯文件所在目錄”,代碼自動編譯，網頁自動刷新

module:{

rules:[

//Forournormaltypescript

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測試項目");

console.log(myName());

document.body.innerHTML="你好！"+myName();

hello.ts是一個小的模塊：

exportfunctionmyName(){

return"張三";

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

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

titleTypeScript測試項目/title

/head

body