TypeScript 重點部分

TypeScript

TypeScript 是一個中介的編譯轉換器，可以把你寫的 TypeScript 檔案轉換到可讀 Javascript，TypeScript 主要的特色包含可強型態的變數宣告或利用，以及 Interface 和泛型...etc。

寫法是從 Javascript 延伸出來的，所以沒有太多入門的時間成本。

TypeScript 設置

用 npm 就可以安裝: npm install -g typescript

測試編譯: (將檔案儲存後附檔名為 .ts)

tsc xxx.ts

若語法錯誤，或不符合 TypeScript 上所宣告的強型別配置，都可能會出錯，導致無法編譯成 js 檔案。

TypeScript 重點功能

TypeScript 已經有實現許多 ES6 的功能，所以只要 ES6 (2017.5月前) 有被支援於瀏覽器的 ES6 功能，不再此列出。

• 基本型別強化
  在變數名稱後面加上冒號，後面可以加上要強制的型別:
  Ex:
       var fullname : string = "someone";
  
  型別總共有這幾種:
• number
• string
• boolean
• Enum (列舉)
• void (沒有回傳值) - Function 用
• never (不會回傳變數)
• null
• any (任何型態)
• tuple (元素陣列)
• array
• 自訂 Interface
• Interface 介面
  可以定義 Class 要做的哪些功能，Ex:
  
  

  interface Person {
      fullName: string;
      setName (fullName: string);
  }
  
  //實現
  
  class Student implements Person{
      fullName : string;
  
      setName(fullName : string){
          this.fullName = fullname;
      }
  }
  
  var stu = new Student();
  stu.setName("Someone");
  stu.fullName;
  

• 泛型 (Generic)
  在最終端可以"自定型別"來限制參數型別的一種做法
  
  

  //無泛型宣告:
  function ArrayList(arg: any): any {
      return arg;
  } //要限制某些型別才能使用，特別麻煩，有寫沒寫差不多。
  
  //有泛型宣告
  function ArrayList<T>(arg: T): T {
      return arg;
  }
  
  //有泛型宣告可以這樣:
  let test = ArrayList<string>("onlyString"); //角括號 <> 中填寫的就是自訂限制型別
  

  
  詳情可以參考:
  https://www.typescriptlang.org/docs/handbook/generics.html
• 列舉 (Enum)
  列舉功能，可以定義範圍內的資料結構或以象徵性的名稱來定義，想像成下拉選單吧。
  
  

  //列舉宣告
  enum direction{  //方向
      UP = 1, //定義編譯後的 ID 識別，在這裡差別不大
      DOWN,
      LEFT,
      RIGHT
  }
  
  var select = direction.UP;
  

• 命名空間 (Namespace)
  命名空間這個功能可以避免全域名稱浪費。
  
  

  namespace CustomMath{
   const PI = 3.14;
   export class Advanced{
    pow(n:number) : number{
     return n*n;
    }
   }
  }
  
  var MyNumber = new CustomMath.Advanced()
  
  console.log(MyNumber.pow(16));

• 模組匯入匯出
  
  標註為紅色是因為 ES6 原本就有這個功能，但是並未在瀏覽器實現，就算編譯後，匯出會自動變成 require ，所以瀏覽器需要另外安裝 common.js 或 node.js
  
  Usage.ts (終端使用者)
  

  import { Tester } from "./Mod"; //匯入模組功能就好了
  let user = new Tester();
  console.log(user.isString("Testing"));

  
  Mod.ts (模組)
  

  import {StringTester} from "./StringTester" //匯入介面
  export class Tester implements StringTester{
   isString(s : string){
    return true;
   }
  }

  
  StringTester.ts (介面)
  

  export interface StringTester{
   isString(s : string): boolean;
  }

• JSX
  JSX 是源自於 React 的功能，然而 TypeScript 也可以支持:
  

  var a = <div>
    {["foo", "bar"].map(i => <span>{i}</span>)}
  </div>

  
  要編譯的時候，記得要將檔名改為 .tsx ，編譯指令為: tsc --jsx preserve jsx.tsx (這裡的編譯指令不使用 react 的模組，所以用 preserve)

Reference:
https://www.typescriptlang.org/
Anders Hejlsberg: https://channel9.msdn.com/Events/Build/2017/B8088?ocid=player
https://basarat.gitbooks.io/typescript/docs/jsx/tsx.html
https://www.typescriptlang.org/docs/handbook/jsx.html
https://hackmd.io/s/rkITEOYX
https://basarat.gitbooks.io/typescript/docs/types/typeGuard.html