2017年5月28日 星期日

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

沒有留言:

張貼留言

© ERIC RILEY , 自由無須告知轉貼
Background Japanese Sayagata by Olga Libby