使用 VS Code 搭建 TypeScript 開發環境


使用 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 了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM