淺談TypeScript

時間 2019-11-30

標籤淺談 typescript 简体版

原文原文鏈接

TypeScript爲JavaScript的超集（ECMAScript6），這個語言添加了基於類的面向對象編程。TypeScript做爲JavaScript很大的一個語法糖，本質上是相似於css的less、sass，都是爲了易於維護、開發，最後仍是編譯成JavaScript。趁着週末的時間，淺嘗了Typescript，下面是總結的一些特性。css

Typeshtml

全部類型都是any類型的子類型，其餘類型被分紅元類型(primitive types)和對象類型(object types)。
1. 元類型包括 number, boolean, string, null, undefined
2. 對象類型爲全部類、模塊、接口和字面量類型；前端

編譯前：git

var b: any;             // 全部JavaScript值
var c;                  // Same as c: any
var a: number;               // 顯式類型
var d: boolean;
var e: string;  
var f: string[] = ["hello", "world"];    //數組類型
var g: [number, string] = [3, "three"];  //元組類型
var h: string | number; //聯合類型，幾個不一樣的類型之中的一個

function k() : void{  //void是any的子類型，是undefined的超類型，與其餘類型無關
     alert('hi man');
}

編譯後：github

var b; // 全部JavaScript值
var c; // Same as c: any
var a; // 顯式類型
var d;
var e;
var f = ["hello", "world"]; //數組類型
var g = [3, "three"]; //元組類型
var h; //聯合類型，幾個不一樣的類型之中的一個
function k() {
    alert('hi man');
}

Expressionstypescript

表達式的東西比較多，但比較簡單，僅列出一些關鍵的。npm

編譯前：編程

var a = [2, 3, 4];
var b = [0, 1, ...a, 5, 6];  //=>[0, 1].concat(a, [5, 6]);
var f: (s: string) => string = function (s) {
    return s.toLowerCase();
};
var X = x => Math.sin(x); //傳入x值，返回計算結果
var q = 1;
var p = 2;
[q, p] = [p, q];  //解構賦值

編譯後：後端

var a = [2, 3, 4];
var b = [0, 1].concat(a, [5, 6]); //=>[0, 1].concat(a, [5, 6]);
var f = function (s) {
    return s.toLowerCase();
};
var X = function (x) { return Math.sin(x); }; //傳入x值，返回計算結果
var q = 1;
var p = 2;
_a = [p, q], q = _a[0], p = _a[1]; //解構賦值 
var _a;

Statements數組

語句的內容也比較簡單

1. 塊級做用域

2. 簡單變量聲明、解構變量聲明

3. If,Do,While,For-In,For-Of,Continue,Break,Return,Switch,Throw,Try Statement

Functions

函數聲明有三個關鍵地方：

編譯前：

//默認值
function strange(x: number, y = 2, z = x + y) {
    return z;
}
console.log(strange(1));
console.log(strange(3,2,1));

//解構參數
function drawText({ text = "", location: [x, y] = [0, 0], bold = false }) {
   return text + ":" +  x + y +":" + bold;
}
console.log(drawText({text:'lu',location:[1,2], bold:true}));

//函數重載
function pick(x: string): string;
function pick(x: number): string;
function pick(x): any {   
    if (typeof x == "string") {       
        return x + "string";
    }   
    else if (typeof x == "number") {       
        return x + 10000;
    }
}
console.log(pick("lu"));
console.log(pick(1));

編譯後：

//默認值
function strange(x, y, z) {
    if (y === void 0) { y = 2; }
    if (z === void 0) { z = x + y; }
    return z;
}
console.log(strange(1));
console.log(strange(3, 2, 1));
//解構參數
function drawText(_a) {
    var _b = _a.text, 
       text = _b === void 0 ? "" : _b, 
       _c = _a.location,
       _d = _c === void 0 ? [0, 0] : _c, 
       x = _d[0], 
       y = _d[1], 
       _e = _a.bold, 
       bold = _e === void 0 ? false : _e;
    return text + ":" + x + y + ":" + bold;
}
console.log(drawText({ text: 'lu', location: [1, 2], bold: true }));
function pick(x) {
    if (typeof x == "string") {
        return x + "string";
    }
    else if (typeof x == "number") {
        return x + 10000;
    }
}
console.log(pick("lu"));
console.log(pick(1));

Interfaces

接口還能夠繼承接口或類（Java只能是接口）

編譯前：

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}
//編譯後是沒有interface這東西的

class Clock implements ClockInterface  {
    currentTime: Date;
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}

編譯後：

var Clock = (function () {
    function Clock(h, m) {
    }
    Clock.prototype.setTime = function (d) {
        this.currentTime = d;
    };
    return Clock;
})();

Classes

類的內容跟後端語言很是像了，舉個例子體會下就好了。

編譯前：

class Point {
    constructor(public x: number, public y: number) { }
    public toString() {
        return "x=" + this.x + " y=" + this.y;
    }
}
class ColoredPoint extends Point {
    constructor(x: number, y: number, public color: string) {
        super(x, y);
    }
    public toString() {
        return super.toString() + " color=" + this.color;
    }
    //static聲明靜態函數，不加static默認是實例函數
    static f() {
    }

}
//泛型
class Pair<T1, T2> {
    constructor(public item1: T1, public item2: T2) { }
     public toString() {
        return "Pair"+ this.item1.toString() + this.item2.toString();
    }
}
console.log(new Point(1,2).toString());
console.log(new ColoredPoint(1,2,'blue').toString());
console.log(new Pair<Point,ColoredPoint>(new Point(1,2),new ColoredPoint(1,2,'blue')).toString());

編譯後：

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var Point = (function () {
    function Point(x, y) {
        this.x = x;
        this.y = y;
    }
    Point.prototype.toString = function () {
        return "x=" + this.x + " y=" + this.y;
    };
    return Point;
})();
var ColoredPoint = (function (_super) {
    __extends(ColoredPoint, _super);
    function ColoredPoint(x, y, color) {
        _super.call(this, x, y);
        this.color = color;
    }
    ColoredPoint.prototype.toString = function () {
        return _super.prototype.toString.call(this) + " color=" + this.color;
    };
    //static聲明靜態函數，不加static默認是實例函數
    ColoredPoint.f = function () {
    };
    return ColoredPoint;
})(Point);
//泛型
var Pair = (function () {
    function Pair(item1, item2) {
        this.item1 = item1;
        this.item2 = item2;
    }
    Pair.prototype.toString = function () {
        return "Pair" + this.item1.toString() + this.item2.toString();
    };
    return Pair;
})();
console.log(new Point(1, 2).toString());
console.log(new ColoredPoint(1, 2, 'blue').toString());
console.log(new Pair(new Point(1, 2), new ColoredPoint(1, 2, 'blue')).toString());

Enums

枚舉類型

編譯前：

enum Operator { 
    ADD, 
    DIV, 
    MUL, 
    SUB 
}
function compute(op: Operator, a: number, b: number) { 
    console.log("the operator is" + Operator[op]); 
}
var b: boolean = true;
compute(Operator.ADD, 1, 2);
compute(Operator.ADD, 1, b); //編譯時error，但能編譯成js

編譯後：

var Operator;
(function (Operator) {
    Operator[Operator["ADD"] = 0] = "ADD";
    Operator[Operator["DIV"] = 1] = "DIV";
    Operator[Operator["MUL"] = 2] = "MUL";
    Operator[Operator["SUB"] = 3] = "SUB";
})(Operator || (Operator = {}));
function compute(op, a, b) {
    console.log("the operator is" + Operator[op]);
}
var b = true;
compute(Operator.ADD, 1, 2);
compute(Operator.ADD, 1, b);  //編譯時error，但能編譯成js

Namespaces

命名空間：爲了不出現同名的變量或函數的衝突。
import：能將其餘命名空間或命名空間的元素引入使用。
export：能將元素（變量、函數、類等）導出到命名空間上。

編譯前：

namespace A {
    export class X { s: string }
}
namespace B {
    import Y = A;    // Alias for namespace A
    import Z = A.X;  // Alias for type and value A.X
    export var K = 2;
    export function f(){
          var x = new Z();
     }
}
//變量只有在使用了，纔會被生成

編譯後：

var A;
(function (A) {
    var X = (function () {
        function X() {
        }
        return X;
    })();
    A.X = X;
})(A || (A = {}));
var B;
(function (B) {
    var Z = A.X; // Alias for type and value A.X
    B.K = 2;
    function f() {
        var x = new Z();
    }
    B.f = f;
})(B || (B = {}));

Modules

TypeScript模塊支持了ECMAScript6模塊，同時兼容CommonJS, AMD，System模塊，能夠編譯成相應模塊。

編譯指令：

tsc module system main.ts （只須要編譯main.ts就行，log.ts在編譯時會被引入）

編譯前：

main.ts

import { message } from "./log";
message("hello");

log.ts

export function message(s: string) {
    console.log(s);
}

編譯後：

因爲有幾種模塊編譯的指令，生成的代碼並不相同，就不一一列出來。

Ambients

環境聲明向TypeScript域中引入一個變量，這對生成的JS裏將沒有任何影響。

PS： document等JS內建的對象經過文件‘lib.d.ts’默認包含在TS中;

能夠這樣引入jQuery庫

declare var $;

總結

　　Typescript的好處很明顯，在編譯時就能檢查出不少語法問題而不是在運行時。不過因爲是面向對象思路，若是是純前端的人員（沒有後端語言基礎），那用起來應該是比較吃力的。有沒有需求使用Typescript，我以爲寫出代碼是否易於維護、優雅，不在於用了什麼框架、語言，在於開發者自己的架構思路。誠然好的框架和語言能間接幫助開發者寫出規範的代碼，但不代碼就能寫得好。因此若是Typescript能使團隊易於協同開發，提升效率，那才考慮使用。若是都用得很痛苦，那仍是簡單的來。

附錄

1. 安裝Typescript