使用Visual Studio Code搭建TypeScript開發(fā)環(huán)境

1、TypeScript是干什么的 ?

TypeScript是由微軟Anders Hejlsberg(安德斯·海爾斯伯格，也是本人的偶像)領(lǐng)銜開發(fā)的。
(安德斯·海爾斯伯格是Delphi 和 C#之父，Turbo Pascal 編譯器的主要作者，.NET 概念發(fā)起人之一，同時(shí)也是TypeScript開源項(xiàng)目的重要領(lǐng)導(dǎo)人。他于1996年加入微軟，目前是 C# 語言的首席架構(gòu)師和 TypeScript 的核心開發(fā)者，獲微軟卓越工程師 Distinguished Engineer 和微軟技術(shù)院士 Technical Fellow 稱號(hào)。)

image

安德斯介紹 TypeScript
C#之父Anders首來華：從TypeScript看開源
Delphi、C#之父Anders Hejlsberg首次訪華推廣TypeScript
SegmentFault 創(chuàng)始人祁寧對(duì)話 C# 之父 Anders Hejlsberg
TypeScript: 應(yīng)用級(jí)別的JavaScript開發(fā)
TypeScript 是微軟開發(fā)的 JavaScript 的超集，TypeScript兼容JavaScript，可以載入JavaScript代碼然后運(yùn)行。TypeScript與JavaScript相比進(jìn)步的地方包括：加入注釋，讓編譯器理解所支持的對(duì)象和函數(shù)，編譯器會(huì)移除注釋，不會(huì)增加開銷；增加一個(gè)完整的類結(jié)構(gòu)，使之更象傳統(tǒng)的面向?qū)ο笳Z言。

2、為什么選擇TypeScript ?

JavaScript 只是一個(gè)腳本語言，并非設(shè)計(jì)用于開發(fā)大型 Web 應(yīng)用，JavaScript 沒有提供類和模塊的概念，而 TypeScript 擴(kuò)展了 JavaScript 實(shí)現(xiàn)了這些特性。
TypeScript 主要特點(diǎn)包括：
TypeScript 是微軟推出的開源語言，使用 Apache 授權(quán)協(xié)議，
TypeScript 是 JavaScript 的超集。
TypeScript 增加了可選類型、類和模塊
TypeScript 可編譯成可讀的、標(biāo)準(zhǔn)的 JavaScript
TypeScript 支持開發(fā)大規(guī)模 JavaScript 應(yīng)用
TypeScript 設(shè)計(jì)用于開發(fā)大型應(yīng)用，并保證編譯后的 JavaScript 代碼兼容性
TypeScript 擴(kuò)展了 JavaScript 的語法，因此已有的 JavaScript 代碼可直接與 TypeScript 一起運(yùn)行無需更改
TypeScript 文件擴(kuò)展名是 ts，而 TypeScript 編譯器會(huì)編譯成 js 文件
TypeScript 語法與 JScript .NET 相同?
TypeScript 易學(xué)易于理解
網(wǎng)上流傳一句話，Angular 2選擇了TypeScript作為主語言。如果你是個(gè)C#程序員，一定會(huì)對(duì)它的語法感覺似曾相識(shí)。沒錯(cuò)，TypeScript和C#、Delphi有同一個(gè)“爹” —— 傳奇人物Anders Hejlsberg。即使是Java程序員，也不會(huì)覺得陌生：強(qiáng)類型、類、接口、注解等等，無一不是后端程序員們耳熟能詳?shù)母拍?。說到底，并沒有什么前端語言和后端語言，在語言領(lǐng)域耕耘多年的Anders太熟悉優(yōu)秀語言的共性了，他所做的取舍值得你信賴。
TypeScript的崛起
TypeScript有良好的工具支持。以前，只有Visual Studio提供TypeScript工具?，F(xiàn)在，情形大為改觀。WebStorm增加了TypeScript支持，Eclipse也有了TypeScript插件，
而且微軟也發(fā)布了Sublime Text開發(fā)TypeScript插件，Atom也支持TypeScript開發(fā)。
微軟與Google達(dá)成JavaScript框架合作：將共同打造Angular 2
Angular 2：基于 TypeScript
Facebook聯(lián)合創(chuàng)始人的二次創(chuàng)業(yè)，他們?yōu)槭裁崔D(zhuǎn)向TypeScript

3、TypeScript語法特性

兼容 ECMAScript 2015（ES6）規(guī)范，可選擇編譯成ES6或ES5規(guī)范的JavaScript代碼（ECMAScript 3及以上版本）；
面向?qū)ο?，并擁有一些函?shù)式特性；
類型語言；
實(shí)現(xiàn)了注解、泛型等特性；
適配大型App構(gòu)建。
類 Classes
接口 Interfaces
模塊 Modules
類型注解 Type annotations
編譯時(shí)類型檢查 Compile time type checking
Arrow 函數(shù) (類似 C# 的 Lambda 表達(dá)式)

4、TypeScrip與JavaScript 的區(qū)別

TypeScript 是 JavaScript 的超集，擴(kuò)展了 JavaScript 的語法，因此現(xiàn)有的 JavaScript 代碼可與 TypeScript 一起工作無需任何修改，TypeScript 通過類型注解提供編譯時(shí)的靜態(tài)類型檢查。TypeScript 可處理已有的 JavaScript 代碼，并只對(duì)其中的 TypeScript 代碼進(jìn)行編譯。
通過編譯器把TypeScript程序代碼編譯生成JavaScript代碼。
在線編寫測(cè)試TypeScript

5、安裝Visual Studio Code

Visual Studio Code (VS Code) 是微軟開發(fā)的、免費(fèi)開源、功能強(qiáng)大的輕量級(jí)的IDE。
運(yùn)行環(huán)境：Windows 10 (64位)

下載Visual Studio Code (VSCodeSetup-stable.exe)

運(yùn)行：VSCodeSetup-stable.exe，安裝Visual Studio Code :

image

6、安裝Node.js

下載Node.js(node-v4.5.0-x64.msi)

運(yùn)行：node-v4.5.0-x64.msi，安裝Node.js :

image

7、安裝TypeScript Compiler

安裝好Node.js后，可以直接使用npm工具來安裝TypeScript，這個(gè)TypeScript的Package其實(shí)也是一個(gè)Compiler，可以通過這個(gè)Complier將typescript編譯成javascript。打開命令提示符cmd，進(jìn)入控制臺(tái)(或其他終端Terminal)，輸入指令：
npm install -g typescript

image

8、更新TypeScript Compiler

輸入指令：npm update -g typescript
查看版本：tsc -v

image

9、安裝 Tpyings

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

image

10、安裝 node 的 .d.ts 庫

輸入指令：typings install dt~node –global

image

11、創(chuàng)建ts_demo項(xiàng)目

創(chuàng)建ts_demo目錄
在命令行cmd下進(jìn)入ts_demo目錄
cd ts_demo
輸入：npm init，創(chuàng)建package.json

image

12、創(chuàng)建 tsconfig.json

(1)、啟動(dòng)VS Code
(2)、選擇菜單文件/打開文件夾，選擇剛剛創(chuàng)建的ts_demo文件夾
(3)、雙擊tsconfig.json打開如下圖：

image

13、修改tsconfig.json

把tsconfig.json修改為：

image

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": false,
        "sourceMap": true,
        "allowJs": true
    }
    ,
    "exclude": [
        "node_modules"
    ]
}

target：編譯之后生成的JavaScript文件需要遵循的標(biāo)準(zhǔn)。有三個(gè)候選項(xiàng)：es3、es5、es2015。
noImplicitAny：為false時(shí)，如果編譯器無法根據(jù)變量的使用來判斷類型時(shí)，將用any類型代替。為true時(shí)，將進(jìn)行強(qiáng)類型檢查，無法推斷類型時(shí)，提示錯(cuò)誤。
module：遵循的JavaScript模塊規(guī)范。主要的候選項(xiàng)有：commonjs、AMD和es6。
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í)需要包含/剔除的文件夾。

14、配置 TypeScript 編譯

按ctrl + shift + b編譯, 如果沒有配置過，task, 就會(huì)在上面提示(如圖)。

image

選擇【配置任務(wù)運(yùn)行程序】

image

15、新建greeter.ts文件


class Student {
    firstName : string;
    lastName : string;

    constructor(fiestName : string,  lastName : string) {
        this.firstName = fiestName;
        this.lastName = lastName;
    }

    greeter() {
        return "Hello，您好" + this.firstName + " " + this.lastName;
    }
}

var user = new Student("王", "小明");

// document.body.innerHTML = user.greeter();
document.body.innerHTML = user.greeter();

16、編譯greeter.ts

編譯greeter.ts出錯(cuò)：
"檢測(cè)到全局安裝的 tsc 編譯器(2.0.3)與 VS 代碼語言服務(wù)(1.8.10)版本不匹配。這可能導(dǎo)致不一致的編譯錯(cuò)誤。"

image

17、使用新版本TypeScript

在命令行(cmd)下輸入：npm install typescript@2.0.3

image

選擇菜單文件/首選項(xiàng)/工作區(qū)設(shè)置
settings.json文件修改為：

{
    "typescript.tsdk": "node_modules/typescript/lib"
}

image

18、修改啟動(dòng)源

按F5開始調(diào)試會(huì)生成： launch.json
用VS Code打開項(xiàng)目的launch.json文件，"program"條目，修改如下：
···
"program": "${workspaceRoot}/greeter.js",
···

image

19、創(chuàng)建index.html

輸入：html:5，按tab鍵回自動(dòng)產(chǎn)生index.html文檔，然后修改如下：

<!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8"/>
            <title>greeter</title>
    </head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>

image

20、瀏覽器打開index.html

image

至此，《使用 Visual Studio Code 開發(fā) TypeScript 系列》第一講《配置 VS Code 開發(fā) TypeScript》全部介紹完了。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

使用Visual Studio Code搭建TypeScript開發(fā)環(huán)境

使用Visual Studio Code搭建TypeScript開發(fā)環(huán)境

使用Visual Studio Code搭建TypeScript開發(fā)環(huán)境

1、TypeScript是干什么的 ?

2、為什么選擇TypeScript ?

3、TypeScript語法特性

4、TypeScrip與JavaScript 的區(qū)別

5、安裝Visual Studio Code

6、安裝Node.js

7、安裝TypeScript Compiler

8、更新TypeScript Compiler

9、安裝 Tpyings

10、安裝 node 的 .d.ts 庫

11、創(chuàng)建ts_demo項(xiàng)目

12、創(chuàng)建 tsconfig.json

13、修改tsconfig.json

14、配置 TypeScript 編譯

15、新建greeter.ts文件

16、編譯greeter.ts

17、使用新版本TypeScript

18、修改啟動(dòng)源

19、創(chuàng)建index.html

20、瀏覽器打開index.html

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

使用Visual Studio Code搭建TypeScript開發(fā)環(huán)境

使用Visual Studio Code搭建TypeScript開發(fā)環(huán)境

1、TypeScript是干什么的 ?

2、為什么選擇TypeScript ?

3、TypeScript語法特性

4、TypeScrip與JavaScript 的區(qū)別

5、安裝Visual Studio Code

6、安裝Node.js

7、安裝TypeScript Compiler

8、更新TypeScript Compiler

9、安裝 Tpyings

10、安裝 node 的 .d.ts 庫

11、創(chuàng)建ts_demo項(xiàng)目

12、創(chuàng)建 tsconfig.json

13、修改tsconfig.json

14、配置 TypeScript 編譯

15、新建greeter.ts文件

16、編譯greeter.ts

17、使用新版本TypeScript

18、修改啟動(dòng)源

19、創(chuàng)建index.html

20、瀏覽器打開index.html

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

2、為什么選擇TypeScript ?

3、TypeScript語法特性

4、TypeScrip與JavaScript 的區(qū)別

5、安裝Visual Studio Code

6、安裝Node.js

8、更新TypeScript Compiler

9、安裝 Tpyings

11、創(chuàng)建ts_demo項(xiàng)目

12、創(chuàng)建 tsconfig.json

14、配置 TypeScript 編譯

17、使用新版本TypeScript

18、修改啟動(dòng)源

19、創(chuàng)建index.html