美文网首页我爱编程
TypeScript快餐教程 (1) - 初识

TypeScript快餐教程 (1) - 初识

作者: Jtag特工 | 来源:发表于2017-11-02 20:29 被阅读72次

    TypeScript快餐教程 (1) - 初识

    JavaScript,更广泛点也许可以说是ECMA Script的各种实现,从��诞生到现在,一直就没断过争议。ECMA Script 4的夭折正是这些争论严重程度的重要体现。

    Anyway,不断争议如何,JavaScript的地位一直不曾被撼动。针对JavaScript存在的问题,可编译成JavaScript的语言一直就前�仆后继。

    这其中,DART,CoffeeScript和TypeScript是其中最有名的三个。

    DART由Google推出,设计者是大名鼎鼎的v8引擎作者Lars Bak.
    DART很像是一种传统的面向对象式的语言,比如很像Java。

    我们来看个小例子:

    class Point{
        number x, y;
        Point(this.x, this.y);
    }
    
    class ColorPoint extends Point{
      number color;
      ColorPoint(this.x,this.y,this.color);
    }
    
    main(){
      var p = new Point(1,1);
    }
    

    怎么样?这个语法比ECMA Script 6还需要用constructor()函数用起来更像Java吧?

    DART的优势:

    1. 在Google中被广泛使用
    2. 在Fuchsia操作系统中被用来写应用代码
    3. 语法特别适合Java/C#用户学习

    CoffeeScript是一门以发扬JavaScript的good part的小型语言。作者有比较好的Ruby功底,所以CoffeeScript写出来有较浓的动态语言的风格。
    例:

    a = 1
    if a is yes
        print (a + ' is yes')
    

    翻译成JavaScript�代码,是这样的:

    // Generated by CoffeeScript 1.10.0
    (function() {
      var a;
    
      a = 1;
    
      if (a === true) {
        print(a + ' is yes');
      }
    
    }).call(this);
    

    为了避免使用在JavaScript中比较trick的==操作符,CoffeeScript提供了is操作符来简化使用===带来的不快。
    另外,为了方便程序员的使用,CoffeeScript提供了yes和on作为true的别名。
    这样的小优化,在CoffeeScript中随处可见。

    CoffeeScript的最要优势之一是Github的编辑器Atom代码中使用了大量的CoffeeScript。并且Atom的plugin可以使用CoffeeScript开发。

    CoffeeScript的方向是更加自由,更像脚本语言一些,跟DART的像传统语言的方向基本上是背道而驰。

    下面,当当当当,我们的主角TypeScript就要出场了。

    �TypeScript比起Google的Dart���丝�毫不逊色,因为它也是出自名门,是微软公司的产品。他的主要负责人可是比Lars Bak成名早得多的大牛Anders Hejlsberg。Anders曾经领导开发了伟大的产品Turbo Pascal,Delphi和.Net及C#.

    �TypeScript通过tsc工具,将TypeScript转化为javascript,再执行javascript.

    TypeScriptv既然叫Type Script,有类型的脚本语言。我们这一讲就从类型说起。

    Type Script的类型

    可以声明多种类型 - 联合类型

    Type Script中第一个不同于其他同类语言的一点是,它支持一个变量可能是多种类型。

    比如我们有一个命令行参数,可能是一个字符串,也可能是一个字符串数组。这很好啊,我们就声明是两种类型就好了:

    var paras: string | string[];
    paras = "-a"
    paras = ["-a", "-t"]
    

    类型守护

    既然支持联合类型了,那么给静态检查就带来困难了啊。这可如何是好呢?TypeScript提供了类型守护功能,当Type Script能确认在一段代码中,确定是一个类型之后,就会对它按照这个类型来进行检查。

    比如我们按paras是string的情况来判断,那么在这个if块中,paras就是string.例:

    if (typeof paras === 'string') {
        console.log(paras + " is a string")
    } else {
        console.log(typeof paras);
    }
    

    非侵入式的类��型

    请允许我迫不及待地先介绍非侵入式的类型系统。
    非侵入式,也就是说,一个类,实现某个接口,只要实现了该接口要求的所有方法就可以了,并不需要像Java一样明确地用implements来进行说明。Go语言中就是这样做的,TypeScript也是如此,我们看个例子:

    interface Point{
        x: number;
        y: number;
    }
    
    class ColorPoint{
        color : Color
        constructor(public x ,public y){
            this.color = Color.Black;
        }
    }
    
    var cp : Point = new ColorPoint(1,1)
    

    Point接口定义了x,�y两个变量。ColorPoint类只要同样定义x,y两个同类型变量,就算是实现了Point接口。在�定义变量类型时,就可以用Point做他的类型了。

    这样是不是比DART那样用extends来写更有趣一些呢?

    不过,这只是TypeScript的语法糖,我们来看下tsc生成的js代码,Point直接被无视掉了:

    var ColorPoint = (function () {
        function ColorPoint(x, y) {
            this.x = x;
            this.y = y;
            this.color = Color.Black;
        }
        return ColorPoint;
    }());
    var cp = new ColorPoint(1, 1);
    

    枚举类型

    TypeScript支持枚举类型。从生成的代码来看,功能还是挺爽的。

    例:TypeScript源码:

    enum Color { Red, Green, Blue, Black, White, Yellow };
    var color1: Color = Color.Blue;
    

    生成的JavaScript代码:

    var Color;
    (function (Color) {
        Color[Color["Red"] = 0] = "Red";
        Color[Color["Green"] = 1] = "Green";
        Color[Color["Blue"] = 2] = "Blue";
        Color[Color["Black"] = 3] = "Black";
        Color[Color["White"] = 4] = "White";
        Color[Color["Yellow"] = 5] = "Yellow";
    })(Color || (Color = {}));
    ;
    var color1 = Color.Blue;
    

    数字和数组

    数值类型与JavaScript一样,只支持number类型。
    数组可以用数组方式写,也可以用��泛型的方式写:

    var num1: number = 10;
    var num2: any = 20;
    var num3: number[] = [1, 2, 3];
    var num4: Array<number> = [4, 5, 6];
    

    布尔类型

    TypeScript的布尔类型,理论上只支持true和false。
    但是实测下来,赋null和undefined也是可以的。

    例:

    var b1 : boolean = undefined;
    var b2 : boolean = null;
    var b3 : boolean = false;
    var b4 : boolean = true;
    

    TypeScript是一门检查型的语言

    TypeScript因为最终要生成JavaScript代码,所以很多都是一些编译期的检查。当生成JavaScript代码时,这些信息就�丢失了。

    比如上面布尔型的例子,生成的JavaScript代码,会把类型信息全部丢掉:

    var b1 = undefined;
    var b2 = null;
    var b3 = false;
    var b4 = true;
    

    数值的例子也是一样:

    var num1 = 10;
    var num2 = 20;
    var num3 = [1, 2, 3];
    var num4 = [4, 5, 6];
    

    所以,总结起来,对于基本类型,TypeScript主要是进行编译期检查,包括联合类型和类型守护皆是如此。一旦编译通过生成JavaScript,这些类型信息就将全部丢失。

    相关文章

      网友评论

        本文标题:TypeScript快餐教程 (1) - 初识

        本文链接:https://www.haomeiwen.com/subject/ktvapxtx.html