TypeScript快速上手，class，public，private，extends

运行快速上手

在windows终端cmd命令行以管理员身份运行，输入cnpm install -g typescript进行安装，记得将cnpm下载源切换到淘宝镜像源。然后继续输入tsc -v查看是否安装成功。出现版本号即表示安装成功。

类型批注

TypeScript 通过类型批注提供静态类型以在编译时启动类型检查。这是可选的，而且可以被忽略而使用 JavaScript 常规的动态类型。

function Add(left: number, right: number): number {
    return left + right;
}

对于基本类型的批注是number, bool和string。而弱或动态类型的结构则是any类型。当类型没有给出时，TypeScript编译器利用类型推断以推断类型。如果由于缺乏声明，没有类型可以被推断出，那么它就会默认为是动态的any类型。

class说明

TypeScript支持集成了可选的类型批注支持的ECMAScript 6的类。以下是定义一个类的代码。

class Shape {
    area: number;
    color: string;
    constructor ( name: string, width: number, height: number ) {
        this.area = width * height;
        this.color = "pink";
    };
    shoutout() {
        return "I'm " + this.color + " " + this.name +  " with an area of " + this.area + " cm squared.";
    }
}
var square = new Shape("square", 30, 30);
console.log( square.shoutout() );
console.log( 'Area of Shape: ' + square.area );
console.log( 'Name of Shape: ' + square.name );
console.log( 'Color of Shape: ' + square.color );
console.log( 'Width of Shape: ' + square.width );
console.log( 'Height of Shape: ' + square.height );

Shape 类中有两个属性 area 和 color，一个构造器 (constructor()), 一个方法是 shoutout() 。构造器中参数(name, width 和 height) 的作用域是局部变量。所以当在class类以外使用console.log进行使用该class类时：
报出以下错误，ts与js不同，在代码运行编译之前就会进行报错提示。

class.ts(12,42): The property 'name' does not exist on value of type 'Shape'
class.ts(20,40): The property 'name' does not exist on value of type 'Shape'
class.ts(22,41): The property 'width' does not exist on value of type 'Shape'
class.ts(23,42): The property 'height' does not exist on value of type 'Shape'

可以看到，使用到name的地方都报错，因为我们没有在Shape类中增添name属性，只在constructor中增添了局部变量name。同时单独使用square.width和square.height时，也报错了，报错原因与name相同，使用的area和color正常打印输出，是因为，在Shape类中定义了area和color，其作用域是在全局变量。

public

Public 成员可以在任何地方访问，为了使得前边constructor中的局部变量name和width和height可以全局访问，只需在每个变量前使用关键字public。修改的代码部分如下：

constructor ( public name: string, public width: number, public height: number ) {        
	this.area = width * height;
    this.color = "pink";
};

此时在使用如下代码就不会报错了

console.log( 'Name of Shape: ' + square.name );
console.log( 'Width of Shape: ' + square.width );
console.log( 'Height of Shape: ' + square.height );

private

private 成员只允许在类中访问。修改color变量代码如下：

private color: string;

此时在使用如下代码访问，就会报错了。

console.log( 'Color of Shape: ' + square.color );

报错提示

class.ts(24,41): The property 'color' does not exist on value of type 'Shape'

extends继承

继承一个已存在的类并创建一个派生类，继承使用关键字 extends。在前文定义的类代码尾部追加代码如下：

class Shape3D extends Shape {
 
    volume: number;
 
    constructor ( public name: string, width: number, height: number, length: number ) {
        super( name, width, height );
        this.volume = length * this.area;
    };
 
    shoutout() {
        return "I'm " + this.name +  " with a volume of " + this.volume + " cm cube.";
    }
 
    superShout() {
        return super.shoutout();
    }
}
 
var cube = new Shape3D("cube", 30, 30, 30);
console.log( cube.shoutout() );
console.log( cube.superShout() );

派生类 Shape3D 说明：

• Shape3D 继承了 Shape 类, 也继承了 Shape 类的 color 属性。
• 构造函数中，super 方法调用了基类 Shape 的构造函数，传递了参数 name, width, 和 height 值。 继承允许我们复用 Shape 类的代码，所以我们可以通过继承 area 属性来计算 this.volume。
• Shape3D 中的 shoutout() 方法重写基类Shape中的shoutout()方法。superShout() 方法通过使用 super 关键字直接调用了基类Shape的 shoutout() 方法。并且传递的参数是当前的var cube = new Shape3D("cube", 30, 30, 30);参数。

完整代码

class Shape {

    area: number;
    // private限制私有成员
    // private color: string;
    color: string;
    // public限制公有成员，不加public时，constructor中定义的变量作用域只在connstructor中
    constructor(public name: string, public width: number, public height: number) {
        this.area = width * height;
        this.color = "pink";
    };

    shoutout() {
        return "I'm " + this.color + " " + this.name + " with an area of " + this.area + " cm squared.";
    }
}

var square = new Shape("square", 30, 30);

console.log(square.shoutout());
console.log('Area of Shape: ' + square.area);
console.log('Name of Shape: ' + square.name);
// 因为前边在类中给color限制了private私有变量，所以这里square.color访问不到
// 该color只能在class类函数中使用
console.log('Color of Shape: ' + square.color);
console.log('Width of Shape: ' + square.width);
console.log('Height of Shape: ' + square.height);

// Shape3D是派生类，Shape是基类
class Shape3D extends Shape {

    volume: number;

    constructor(public name: string, width: number, height: number, length: number) {
        // super方法调用了基类shape的构造函数，传递了参数 name, width, 和 height 值。 继承允许我们复用 Shape 类的代码，
        super(name, width, height);
        // 通过继承基类shape中的 area 属性来计算 this.volume。
        this.volume = length * this.area;
    };

    shoutout() {
        return "I'm " + this.name + " with a volume of " + this.volume + " cm cube.";
    }

    superShout() {
        return super.shoutout();
    }
}

var cube = new Shape3D("cube", 30, 30, 30);
console.log(cube.shoutout());
console.log(cube.superShout());

运行效果

终端输入命令tsc test.ts将ts文件编译为js文件，然后输入node test.js进行运行，运行结果如下。