TypeScript 学习（一）

JavaScript是一种轻量级的解释性脚本语言，是弱类型的语言。
没有静态类型检查，代码重构复杂，没有语言服务，没有命名空间，没有模块化
不太适合开发大型程序

一、简介

TypeScript 由微软开发的自由和开源的编程语言。
是JavaScript的一个超集，添加了可选的静态类型检查和基于类的面向对象编程。

二、优势

1. 类型批注和编译时类型检查
   TypeScript 通过类型批注提供静态类型在编译时进行类型检查。
   最简单的，你可以声明变量的类型，那么任何其他类型的赋值将会引起编译错误。
   常见的数据类型

   let isDone: boolean = false
   let myName: string = 'Tom'
   let isNumber: number = 23
   let newArray: number[] = [1, 2, 3, 4]  // 正确
   let newArray2: number[] = [1, ‘3’, 2, 3, 5]  // 错误
   

   前面指定了数组的每项值是numebr类型，那么数组每项就要对应这个数据类型
   例如 string let newArray3: string[] = [ ‘1’, ‘2’, ‘3’, ‘4’, ‘name’]
   特殊的:
   a、void 类型的变量 undefined 和 null
   表示没有任何返回值的函数 或者 声明一个没有什么用 void 类型的变量
   let unusable: void = undefined;
let unusableNull: void = null;
function alertName(): void { console.log(‘My name is Tom’); }
   b、任意值 any
   let myFavoriteNumber: any = ‘seven’;
myFavoriteNumber = 7; //是 any 类型，则允许被赋值为任意类型
   函数的类型检测
   函数声明： 一个函数有输入和输出，要在 TypeScript 中对其进行约束，需要把输入和输出都考虑到，其中函数声明的类型定义较简单输入多余的（或者少于要求的）参数，都是是不被允许的
   function sum(x: number, y: number): number { return x + y; }
   该函数已经指明 sum 函数的参数x y 都为number； 函数的返回数据也指明为number
   函数的表达式
   let mySum: (x: number, y: number) => number = function (x: number, y: number): number { return x + y;};
   当类型没有给出时，TypeScript 编译器利用类型推断以推断类型。
   如果缺乏声明类型默认为是 any 类型。

2. 类
   类(Class)：定义了一件事物的抽象特点，包含它的属性和方法。
   传统的 JavaScript 的 class 是使用函数和原型链 prototype 的方式用来模拟类。
   TypeScript 中的 class，用到了 公共public，私有private，受保护protected，只读readonly ， 静态属性 static， 抽象 abstract， 存取器 get 和 set，构造函数 constructor 等。
   对象（Object）：类的实例，通过 new 生成。
   面向对象（OOP）的三大特性：封装、继承、多态。
   封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据。
   继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性。
   多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal，但是分别实现了自己的 eat 方法。此时针对某一个实例，我们无需了解它是 Cat 还是 Dog，就可以直接调用 eat 方法，程序会自动判断出来应该如何执行 eat。
   存取器（getter & setter）：用以改变属性的读取和赋值行为。
   修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法。
   抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现。
   ES6 的class
   class Animal {
constructor(name) { this.name = name; }
sayHi() { return 'My name is ’ + this.name; }
}
let a = new Animal(‘Jack’);
console.log(a.sayHi()); // My name is Jack

   类的继承
   使用 extends 关键字实现继承，子类中使用 super 关键字来调用父类的构造函数和方法。

   class Cat extends Animal {
       constructor(name) {
           super(name); // 调用父类的 constructor(name)
           console.log(this.name);
       }
       sayHi() {return 'Meow, ' + super.sayHi(); // 调用父类的 sayHi()    }
   }
   let c = new Cat('Tom'); // Tom
   console.log(c.sayHi()); // Meow, My name is Tom
   

   存取器
   使用 getter 和 setter 可以改变属性的赋值和读取行为：

   class Animal {
       constructor(name) { 
       	this.name = name;    
       }
       get name() {
          return 'Jack';
      	}
       set name(value) {
          console.log('setter: ' + value);
       }
   }
   let a = new Animal('Kitty'); // setter: Kitty
   a.name = 'Tom'; // setter: Tom
   console.log(a.name); // Jack
   

   静态方法
   使用 static 修饰符修饰的方法称为静态方法，它们不需要实例化，而是直接通过类来调用：

   class Animal {
       static isAnimal(a) {return a instanceof Animal;  }
   }
   let a = new Animal('Jack');
   Animal.isAnimal(a); // true
   a.isAnimal(a); // TypeError: a.isAnimal is not a function
   

3. 模块化
   利用TypeScript的关键词module export import，可以达到类似于命名空间的效果，而export可以控制是否被外部访问
   导出声明
   numberRegexp.ts
   export const numberRegexp = ‘/^ [0-9]+$/’; // 声明导出
   import * from “./numberRegexp” // 引入文件
   默认导出
   默认导出使用 default关键字标记；并且一个模块只能够有一个default导出
   JQuery.ts
   declare let $: JQuery;
export default $;
   App.ts
   import $ from “JQuery”;
$(“button.continue”).html( “Next Step…” );

4. IDE支持
   a、语法提示
   在IDE中编写TypeScript的代码时，IDE会根据你当前的上下文，把你能用的类、变量、方法和关键字都给你提示出来
   b、重构
   重构是说你可以很方便的去修改你的变量或者方法的名字或者是文件的名字。当做出这些修改的时候，IDE会自动修改掉引用的这个变量或者调用这个方法地方的代码，提高开发效率，提升代码质量