【TypeScript 3.2】強類型的JavaScript - TypeScript

記得當時年紀小，一直以為JavaScript跟Java是類似的東西，後來才發現原來JavaScript是在寫網頁的特效啊，雖然簡單易學，但是只有單線程，一寫不好網頁就當在那裡了，而且當時只是用來寫防滑鼠右鍵跟Ctrl + C的工具，到了後來，JavaScript使用的範圍越來越廣泛，如雨後春筍般的framework一個接一個，已經算是前臺的必備良藥，後來強大的V8引擎，跟能夠寫後臺資料庫的Nodejs，JavaScript等於是網頁端前後臺全包，加上也能寫手機APP，將來真的是JavaScript一統天下。但是就因為JavaScript語法簡單，專案一大就顯得難以維護，其中著名的框架VUE 3.0就正在用TypeScript重寫，而TypeScript就只是JavaScript的一個超集，加上有強類型的支援，讓Debug更簡單，而且可以讓Code變少，易於維護。現在，我們就來介紹TypeScript怎麼跟JavaScript和平共處。

安裝必要工具

安裝Nodejs / Visual Studio Code

• Nodejs - APT
• Visual Studio Code - 下載.deb

  

安裝TypeScript

npm install -g typescript

建立 package.json / tsconfig.json

mkdir ts_demo
cd ts_demo
npm init
tsc --init

設定tsconfig.json

• 在這裡可以設定相關的檔案位置，編譯成何種ECMAScript標準，使用何種模組化標準，使用何種編譯選項

{
  "compilerOptions": {
      "module": "commonjs",   // 指定生成哪個模塊系統代碼
      "target": "es6",        // 目標代碼類型
      "noImplicitAny": false, // 在表達式和聲明上有隱含的'any'類型時報錯。
      "sourceMap": false,     // 用於debug   
      "rootDir": "./src",     // 僅用來控制輸出的目錄結構--outDir。
      "outDir": "./build",    // 重定向輸出目錄。   
      "watch": true           // 在監視模式下運行編譯器。會監視輸出文件，在它們改變時重新編譯。
  },
  "include":[
      "./src/**/*"
  ],
  "exclude":[
      "views",
      "static"
  ]
}

寫個簡單的Demo試試

• 寫完之後利用tsc指令編譯，會發現多了一個.js檔，這就表示設定沒有問題了

// server.ts
interface ICache{
    useCache:boolean;
    [propName:string]:any;
}
const cache:ICache = { useCache:true } ;

安裝nodejs的.d.ts文件

就個人的理解，.d.ts文件應該就是『翻譯檔』吧？讓在TypeScript中能使用JavaScript的程式

npm install --save-dev @types/node

Http的get範例實作

• Nodejs的Http的Demo範例，順便認識一下TypeScript語法

// server.ts
import * as http from 'http'

http.get({
    hostname: 'localhost',
    port: 4000,
    path: '/',
    agent: false  // Create a new agent just for this one request
  }, (res) => {
    console.log(res);    
  });

範例程式碼下載