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相对于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中还有很多优秀的语法特性,序幕才刚刚拉开。

学习Angular前了解下TypeScript相关推荐

  1. angular 模块构建_通过构建全栈应用程序学习Angular 6

    angular 模块构建 Angular 6 is out! The new features include better performance, new powerful CLI additio ...

  2. 学习NGUI前的准备NGUI的相关信息

    学习NGUI前的准备NGUI的相关信息 第1章  学习NGUI前的准备 NGUI是Unity最重要的插件,在Unity资源商店(Asset Store)的付费排行榜中始终名列前茅,如图1-1所示.本章 ...

  3. 学html css之前,学习CSS前必知HTML基础

    对于很多网页设计0基础的初学者而言,刚一接触css都会感觉云里雾里,不知怎样学习与理解.想当初小编也是这样,在什么基础都没有的前提下,直接看CSS.结果感觉好像在看天书一样.后来向大神请教之后才知道, ...

  4. 学习Linux前必备专业知识

    学习Linux前必备专业知识 glibc库文件 应用程序 库 内核 硬件 GNU提供程序/Linux内核 POS库兼容 Portable Operating System POSIX Linux 遵循 ...

  5. 瑜伽教学法 | <前屈-下犬式-山式串联口令>,手把手纠正口令不足,教你精准口令的秘诀!

    今天分享3位老师关于瑜伽课堂上常见的 <前屈-下犬式-山式>串联口令,并且和大家一起分析一下,这三个口令的优缺点,以及改善的方法,帮助大家取长补短,获得进步. 老师A: 山式站立,双脚分开 ...

  6. 【三维视觉】【深度学习】ubuntu18.04下PointNet官方代码Pytorch实现

    [三维视觉][深度学习]ubuntu18.04下PointNet官方代码Pytorch实现 提示:最近开始在三维深度学习方面进行研究,记录相关知识点,分享学习中遇到的问题已经解决的方法. 文章目录 [ ...

  7. [0 to 0.5]从零开始学习Android动画知识(下)

    [0 to 0.5]从零开始学习Android动画知识(下) 矢量动画(Scalable Vector Graphics) 不同于前面的为控件做动画效果的方法,矢量动画则是为图形做出动画效果 矢量图 ...

  8. angular新手如何学习angular?

    我分享一下我是如何入门Angular的,可能也不是最有效的方式,希望有些参考价值吧. 没有基础能学吗?     我的回答是能. 我在学习Angular之前甚至不知道前端的三大框架都有啥.没学过Java ...

  9. 从零开始的Java学习教程——一:学习JAVA前的准备

    学习Java前的准备 Java简单介绍 为什么学习Java Java开发环境的配置及目录内容简介 环境变量的配置 目录简介 bin include jre lib src Dos命令 DOS简介 打开 ...

最新文章

  1. 数据库 SQL语法一
  2. c语言判断一个分数是不是最简分数_青岛版六年级数学上册7.2小数、分数和百分数的互化微课视频 | 练习...
  3. spring boot plugin_spring-boot-starter-parent 与 spring-boot-dependencies
  4. 了解冒泡排序选择排序
  5. 如何修改SharePoint服务器场管理员帐户和密码
  6. js中解析json字符串
  7. pythonread读取怎么是乱码_python中如何读写文件不乱码
  8. Star Schema完全参考手册读书笔记八
  9. 通过利用“业务映射”来构建敏捷组织
  10. resize2fs调整ext2\ext3\ext4文件系统的大小
  11. 计算机网络原理-韩立刚-第四章 网络层
  12. ACM河南第八届省赛题
  13. Joiner.on和stream().map联合使用技巧
  14. win10专业版占多少空间_Win10系统
  15. 排列组合 C语言函数,排列组合(C递归版)
  16. 小甲鱼Python3学习笔记之第十讲(仅记录学习)
  17. 哈工大计算机科学与捄术学院,[哈尔滨工业大学]管理科学与工程
  18. mysql快速复制数据库中所有表及数据至另一个库中
  19. ad Hoc打包测试
  20. Linux下的Cannot find a valid baseurl for repo: base/7/x86_64问题记载

热门文章

  1. Http代理程序,基于hash缓存实现
  2. Solaris 常用命令
  3. SRM 397(1-250pt)
  4. Eclipse下配置主题颜色
  5. 《网络攻防实践》第二周作业
  6. 修改 Oracle 数据库 sequence(序列) 的 increment (步长)
  7. tornado(七)
  8. 前端console log之坑。。。
  9. percona-5.5安装笔记
  10. 禁止输入emoji表情