一、NPM 安裝 TypeScript

1、安裝TypeScript包

如果你的本地環(huán)境已經(jīng)安裝了 npm 工具，可以直接使用npm工具來安裝TypeScript，這個(gè)TypeScript的Package其實(shí)也是一個(gè)Compiler，可以通過這個(gè)Complier將typescript編譯成javascript。

可以使用以下命令來安裝：

npm install -g typescript

安裝完成后我們可以使用 tsc 命令來執(zhí)行 TypeScript 的相關(guān)代碼，以下是查看版本號(hào)：

tsc -v
# Version 3.2.2

2、將 TypeScript 轉(zhuǎn)換為 JavaScript 代碼(編譯)

TypeScript 轉(zhuǎn)換為 JavaScript 過程如下圖：

然后我們新建一個(gè) my1.ts 的文件，通常我們使用 .ts 作為 TypeScript 代碼文件的擴(kuò)展名。代碼如下：

var message:string = "Hello World" 
console.log(message)

然后執(zhí)行以下命令將 TypeScript 轉(zhuǎn)換為 JavaScript 代碼：

tsc my1.ts

這時(shí)候再當(dāng)前目錄下（與 my1.ts 同一目錄）就會(huì)生成一個(gè) my1.js 文件，代碼如下：

var message = "Hello World";
console.log(message);

注意：我們可以同時(shí)編譯多個(gè) ts 文件：

tsc file1.ts file2.ts file3.ts

tsc 常用編譯參數(shù)如下表所示：

3、使用 node 命令來執(zhí)行JavaScript

執(zhí)行 my1.js 文件：

node my1.js 
# Hello World

二、vscode 直接調(diào)試 ts 文件

很多 IDE 都有支持 TypeScript 插件，如：Visual Studio，Sublime Text 2，WebStorm / PHPStorm，Eclipse 等。

我們可以在左側(cè)窗口中點(diǎn)擊當(dāng)前編輯的代碼文件，選擇 open in command prompt（在終端中打開），

這時(shí)候我們就可以在屏幕的右側(cè)下半部分使用 tsc 命令來執(zhí)行 TypeScript 文件代碼了。

如果中斷選擇PowerShell，則可能出現(xiàn)以下錯(cuò)誤：

無法加載文件C:\Users\TANG\AppData\Roaming\npm\nrm.ps1，因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本

可以通過以下方法解決：

• 1.win s 搜索powershell 以管理身份運(yùn)行
• 2.使用set-ExecutionPolicy RemoteSigned命令將計(jì)算機(jī)上的執(zhí)行策略更改為 RemoteSigned,輸入Y確定

1、安裝 typings

typings 主要是用來獲取.d.ts文件。當(dāng)typescript使用一個(gè)外部JavaScript庫時(shí),會(huì)需要這個(gè)文件，當(dāng)然好多的編譯器都用它來增加智能感知能力。

npm install -g typings

2、在 VSCode 中集成 ESLint 檢查

在編輯器中集成 ESLint 檢查，可以在開發(fā)過程中就發(fā)現(xiàn)錯(cuò)誤，極大的增加了開發(fā)效率。

要在 VSCode 中集成 ESLint 檢查，我們需要先安裝 ESLint 插件，點(diǎn)擊「擴(kuò)展」按鈕，搜索 ESLint，然后安裝即可。

VSCode 中的 ESLint 插件默認(rèn)是不會(huì)檢查 .ts 后綴的，需要在「文件 => 首選項(xiàng) => 設(shè)置」中，添加以下配置：

{
  "eslint.validate": [
    "typescript"
  ]
}

創(chuàng)建test項(xiàng)目

輸入：

npm init

創(chuàng)建依賴包文件：package.json

3、創(chuàng)建并配置 tsconfig.json

在項(xiàng)目的根目錄下，執(zhí)行下面的命令：

tsc –-init

自動(dòng)創(chuàng)建了一個(gè)TypeScript配置文件：tsconfig.json

主要是將 sourceMap 設(shè)置為true。同時(shí)注意輸出和輸入目錄。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": true,
        "outDir": "./dist",
        "sourceMap": true
    },
    "include": [
        "src/**/*"
    ]
}

4、使用自動(dòng)實(shí)時(shí)編譯

利用 vscode 的 tasks，可以自動(dòng)將 ts 編譯為 js。也可以使用別的方式編譯，如:gulp,webpack 等。

Ctrl + Shift + B 運(yùn)行構(gòu)建任務(wù)，將顯示以下“tsc構(gòu)建- tsconfig.json”選項(xiàng)：

或者點(diǎn)擊“終端”菜單中的“運(yùn)行任務(wù)”

自動(dòng)添加添加任務(wù)文件: /.vscode/tasks.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for thedocumentation about the tasks.json format
   "version": "0.1.0",
   "command": "tsc",
   "isShellCommand": true,
   //-p 指定目錄；-w watch,檢測文件改變自動(dòng)編譯
   "args": ["-p", ".","-w"],
   "showOutput": "always",
   "problemMatcher": "$tsc"
}

然后，Ctrl + Shift + B 運(yùn)行構(gòu)建任務(wù)，將顯示以下選項(xiàng)

選擇 “tsc: 監(jiān)視 - tsconfig.json ”，回車運(yùn)行之后，編輯的代碼保存之后，就會(huì)自動(dòng)編譯。

5、配置調(diào)試

調(diào)試時(shí)，需要配置 vscode 的 launch.json 文件。這個(gè)文件記錄啟動(dòng)選項(xiàng)。
添加或編輯文件 /.vscode/launch.json。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/dist/main.js",
            "args": [],
            "cwd": "${workspaceRoot}",
            "protocol": "inspector"
        }
    ]
}

注意 : program 需設(shè)置為你要調(diào)試的 ts 生成的對應(yīng)的 js。
假如需要調(diào)試 /src/main.ts,則此處為 ${workspaceRoot}/dist/main.js。

6、調(diào)試

打開 main.ts，在左側(cè)添加斷點(diǎn)，進(jìn)行調(diào)試。

三、使用 ts-node 調(diào)試 ts 文件（方便）

https://github.com/TypeStrong/ts-node

ts-node 調(diào)試 ts 文件時(shí)，不會(huì)顯式生成 js。假如你不想編譯為 js 后 再調(diào)試，可以考慮這種方式。

1、安裝 npm 依賴包（本地非全局）

npm install typescript npm 
install ts-node

2、配置 launch.json

打開 DEBUG 界面，添加 配置
或者編輯 /.vscode/launch.json。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "<code>Current TS File</code>",
            "runtimeArgs": [
                "-r",
                "ts-node/register"
            ],
            "cwd": "${workspaceRoot}",
            "protocol": "inspector",
            "args": [
                "${relativeFile}"
            ]
        }
    ]
}

或者將args改成以下，調(diào)試單獨(dú)ts文件

"args": [
        "${workspaceFolder}/src/index.ts"
      ]

3、調(diào)試

• 打開要調(diào)試的 ts 文件，添加debugger。
• 打開 debug 界面。
• 在DEBUG后 選擇 launch.json 中對應(yīng)的配置，此處為Current TS File。
• 點(diǎn)擊運(yùn)行按鍵或者按 F5 運(yùn)行。

到此這篇關(guān)于TypeScript開發(fā)環(huán)境安裝的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論