让js更像java一点，TypeScript入门实例

TypeScript 由微软开发的自由和开源的编程语言。

TypeScript 设计目标是开发大型应用，它是一种面向对象风格的语言并且可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上！！！

传统的JS中定义一个变量并不需要声明一个变量的类型，这就导致了在开发过程中会出现许多bug，这些bug且不容易被发现。但这些在TS中是不被允许的。

TS中的可给变量定义的基础类型有number、string、boolean、数组类型、元组、void、枚举。

在TS中声明是这样的

name：string

这便代表定义了一个类型为string的name变量。

与任何一款面向对象语言一样，TS也可以声明一个类。

我们声明一个person类作为父类，其中有它的构造函数与两个方法分别是name 与eat

class Person {
    constructor(name:String){
        console.log(name)
    }
    name(type):void{
        console.log("这是个"+type)
    }
    eat():void{

    }
}

创建一个person类的对象p，使用p调用person中的name方法并传递一个参数

var p = new Person();
p.name("黑");

运行tsy+文件名，可以将ts文件编译成js文件，然后在运行node命令运行编译好的js代码

 tsc Hello.ts
 node Hello.js

这里可以给大家看一下由ts编译好的js代码是这样的，TS避免了复杂的原型继承，大大加大了编程效率。

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var Person = /** @class */ (function () {
    function Person(name) {
        console.log(name);
    }
    Person.prototype.name = function (type) {
        console.log("这是个" + type + "人");
    };
    Person.prototype.eat = function () {
    };
    return Person;
}());
var Teacher = /** @class */ (function (_super) {
    __extends(Teacher, _super);
    function Teacher(name) {
        return _super.call(this, name) || this;
    }
    Teacher.prototype.eat = function () {
        console.log("老师吃火锅");
    };
    return Teacher;
}(Person));
var q = new Teacher("老张");
var p = new Person("老王");
p.name("黑");
q.eat();

既然TS是面向对象的语言，也是可以实现java中的多态的。这里给大家演示一下。

class Person {
    eat():void{
        console.log("人要吃饭的")
    }
}
class Teacher extends Person {   //Teacher类继承了person类
    eat():void{
        console.log("老师吃火锅")
    }
}
var q: Person = new Teacher() //创一个类型为person类的Teacher类的对象q

q.eat(); //执行eat方法

 运行完后控制台输出老师吃火锅

 本次案例就分享到这，喜欢的朋友点赞关注喔。