（一）、相關介紹
1、TypeScript介紹
TypeScript是由微軟Anders Hejlsberg(安德斯·海爾斯伯格)領銜開發的。
(安德斯·海爾斯伯格是Delphi 和 C#之父，Turbo Pascal 編譯器的主要作者，.NET 概念發起人之一，同時也是TypeScript開源項目的重要領導人)。
TypeScript 是 JavaScript 的超集，擴展了 JavaScript 的語法，因此現有的 JavaScript 代碼可與 TypeScript 一起工作無需任何修改，TypeScript 通過類型註解提供編譯時的靜態類型檢查。TypeScript 可處理已有的 JavaScript 代碼，並只對其中的 TypeScript 代碼進行編譯。
通過編譯器把TypeScript程序代碼編譯生成JavaScript代碼。
2.TypeScript主要特點
TypeScript 是微軟推出的開源語言，使用 Apache 授權協議，
TypeScript 是 JavaScript 的超集。
TypeScript 增加了可選類型、類和模塊
TypeScript 可編譯成可讀的、標準的 JavaScript
TypeScript 支持開發大規模 JavaScript 應用
TypeScript 設計用於開發大型應用，並保證編譯後的 JavaScript 代碼兼容性
TypeScript 擴展了 JavaScript 的語法，因此已有的 JavaScript 代碼可直接與 TypeScript 一起運行無需更改
TypeScript 文件擴展名是 ts，而 TypeScript 編譯器會編譯成 js 文件
TypeScript 語法與 JScript .NET 相同
TypeScript 易學易於理解
3.TypeScript語法特性
面向對象，並擁有一些函數式特性；
類型語言；
實現了註解、泛型等特性；
適配大型App構建。
類 Classes
接口 Interfaces
模塊 Modules
類型註解 Type annotations
編譯時類型檢查 Compile time type checking
Arrow 函數 (類似 C# 的 Lambda 表達式)
（二）、在vscode 中配置開發環境
1.vs安裝配置（不多說）
安裝vscode
下載地址：https://code.visualstudio.com/
安裝Nodejs
下載地址：https://nodejs.org
2.配置，安裝 TypeScript
使用npm安裝TypeScript編譯器
npm install -g typescript
安裝指定版本
npm install [email protected]
更新TypeScript Compiler
npm update -g typescript
查看版本
tsc -v
3.安裝 Tpyings
typings 主要是用來獲取.d.ts文件。當typescript使用一個外部JavaScript庫時,會需要這個文件，當然好多的編譯器都用它來增加智能感知能力。
npm install -g typings
4.安裝 node 的 .d.ts 庫
typings install dt~node –global
5.創建package.json
npm init 跟着提示下一步就好了。
6.創建 tsconfig.json
tsc --init
修改成
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": false,
"sourceMap": true,
"allowJs": true
},
"exclude": [
"node_modules"
]
}
7.配置 TypeScript 編譯
按ctrl + shift + b, 如果沒有配置過，task, 就會在上面提示。
會在.vscode文件夾下生成一個 task.json, 基本不用動
{
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", "."],
"showOutput": "silent",
"problemMatcher": "$tsc"
}
到此配置成功
（三）、小試身手
1.新建demo.ts文件
class person {
constructor() {
}
/**
* print
*/
public print() {
console.log('this is a person')
}
}
let p = new person();
p.print();
2.ctrl+shift+b 編輯build
會自動編輯出一個demo.js
3.創建index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>demo</title>
</head>
<body>
<script src="demo.js"></script>
</body>
</html>
瀏覽器打開就可以看到了