Angular学习笔记（1）——TypeScript基础

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 codevar data = ['test1','test2','test3'];data.forEach(function(line) {console.log(line);})// TypeScript codevar 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>`