TypeScript之面向對象初體驗

1、安裝nodejs和vscode：

nodejs : https://nodejs.org/en/

Visual Studio Code :  https://www.visualstudio.com/en-us/products/code-vs.aspx

安裝是很簡單的，一路next就行，此處不詳細描述。

檢驗node是否安裝成功，打開命令行，輸入node -v， 顯示如下圖，說明安裝成功。

PS: TypeScript畢竟是微軟發明的，用微軟的編輯器更省心，當然不是必須的，否則得根據你的編輯器找typescript插件，你懂的。

 

2、上面的步驟完成后，安裝typescript，找開命令行，輸入指令：npm install -g typescript

 

安裝完成，命令行輸入tsc -v進行檢驗，顯示版本號說明安裝成功，如下圖

 

 3、完成了typescript環境的配置，接下來我們可以開始寫代碼了。

新建一個文件夾demo， 在它下面創建oop.ts

oop.ts代碼如下：

/**
 * 聲明抽象類Shape 
 * */
abstract class Shape {
    //聲明受保護的屬性edge, 是的，你沒看錯，protected只能用於父類和子類
    protected edge: number;
    //聲明構造函數，入參類型為number
    constructor(edge: number) {
        this.edge = edge;
    }
    //聲明類實例方法，方法名后面的number是限制方法的返回類型
    getEdge(): number {
        return this.edge;
    }
    //聲明抽象方法
    abstract getArea(): number;
}

/**
 * 聲明類Triangle, 繼承自抽象類Shape，必須實現抽象方法getArea()
 * */
class Triangle extends Shape {
    //聲明類私有屬性，其他類不能訪問，包括父類
    private width: number;
    private height: number;

    //聲明構造函數，必須顯式調用父類構造函數，用super()
    constructor(width: number, height: number) {
        super(3);
        this.width = width;
        this.height = height;
    }

    //實例方法，重寫父類同名方法
    getArea(): number {
        return this.width * this.height / 2;
    }
}

/**
 * 聲明類Rectangle, 繼承自抽象類Shape，必須實現抽象方法getArea()
 * */
class Rectangle extends Shape {
    //聲明類私有屬性，其他類不能訪問，包括父類
    private width: number;
    private height: number;

    //聲明構造函數，必須顯式調用父類構造函數，用super()
    constructor(width: number, height: number) {
        super(4);
        this.width = width;
        this.height = height;
    }
    
    //實例方法，重寫父類同名方法
    getArea(): number {
        return this.width * this.height;
    }
}

//模擬入參數類型限制為Shape抽象類實例
function outputShape(shape: Shape) {
    console.log(shape.getEdge());
    console.log(shape.getArea());
}

//模擬程序主入口函數
function main() {
    outputShape(new Triangle(4, 5));
    outputShape(new Rectangle(4, 5));
}

main();

 

4.選中oop.ts文件， 右鍵選擇“在命令提示符中打開”

在命令行中，輸入tsc oop.ts，執行后會在相同目錄下生成oop.js文件

oop.js文件內容如下：

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 __());
};
/**
 * 聲明抽象類Shape
 * */
var Shape = (function () {
    //聲明構造函數，入參類型為number
    function Shape(edge) {
        this.edge = edge;
    }
    //聲明類實例方法，方法名后面的number是限制方法的返回類型
    Shape.prototype.getEdge = function () {
        return this.edge;
    };
    return Shape;
}());
/**
 * 聲明類Triangle, 繼承自抽象類Shape，必須實現抽象方法getArea()
 * */
var Triangle = (function (_super) {
    __extends(Triangle, _super);
    //聲明構造函數，必須顯式調用父類構造函數，用super()
    function Triangle(width, height) {
        _super.call(this, 3);
        this.width = width;
        this.height = height;
    }
    //實例方法，重寫父類同名方法
    Triangle.prototype.getArea = function () {
        return this.width * this.height / 2;
    };
    return Triangle;
}(Shape));
/**
 * 聲明類Rectangle, 繼承自抽象類Shape，必須實現抽象方法getArea()
 * */
var Rectangle = (function (_super) {
    __extends(Rectangle, _super);
    //聲明構造函數，必須顯式調用父類構造函數，用super()
    function Rectangle(width, height) {
        _super.call(this, 4);
        this.width = width;
        this.height = height;
    }
    //實例方法，重寫父類同名方法
    Rectangle.prototype.getArea = function () {
        return this.width * this.height;
    };
    return Rectangle;
}(Shape));
//模擬入參數類型限制為Shape抽象類實例
function outputShape(shape) {
    console.log(shape.getEdge());
    console.log(shape.getArea());
}
//模擬程序主入口函數
function main() {
    outputShape(new Triangle(4, 5));
    outputShape(new Rectangle(4, 5));
}
main();

 

5.執行oop.js文件，校驗結果是否正確，在命令行中輸入node oop.js

 輸出如下內容，說明執行成功：

 

最后，可見TypeScript的語法已經很接近Java或C#了，而且它最主要的就是實現了編譯時類型檢查，還有類，抽象類，接口，泛型等OOP的實現， 這對Java或C#的開發者而言，學習成本一下就降低了。

看了上面的TypeScript語法，你會發現變量聲明是這樣的：edge : number， 為什么不搞成number edge呢？不然不是更象Java或C#了？

個人覺得原因可能是因為Dart，因為它就是這樣聲明變量的，如果TypeScript也這樣實現的，語法上跟Dart太接近了，恐怕就得被谷歌告了吧。

PS: typescript只是個js預編譯器，如果你想象Java或C#等靜態語言一樣寫js代碼，或許它是你不錯的選擇，否則你還是可以選CoffeeScript等其他js預編譯器。