使用TypeScript来写javascript代码

作者 梦想.家 日期 2016-03-15 字数 1.5k
使用TypeScript来写javascript代码

从机器码到汇编语言再到c语言,java等的高级语言的过程其实在不断的抽象,目的就是让人们使用起来更加的方便和简单,想象一下如果让你用0和1来写程序会是一种什么样的体验。编程语言不断的演化,未来也越来越会趋于自然语言。

为什么要使用TypeScript?

了解为什么要使用TypeScript的时候我们有必要先了解什么是TypeScriptjavascript的一个超级,添加了静态数据类型和基于类的面向对象编程语言的特性,由c#架构师主持开发。

我们可以把它理解成一种生成标准javascript语言的语言,用一张图来说明下他们之间的关系

TypeScript编译javascript

1、使用简单,会使java,c#,as3的看看文档就很容易上手了。
2、方便代码的重用(类,继承),而且TypeScript生成的代码很干净整洁。
3、更好的组织代码,尤其是大型项目(模块,命名空间)
4、我认为TypeScript是未来javascript的一种过渡。未来的ES标准应该向TypeScript靠拢。

安装配置

首先要在本机安装Node.js环境,然后使用Node.js的包管理工具npm安装TypeScript,安装命令如下:

npm install -g TypeScript

简单使用

安装好TypeScript后,在D盘新建一个名叫TypeScript-demo的目录,打开记事本在里面写入如下代码:

    class Animate {

        animateType: string;//动物属性
        animateName: string;//动物名称

        // 构造方法
        constructor(animateType: string, animateName: string) {
        this.animateType = animateType;
        this.animateName = animateName;
        };
        //移动的方法

        run() {
        // return "<h1>我是一只【" + this.animateType + "】我叫【" + this.animateName + "】我正在移动......</h1>";
        console.log("我是一只【" + this.animateType + "】我叫【" + this.animateName + "】我正在移动......");
        }
    }

    //实现继承
    class FlyAnimate extends Animate {

        speed: number;//飞行速度
        height: number;//飞行高度

        constructor(speed: number, height: number, animateType: string, animateName: string) {
        super(animateType, animateName);
        this.height = height;
        this.speed = speed;

        }

        run() {//重写父类的移动方法
        super.run();//继承父类的移动方法
        //添加自己特有的移动方式
        console.log("我正在飞行,速度【" + this.speed + "】高度【" + this.height+"】米");

        }
    }

        // let dog: Animate = new Animate("小狗", "dog");
        // document.body.innerHTML = dog.run();

        //实例化Animate对象
        let dog: Animate = new Animate("小狗", "dog");
        dog.run();
        console.log("-------------------------------------")
        //实例化FlyAnimate对象
        let fly:FlyAnimate=new FlyAnimate(10,100,"小鸟","小小鸟");
        fly.run();

然后把这段代码另存为typescript-1.ts到当前目录下的src目录下。一个typescript文件编写好了,现在编写好的文件是不能直接在浏览器中执行的,所以要在浏览器中运行这段代码,还需要通过typescript的编译器进行编译。

编译之前我们需要在当前目录下面新建立一个tsconfig.json,这个文件指定了这个项目的根文件和编译选项。这个文件可以是空文件,那么使用tsc进行编译的时候,编译器就会按照默认的编译选项进行编译。如果当前目录不存在这个文件,那么编译的时候编译器会逐级向上搜索父目录,当然也可在命令行中指定一个tsconfig.json文件,那么编译器会忽略当前目录下的tsconfig.json

编译配置文件tsconfig.json文件内容

        {
            "compilerOptions": {      
            "module": "commonjs",    #使用commonjs编译
            "target": "es5",         #ECMAScript目标版本为ES5
            "noImplicitAny": false,  #在表达式和声明上有隐含的'any'类型时报错。
            "outDir": "bin",         #编译后的输出目录
            "rootDir": ".",          #控制输出的目录结构
            "removeComments":true,   #删除所有注释,除了以/!*开头的版权信息
            "sourceMap": true,       #生成sourceMap 
            "sourceRoot":"src",      #*.ts源文件的所在目录 
            "outFile":"bin/.js"      #编译后多个文件合并成一个文件
            },
            "exclude": [
            "node_modules"           #此目录会被编译器忽略 
            ]
        }

通过tsc命令来编译

tsc  ./src/typescript-1.ts  #编译指定的文件,不加参数将编译tscongif.json中所配置的所有配置

运行结果

我是一只【小狗】我叫【dog】我正在移动......
-------------------------------------
我是一只【小鸟】我叫【小小鸟】我正在移动......
我正在飞行,速度【10】高度【100】米

我们可以到./bin目录中来看看TypeScript编译后的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 __());
    };

    /**匿名函数自动执行,然后把执行结果给Animate变量**/
    var Animate = (function () {

        /**构造函数    **/
        function Animate(animateType, animateName) {
        this.animateType = animateType;
        this.animateName = animateName;
        };
        /**在Animate的原型链上添加一个run方法**/    
        Animate.prototype.run = function () {
        console.log("我是一只【" + this.animateType + "】我叫【" + this.animateName + "】我正在移动......");
        };

        return Animate;
    })();


    var FlyAnimate = (function (_super) {
        __extends(FlyAnimate, _super);//继承父类的属性
        function FlyAnimate(speed, height, animateType, animateName) {
        _super.call(this, animateType, animateName);
        this.height = height;
        this.speed = speed;
        }
        FlyAnimate.prototype.run = function () {
        /**我们知道call()方法可以改变this的指向,_super替换this执行run()方法**/
        _super.prototype.run.call(this);
        console.log("我正在飞行,速度【" + this.speed + "】高度【" + this.height + "】米");
        };
        return FlyAnimate;
    })(Animate);


    var dog = new Animate("小狗", "dog");
    dog.run();
    console.log("-------------------------------------");
    var fly = new FlyAnimate(10, 100, "小鸟", "小小鸟");
    fly.run();

通过对注释我们对typescript编译后的js进行了简单的解读,你把两份代码放在一起看对比一下的时候你会发现用TypeScript写起来还是很舒服的。如果能通过一种简单的方式实现我们的需求,那么为什么不适用简单的方式呢。

更多关于的文档可以去TypeScript官网查看,或者TypeScript中文手册



本文完

本文如有误,请不吝赐教!

原文标题:使用TypeScript来写javascript代码

原文链接:https://www.wuhuan.me/2016/03/15/tyscript-getStart/

版权声明:保留署名-非商业性使用-禁止演绎 4.0 国际 | Creative Commons BY-NC-ND 4.0