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

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

第一個(gè)程序

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

npminstalltypescript-g

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

tsc-version

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

letv="hello";

console.log(v);

進(jìn)入控制臺(tái)，輸入tschello.ts，會(huì)生成對(duì)應(yīng)的hello.js，輸入nodehello.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)在我們看如何在VSCode中進(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ù)的名稱(chēng)是不一樣的，將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ù):

exportfunctionmyName(){

return"張三";

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

import{myName}from'./myfunctions'

letv="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作為打包工具，在VSCode中創(chuàng)建TypeScript的客戶端項(xiàng)目骨架。

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

{

"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

接下來(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:

constpath=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:[

//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)境基本完成，可以寫(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è)小的模塊：

exportfunctionmyName(){

return"張三";

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

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

titleTypeScript測(cè)試項(xiàng)目/title

/head

body