使用 VS Code 搭建 TypeScript 開發環境
TypeScript 是 JavaScript 的超集,TypeScript 只是增強了 JavaScript 而非改變了 JavaScript,TypeScript 同樣也是基於 ECMAScript 標准的編程語言。因此非常流行的 Vue 和 React 及我們常用 Jquery 等類庫都可以使用 TypeScript 來編碼,TypeScript 強大的智能類型分析系統,能夠使你的代碼更加強壯。
下載 TypeScript
TypeScript 官網(中文網)提供了多種下載方式,我們使用 NPM 來下載 TypeScript,如果你沒有安裝 NPM,請到 Nodejs 官網進行安裝。
在 CMD(Windows 系統)或者終端(macOS 系統)中輸入一下命令:
npm install -g typescript
安裝完畢后我們輸入 tsc -v 可以查看當前安裝的 TypeScript 版本號。當前最新的版本是 2.1.5。
下載 VSCode
VSCode 是很棒的編輯器。在 VSCode 官網就可以下載相應系統的 VSCode 安裝包
創建項目
mkdir typescript-demo
npm init -y //創建一個 package.json
tsc --init //創建一個 tsconfig.json
touch index.html
touch hello.ts
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TypeScript with VSCode</title>
</head>
<body>
<h1 class="text-center"></h1>
<script src="./hello.js"></script>
</body>
</html>
hello.ts
function sayHello(person: string) {
return "hello" + person;
}
console.log("object :", sayHello("monkey"));
先執行npm install -g live-server
安裝 live-server 之后,修改 package.json
"scripts": {
"start": "tsc -w & live-server",
},
執行 npm start 就可以寫一些 ts 的小 demo 了