MyException - 我的异常网
当前位置:我的异常网» 互联网 » TypeScript便餐教程 (1) - 初识

TypeScript便餐教程 (1) - 初识

www.MyException.Cn  网友分享于:2013-12-18  浏览:0次
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];

 

点击有惊喜

文章评论

老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
每天工作4小时的程序员
每天工作4小时的程序员
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
老程序员的下场
老程序员的下场
我的丈夫是个程序员
我的丈夫是个程序员
程序员应该关注的一些事儿
程序员应该关注的一些事儿
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
程序员必看的十大电影
程序员必看的十大电影
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
我是如何打败拖延症的
我是如何打败拖延症的
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
那些争议最大的编程观点
那些争议最大的编程观点
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
Java程序员必看电影
Java程序员必看电影
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
漫画:程序员的工作
漫画:程序员的工作
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
总结2014中国互联网十大段子
总结2014中国互联网十大段子
旅行,写作,编程
旅行,写作,编程
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
10个调试和排错的小建议
10个调试和排错的小建议
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
 程序员的样子
程序员的样子
程序员和编码员之间的区别
程序员和编码员之间的区别
鲜为人知的编程真相
鲜为人知的编程真相
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
为什么程序员都是夜猫子
为什么程序员都是夜猫子
编程语言是女人
编程语言是女人
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
程序员的鄙视链
程序员的鄙视链
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有