在sublime text 3 編輯器內搭建TypeScript開發環境

原文出處:https://blog.csdn.net/u012510478/article/details/54930554

Typescript 是 JavaScript 的一個超集,在 ECMAScript6 基礎上演化並吸收了生成 Javascript 類別和接口的一些特性。它編譯後生成普通的 JavaScript 代碼。TypeScript 支持任意瀏覽器,任意環境,任意系統,並且是開源的。

這篇文章我們使用 Sublime 來作爲TS的開發工具。

首先安裝TypeScript,這裏假設你的電腦上已經安裝了nodejs和npm,打開命令行窗口,運行命令:

npm install -g typescript

稍作等待,安裝完畢之後做個小測試。新建一個文件夾,在文件夾中新建一個文件命名爲test.ts,代碼如下:

function greet(msg: string){
    console.log("Say " + msg);
}

greet("hello!");

打開命令行窗口,進入 test.ts 文件所在目錄,運行命令

tsc test.ts

對 .ts 文件進行編譯,編譯成功後可以看到在同級目錄下生成了一個 test.js 文件。

沒錯,TypeScript已經安裝成功了,就是這麼簡單!

然後爲Sublime添加TypeScript支持。TypeScript 包可以通過 Package Control 得到。打開Sublime,preference -> Package Control,找到 Install Package,輸入 TypeScript,找到 TypeScript 點擊進行安裝,稍等一會,待安裝完畢,進行一下測試。新建一個文件命名爲 hello.ts,輸入跟剛纔相同的代碼,你會發現,自動補全有了,代碼高亮有了,自動檢測語法錯誤也有了,很爽啊有木有。

接下來我們創建一個 TypeScript 項目。從1.5版本開始,TypeScript 支持一個名爲 tsconfig.json 的輕量級項目文件,我們可以在前面的文件夾中添加一個 tsconfig.json 文件,代碼如下:

{
    "compilerOptions":{
        "sourceMap": true
    },
    "files": ["hello.ts"]
}

tsconfig.json 文件有兩個部分:傳遞給編譯器的選項和文件列表。例子中將sourceMap設爲TRUE,TypeScript的編譯器會創建一個 .map 文件,通過它我們能直接調試 TypeScript 而不用將其編譯成 JavaScript 代碼。files 選項列出需要編譯的 .ts 文件。若不指定此選項,tsconfig.json 會編譯該目錄下的所有 .ts 文件。

現在萬事俱備,打開命令行窗口,cd 到我們的項目路徑下,直接運行 tsc 命令,可以看到生成了 hello.js 和 hello.js.map 兩個文件。

下面我們看看怎樣用 .map 文件來對 TypeScript 代碼進行調試。新建一個 HTML 文件命名爲 test.html,代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
</head>

<body>
    <script type="text/javascript" src="hello.js"></script>
</body>
</html>

在瀏覽器中打開此文件, F12,看到控制檯已經打印出了 Say hello!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章