学习Angular前了解下TypeScript
Angular2对比于Angular1就像是Java与Javascript,正因为变化巨大,用AngularJS来代表1.x版本,而Angular代表2.x、4.x、5.x等后续版本。参考《Angular权威教程》记录一下Angular家族史,本文简介一下TypeScript。 原文链接 TypeScriptAngular是用一种类似于JavaScript的语言--TypeScript构建的。 TypeScript相对于ES5有五大改善:
类型TypeScript的类型是可选的。 字符串字符串包含文本,声明为string类型: var name: string = 'hello world!'; 数字无论整数还是浮点,在TypeScript中,所有数据都是用浮点数表示: var age: number = 25; 数组数组用Array类型表示,因为数组是一组相同数据类型的集合,所以还需要为数组中的项目指定一个类型 var arr: Array<string> = ['component','provider','pipe']; 或 var arr: string[] = ['component','pipe']; var arr: Array<number> = [1,2,3,4,5,6]; 或 var arr: number[] = [1,6]; 枚举枚举是一组可命名数值的集合, enum Man {age,iq,eq}; var man: Man = Man.age; 任意类型如果没有为变量指定类型,那它的默认类型就是any,any类型的变量能够接收任意类型的数据 var something: any = 'hello world'; something = 1; something = [1,3]; "无"类型void表示不期望那里有类型,通常用作函数的返回值,表示没有任何返回值 function setName(name: string): void { this.name = name; } void类型也是一种合法的any类型 类es5中采用的是基于原型的面向对象设计,并不使用类,而是依赖于原型 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); 构造函数构造函数是当类进行实例化时执行的特殊函数,通常会在构造函数中对新对象进行初始化 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,this.y); } } var p: Point = new Point(1,1); p.moveTo(10,10); 继承面向对象的另一重要特性就是继承,继承表明子类能够从父类得到它的行为,然后可以在这个子类中重写、修改或添加行为 创建父类 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中还有很多优秀的语法特性,序幕才刚刚拉开。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |