閱讀目錄
[環(huán)境搭建]
[第一部分刻获、簡(jiǎn)介]
[第二部分罐脊、環(huán)境準(zhǔn)備]
[第三部分承绸、使用Visual Studio Code進(jìn)行開(kāi)發(fā)]
[其他相關(guān)內(nèi)容]
[環(huán)境搭建]
本篇將簡(jiǎn)單介紹一下TypeScript褐望，并記錄開(kāi)發(fā)環(huán)境的搭建勒庄、使用Visual Studio Code進(jìn)行一個(gè)簡(jiǎn)單的Demo開(kāi)發(fā)過(guò)程。
第一部分瘫里、簡(jiǎn)介
TypeScript是一種由微軟開(kāi)發(fā)的自由和開(kāi)源的編程語(yǔ)言实蔽。是JavaScript的一個(gè)超集。它在保留JavaScript語(yǔ)言本身特性的基礎(chǔ)上添加了大量靜態(tài)語(yǔ)言具有的一些特性减宣，包括但不限于以下幾點(diǎn)：
可選的靜態(tài)類(lèi)型
枚舉盐须、接口和類(lèi)
命名空間
模塊
Lambda表達(dá)式
編譯時(shí)類(lèi)型檢查
在2013年6月微軟正式發(fā)布了0.9版。之后在不斷更新的過(guò)程中逐漸支持ECMAScript 2015（ES6）標(biāo)準(zhǔn)漆腌。
通過(guò)利用靜態(tài)語(yǔ)言的特性和新標(biāo)準(zhǔn)贼邓，使JavaScript開(kāi)發(fā)變得越來(lái)越簡(jiǎn)單。同時(shí)也很好的符合當(dāng)前前端開(kāi)發(fā)的模塊化闷尿、工程化的開(kāi)發(fā)方式和潮流塑径。
第二部分、環(huán)境準(zhǔn)備
一填具、安裝Node.js
安裝文件下載地址：Node.js Downloads统舀。TypeScript源碼需要進(jìn)行編譯以后才能運(yùn)行，Node.js提供了編譯環(huán)境劳景。
二誉简、安裝TypeScript編譯工具
安裝好Node.js后，打開(kāi)cmd窗口盟广，輸入以下命令
npm install -g typescript
使用npm包管理工具下載TypeScript包并在全局環(huán)境下安裝闷串，安裝成功后就可以通過(guò) tsc 命令編譯TypeScript源碼。
可以通過(guò) tsc -v 命令查看當(dāng)前TypeScript版本筋量。當(dāng)前最新版本是：1.8
第三部分烹吵、使用Visual Studio Code進(jìn)行開(kāi)發(fā)
以下目錄結(jié)構(gòu)是一個(gè)簡(jiǎn)單的Demo的結(jié)構(gòu)
主要包括但不限于以下幾個(gè)目錄和文件
/ts：TypeScript源碼文件存放的文件夾
/js：編譯之后生成的JavaScript文件存放的文件夾
tsconfig.json：TypeScript編譯配置文件
另外.vscode是VS Code開(kāi)發(fā)工具特有的文件夾碉熄，主要用來(lái)存放調(diào)試時(shí)需要用到的配置文件。
一肋拔、tsconfig.json
{
"compilerOptions": {
"target": "es5",
"noImplicitAny": false,
"module": "commonjs",
"removeComments": true,
"sourceMap": false,
"outDir": "js"
},
"include":[
"ts"
],
"exclude": [
"js"
]
}
有幾個(gè)重要的屬性需要解釋一下：
target：編譯之后生成的JavaScript文件需要遵循的標(biāo)準(zhǔn)锈津。有三個(gè)候選項(xiàng)：es3、es5凉蜂、es2015琼梆。
noImplicitAny：為false時(shí)，如果編譯器無(wú)法根據(jù)變量的使用來(lái)判斷類(lèi)型時(shí)跃惫，將用any類(lèi)型代替叮叹。為true時(shí)，將進(jìn)行強(qiáng)類(lèi)型檢查爆存，無(wú)法推斷類(lèi)型時(shí)蛉顽，提示錯(cuò)誤。
module：遵循的JavaScript模塊規(guī)范先较。主要的候選項(xiàng)有：commonjs携冤、AMD和es2015。為了后面與node.js保持一致闲勺，我們這里選用commonjs曾棕。
removeComments：編譯生成的JavaScript文件是否移除注釋。
sourceMap：編譯時(shí)是否生成對(duì)應(yīng)的source map文件菜循。這個(gè)文件主要用于前端調(diào)試翘地。當(dāng)前端js文件被壓縮引用后，出錯(cuò)時(shí)可借助同名的source map文件查找源文件中錯(cuò)誤位置癌幕。
outDir：編譯輸出JavaScript文件存放的文件夾衙耕。
include、exclude：編譯時(shí)需要包含/剔除的文件夾勺远。
二橙喘、添加Demo源文件
在ts文件夾添加 app.ts 和 demo.ts 兩個(gè)源文件，目錄結(jié)構(gòu)和源文件內(nèi)容如下
三胶逢、配置編譯和調(diào)試文件
在.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"
}
切換到調(diào)試模式厅瞎，點(diǎn)擊配置按鈕，選擇Node.js環(huán)境初坠。因?yàn)榻酉聛?lái)的Demo演示都將在Node.js環(huán)境下進(jìn)行和簸。
修改生成的launch.json文件內(nèi)容，指定啟動(dòng)入口文件的路徑
{
"version": "0.2.0",
"configurations": [
{
"name": "啟動(dòng)",
"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 啟動(dòng)編譯比搭，如果VS Code的OUTPUT窗口沒(méi)有任何異常信息顯示，則表示編譯成功南誊。在js文件夾里將會(huì)生成編譯后的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());
對(duì)比TypeScript源碼文件和生成之后的JavaScript文件身诺，結(jié)構(gòu)發(fā)生了較大變化。
啟動(dòng)調(diào)試抄囚，查看調(diào)試控制臺(tái)霉赡，輸出了正確的計(jì)算結(jié)果：3
其他相關(guān)內(nèi)容
當(dāng)前非常流行的JavaScript模塊規(guī)范主要遵循以下兩種：
CommonJS：同步模式加載模塊，主要應(yīng)用在服務(wù)端幔托。Node.js模塊化就遵循此規(guī)范穴亏。使用方式： require('模塊名') 。
AMD：異步模式加載模塊重挑，主要應(yīng)用在瀏覽器端嗓化。RequireJS遵循此標(biāo)準(zhǔn)。使用方式： define(['模塊名1', ...], function('模塊參數(shù)1', ....) { })
創(chuàng)建第一個(gè)TypeScript文件
- 新建一個(gè)目錄谬哀，在該目錄下新建一個(gè)文件HelloWorld.ts
- 打開(kāi)文件在文件內(nèi)輸入如下內(nèi)容刺覆，涉及部分ts的語(yǔ)法就不講了：
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文件，內(nèi)容如下：
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();
}
- 這里將這個(gè)js文件放到html頁(yè)面上進(jìn)行測(cè)試史煎，控制臺(tái)輸出如下：
constructor==========>>>Hello world
testFun===========>>>Hello world
這樣一套完整的工作流就完成了谦屑，生成的js文件可以用在各種項(xiàng)目中，Egret項(xiàng)目篇梭、cocos項(xiàng)目或者Web項(xiàng)目都可以氢橙。通過(guò)這種方式可以積累自己的類(lèi)庫(kù)，方便做項(xiàng)目時(shí)快速開(kāi)發(fā)恬偷。
工程配置
tsconfig.json
- 如果一個(gè)目錄下存在一個(gè)tsconfig.json文件悍手，那么它意味著這個(gè)目錄是TypeScript項(xiàng)目的根目錄。 tsconfig.json文件中指定了用來(lái)編譯這個(gè)項(xiàng)目的根文件和編譯選項(xiàng)袍患。
- 在執(zhí)行tsc時(shí)坦康，編譯器會(huì)在當(dāng)前目錄向父級(jí)目錄逐級(jí)查找tsconfig.json文件，也可以使用命令行參數(shù)–project（或-p）指定一個(gè)包含tsconfig.json文件的目錄
- 例子:
{
"compilerOptions": {
"module": "system",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"outFile": "../built/ituuzx/itz.js"
},
"include": [
"**/*.ts" //include是指編譯包含的文件或目錄协怒，這是配置的是包括子目錄下的所有ts文件
]
}
