学习Angular前了解下TypeScript

typescript

Angular2对比于Angular1就像是Java与Javascript,正因为变化巨大,用AngularJS来代表1.x版本,而Angular代表2.x、4.x、5.x等后续版本。参考《Angular权威教程》记录一下Angular家族史,本文简介一下TypeScript。

原文链接

TypeScript

Angular是用一种类似于JavaScript的语言--TypeScript构建的。
TypeScript并不是一门全新的语言,而是ES6的超集。所有ES6代码都是完全有效且可编译的TypeScript代码。


typescript

TypeScript相对于ES5有五大改善:

  • 类型
  • 注解
  • 模块导入
  • 语言工具包

类型

TypeScript的类型是可选的。
不过,类型检查的好处在于:
1 有助于代码的编写,在编译期预防bug
2 有助于代码的阅读,清晰的表达作者意图

字符串

字符串包含文本,声明为string类型:

var name: string = 'hello world!';

数字

无论整数还是浮点,在TypeScript中,所有数据都是用浮点数表示:

var age: number = 25;

数组

数组用Array类型表示,因为数组是一组相同数据类型的集合,所以还需要为数组中的项目指定一个类型

var arr: Array<string> = ['component', 'provider', 'pipe'];
    或
var arr: string[] = ['component', 'provider', 'pipe'];

var arr: Array<number> = [1, 2, 3, 4, 5, 6];
    或
var arr: number[] = [1, 2, 3, 4, 5, 6];

枚举

枚举是一组可命名数值的集合,

enum Man {age, iq, eq};
var man: Man = Man.age;    

任意类型

如果没有为变量指定类型,那它的默认类型就是any,any类型的变量能够接收任意类型的数据

var something: any = 'hello world';
something = 1;
something = [1, 2, 3];

"无"类型

void表示不期望那里有类型,通常用作函数的返回值,表示没有任何返回值

function setName(name: string): void {
    this.name = name;
}

void类型也是一种合法的any类型

es5中采用的是基于原型的面向对象设计,并不使用类,而是依赖于原型
在es6中可以使用class表示内置的类,如:

class Point {
}

类可以包含属性、方法以及构造函数

属性

属性定义了类实例对象的数据,如:Point类中可以有x、y属性
类中的每个属性都可以包含一个可选的类型,如:

class Point {
    x: number;
    y: number;
}

方法

方法是执行在类对象实例上下文中的函数,在调用对象的方法前,要有这个对象的实例

class Point {
    x: number;
    y: number;

    moveTo(x: number, y: number) {
        this.x = x;
        this.y = y;
        console.log(this.x, this.y);
    }
}

var p: Point = new Point();
p.x = 1;
p.y = 1;
p.moveTo(10,10);

构造函数

构造函数是当类进行实例化时执行的特殊函数,通常会在构造函数中对新对象进行初始化
构造函数必须命名为constructor,因为构造函数在类被实例化时调用,所以可以有输入参数,但不能有返回值
当类没有显式定义构造函数时,将自动创建一个无参构造函数

class Point {
}
var p = new Point();

等价于

class Point {
    constructor() {
    }
}
var p = new Point();

带参构造函数

class Point {
    x: number;
    y: number;

    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }

    moveTo(x: number, y: number) {
        this.x = x;
        this.y = y;
        console.log(this.x, this.y);
    }
}    
var p: Point = new Point(1,1);
p.moveTo(10,10);

继承

面向对象的另一重要特性就是继承,继承表明子类能够从父类得到它的行为,然后可以在这个子类中重写、修改或添加行为
TypeScript完成支持继承特性,用extends关键字实现

创建父类

class Parent {
    name: string;

    constructor(name: string){
        this.name = name;
    }

    say() {
        console.log('NAME:' + this.name);
    }
}    

子类

class Child {
    age: number;

    constructor(name: string, age: number) {
        super(name);
        this.age = age;
    }

    say() {
        super.say();
        console.log(' AGE:' + this.age);
    }
}

var n: Child = new Child('vist', 25);
n.say();

总结

在TypeScript和ES6中还有很多优秀的语法特性,序幕才刚刚拉开。

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

推荐阅读更多精彩内容

  • { "Unterminated string literal.": "未终止的字符串文本。", "Identifi...
    一粒沙随风飘摇阅读 10,592评论 0 3
  • 概述 TypeScript本质上是向JavaScript语言添加了可选的静态类型和基于类的面向对象编程,同时也支持...
    oWSQo阅读 8,525评论 1 45
  • "Unterminated string literal.": "未终止的字符串文本。", "Identifier...
    两个心阅读 8,384评论 0 4
  • 又是一年愚人节。我们自己欺骗着自己活在这个愚人的世界里。这不是玩笑,我们深知它不可能是玩笑。我们假装不懂,假装愚笨...
    AlwaysForeverMO阅读 1,336评论 0 1
  • 温润的扬州,十月的秋风扫不下来落叶,却能摇落了一地金色的桂花,光灿灿地。 十月金秋的扬州,真是遍地是桂花。 图片发...
    勳君阅读 504评论 2 5