閱讀目錄
[環境搭建]
[第一部分、簡介]
[第二部分、環境準備]
[第三部分、使用Visual Studio Code進行開發]
[其他相關內容]
[環境搭建]
本篇將簡單介紹一下TypeScript，并記錄開發環境的搭建、使用Visual Studio Code進行一個簡單的Demo開發過程。
第一部分、簡介
TypeScript是一種由微軟開發的自由和開源的編程語言。是JavaScript的一個超集。它在保留JavaScript語言本身特性的基礎上添加了大量靜態語言具有的一些特性，包括但不限于以下幾點：
可選的靜態類型
枚舉、接口和類
命名空間
模塊
Lambda表達式
編譯時類型檢查
在2013年6月微軟正式發布了0.9版。之后在不斷更新的過程中逐漸支持ECMAScript 2015（ES6）標準。
通過利用靜態語言的特性和新標準，使JavaScript開發變得越來越簡單。同時也很好的符合當前前端開發的模塊化、工程化的開發方式和潮流。
第二部分、環境準備
一、安裝Node.js
安裝文件下載地址：Node.js Downloads。TypeScript源碼需要進行編譯以后才能運行，Node.js提供了編譯環境。
二、安裝TypeScript編譯工具
安裝好Node.js后，打開cmd窗口，輸入以下命令
npm install -g typescript
使用npm包管理工具下載TypeScript包并在全局環境下安裝，安裝成功后就可以通過 tsc 命令編譯TypeScript源碼。
可以通過 tsc -v 命令查看當前TypeScript版本。當前最新版本是：1.8
第三部分、使用Visual Studio Code進行開發
以下目錄結構是一個簡單的Demo的結構
主要包括但不限于以下幾個目錄和文件
/ts：TypeScript源碼文件存放的文件夾
/js：編譯之后生成的JavaScript文件存放的文件夾
tsconfig.json：TypeScript編譯配置文件
另外.vscode是VS Code開發工具特有的文件夾，主要用來存放調試時需要用到的配置文件。
一、tsconfig.json
{
"compilerOptions": {
"target": "es5",
"noImplicitAny": false,
"module": "commonjs",
"removeComments": true,
"sourceMap": false,
"outDir": "js"
},
"include":[
"ts"
],
"exclude": [
"js"
]
}
有幾個重要的屬性需要解釋一下：
target：編譯之后生成的JavaScript文件需要遵循的標準。有三個候選項：es3、es5、es2015。
noImplicitAny：為false時，如果編譯器無法根據變量的使用來判斷類型時，將用any類型代替。為true時，將進行強類型檢查，無法推斷類型時，提示錯誤。
module：遵循的JavaScript模塊規范。主要的候選項有：commonjs、AMD和es2015。為了后面與node.js保持一致，我們這里選用commonjs。
removeComments：編譯生成的JavaScript文件是否移除注釋。
sourceMap：編譯時是否生成對應的source map文件。這個文件主要用于前端調試。當前端js文件被壓縮引用后，出錯時可借助同名的source map文件查找源文件中錯誤位置。
outDir：編譯輸出JavaScript文件存放的文件夾。
include、exclude：編譯時需要包含/剔除的文件夾。
二、添加Demo源文件
在ts文件夾添加 app.ts 和 demo.ts 兩個源文件，目錄結構和源文件內容如下
三、配置編譯和調試文件
在.vscode里添加tasks.json文件
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", "."],
"showOutput": "always",
"problemMatcher": "$tsc"
}
切換到調試模式，點擊配置按鈕，選擇Node.js環境。因為接下來的Demo演示都將在Node.js環境下進行。
修改生成的launch.json文件內容，指定啟動入口文件的路徑
{
"version": "0.2.0",
"configurations": [
{
"name": "啟動",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/js/app.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": false,
"outDir": null
},
{
// ......
},
{
// ......
}
]
}
以上配置完成后，使用 Ctrl+Shift+B 啟動編譯，如果VS Code的OUTPUT窗口沒有任何異常信息顯示，則表示編譯成功。在js文件夾里將會生成編譯后的JavaScript文件
demo.js
var Demo = (function () {
function Demo(a, b) {
this.a = a;
this.b = b;
}
Demo.prototype.sum = function () {
return this.a + this.b;
};
return Demo;
}());
exports.Demo = Demo;
app.js
"use strict";
var demo_1 = require('./models/demo');
var demo = new demo_1.Demo(1, 2);
console.log(demo.sum());
對比TypeScript源碼文件和生成之后的JavaScript文件，結構發生了較大變化。
啟動調試，查看調試控制臺，輸出了正確的計算結果：3
其他相關內容
當前非常流行的JavaScript模塊規范主要遵循以下兩種：
CommonJS：同步模式加載模塊，主要應用在服務端。Node.js模塊化就遵循此規范。使用方式： require('模塊名') 。
AMD：異步模式加載模塊，主要應用在瀏覽器端。RequireJS遵循此標準。使用方式： define(['模塊名1', ...], function('模塊參數1', ....) { })
創建第一個TypeScript文件
- 新建一個目錄，在該目錄下新建一個文件HelloWorld.ts
- 打開文件在文件內輸入如下內容，涉及部分ts的語法就不講了：
class Test {
private name:string = "Hello world";
public constructor () {
console.log("constructor==========>>>" + this.name);
}
public testFun():void {
console.log("testFun===========>>>" + this.name);
}
}
function testCallFun():void {
let t = new Test();
t.testFun();
}
- 編譯ts文件
>tsc HelloWorld.ts
- 這樣就將ts文件編譯成了js文件，內容如下：
var Test = (function () {
function Test() {
this.name = "Hello world";
console.log("constructor==========>>>" + this.name);
}
Test.prototype.testFun = function () {
console.log("testFun===========>>>" + this.name);
};
return Test;
}());
function testCallFun() {
var t = new Test();
t.testFun();
}
- 這里將這個js文件放到html頁面上進行測試，控制臺輸出如下：
constructor==========>>>Hello world
testFun===========>>>Hello world
這樣一套完整的工作流就完成了，生成的js文件可以用在各種項目中，Egret項目、cocos項目或者Web項目都可以。通過這種方式可以積累自己的類庫，方便做項目時快速開發。
工程配置
tsconfig.json
- 如果一個目錄下存在一個tsconfig.json文件，那么它意味著這個目錄是TypeScript項目的根目錄。 tsconfig.json文件中指定了用來編譯這個項目的根文件和編譯選項。
- 在執行tsc時，編譯器會在當前目錄向父級目錄逐級查找tsconfig.json文件，也可以使用命令行參數–project（或-p）指定一個包含tsconfig.json文件的目錄
- 例子:
{
"compilerOptions": {
"module": "system",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"outFile": "../built/ituuzx/itz.js"
},
"include": [
"**/*.ts" //include是指編譯包含的文件或目錄，這是配置的是包括子目錄下的所有ts文件
]
}
