TypeScript简介
TypeScript是ES6的一个超集,ES6是ES5(也就是俗称的普通的JavaScript)的下一个版本的JavaScript,TypeScript代码可以通过转译器来转化成ES5代码(因为目前支持ES6的浏览器也并不是很多,所以TypeScript还是要转换成相应的ES5代码在浏览器上运行,虽然Angular也提供有ES5 API,但是TypeScript加入的新功能值得我们去使用它)
TypeScript的新特性
TypeScript相比于ES5有五大改善
- 类型
- 类
- 注解
- 模块导入
- 语言工具包
类型
TypeScript相比于ES6最大的改善是增加了类型系统,比如
var name: string;
- 字符串——string
var name: string = 'Test';
- 数字——number
在TypeScript中,所有的数字都属于number类型,整型和浮点都是作为浮点数来处理的
var age: number = 36;
- 布尔类型——boolean
TypeScript中使用true和false作为布尔类型的值
var isRainning: boolean = false;
- 数组——Array/T[]
数组有两种表示方式分别为“Array<类型>”以及“类型[]”
var students: Array<string> = ['John','Tony'];
var students: string[] = ['John','Tony'];
- 枚举——enum
类似于java以及C++中的枚举类型,TypeScript中的枚举类型也是用enum来声明,如果不指定枚举类型的初始值,那么枚举中其他项的值会设置为依次递增的
enum Computer {Lenovo, Dell, Aser};
var computer: Computer = Computer.Lenovo;
- 任意类型——any
如果没有为变量指定类型,那么它的默认类型就是any,any类型的变量可以接受任何类型的数据
var something: any = 'anything';
something = 1;
something = [1,2,3];
- “无”类型——void
通常用作函数返回值
function setName(name: string): void{
this.name = name;
}
类
用class关键字来定义一个类
class Test{
...
}
- 属性
属性就是类中包含的数据,类似于java中类的成员变量的声明,不过TypeScript没有访问权限的声明,默认为公有变量
class Person{
first_name: string;
last_name: string;
age: number;
}
- 方法
方法就是类中包含的成员函数,如果没有显示声明方法的返回类型和返回值,那么默认为返回any类型
class Person{
first_name: string;
last_name: string;
age: number;
// 返回void类型,void类型也是一种any类型
greet() {
console.log("Hello",this.first_name);
}
ageInYear(years: number): number{
return this.age + years;
}
}
- 对象的声明与实例化
使用new关键字实例化一个对象
var p: Person;
p = new Person();
p.first_name = 'Felipe';
p.greet();
- 构造函数
当类没有显示定义构造函数的时候,将自动创建一个无参构造函数,构造函数必须命名为constructor,在TypeScript中每个类只能有一个构造函数
class Person{
first_name: string;
last_name: string;
age: number;
constructor(fName: string, lName: string, age:number){
this.first_name = fName;
this.last_name = lName;
this.age = age;
}
}
- 继承
在TypeScript中使用extends关键字实现继承,跟java中类似的是,子类中要使用super关键字来访问父类中的参数
class Student extends Person{
studentId: string;
constructor(fName: string, lName: string, age:number, sId: string){
super(fName,lName,age);
this.studentId = sId;
}
}
工具
ES6和TypeScript提供了许多语法特性,其中最重要的亮点是
-胖箭头函数语法
-模板字符串
- 胖箭头函数——=>
胖箭头函数用于简化函数作为方法参数时的写法,胖箭头可以用作表达式和语句
// ES5 code
var data = ['test1','test2','test3'];
data.forEach(function(line) {console.log(line);})
// TypeScript code
var data:string[] = ['test1','test2','test3'];
data.forEach((line) => {console.log(line)});
- 模板字符串
使用反引号将文本扩起来
字符串中的变量——在字符串中插入变量,不必用“+”来进行拼接
var firstName:string = 'Nate';
var lastName:string = 'Murray';
var greeting:string = `Hello${firstName}${lastName}`;
多行字符串——用于写多行字符串
var template = `
<div>
<h1>Hello</h1>
</div>
`