TypeScript快餐教程 (1) - 初识

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,这些类型信息就将全部丢失。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,519评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,842评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,544评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,742评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,646评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,027评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,513评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,169评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,324评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,268评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,299评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,996评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,591评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,667评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,911评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,288评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,871评论 2 341

推荐阅读更多精彩内容