TypeScript

TypeScript是什么
Type+EcmaScript6
TypeScript是JavaScript的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的JavaScript代码。由于最终
在浏览器中运行的仍然是JavaScript, 所以TypeScript并不依赖于浏览器的支持，也并不会带来兼容性问题。
TypeScript是JavaScript的超集，这意味着他支持所有的JavaScript语法。并在此之上对JavaScript添加了- -些扩
展，如class / interface / module等。这样会大大提升代码的可阅读性。
和JavaScript若类型不同，TypeScript这种强类型语言最大的优势在于静态类型检查,可以在代码开发阶段就预知一
些低级错误的发生。
●-种类似于JavaScript的语言，在JavaScript的基础之上增加了类型，同时增强了JavaScript部分语法功能
●遵循EcmaScript 6标准规范
●由微软开发
●Angular2框架采用TypeScript编写
●背后有微软和谷歌两大公司支持
●TypeScript可以编译成Javascript从而在支持Javascript的环境中运行
●TypeScript和javascript的关心就好比less和css的关系

javascript 是动态的
可以在执行阶段重新赋值不同的类型数据
.ts 后缀表示一个TypeScript文件
Typescript兼容es6
TypeScript为javascript增加了类型的概念
Typescript是强类型 一旦定义数据的类型 不能动态修改这 样帮我们在开发阶段避免很多低级错误

Why TypeScript

●从Angular2之后， 官方推荐使用TypeScript作为开发Angular应用的首选语言
遵循EcmaScript 6
●强大的IDE支持
。类型检查
。严谨的语法提示
●代码重构
●可读性良好

TypeScript使用场景

●大型团队开发
●Angular 官推语言
这里引用知乎上- -位开发者对使用推广TypeScript 的看法:
typescript绝对是好东西，不过推广是有难度的:
1、TS是微软制造，最好的开发工具是VS，想想有些人就激动了
2、即使你告诉他们TS有多好，但是几十人的团队里总有一半以上的人不想学新的东西
3、JSer很多没有学习00P开发经验(特别是从设计/页面重构转过来的) ;
4、很多人接触TS前根本没学过JS，经常有人问“使用TS如何写元素拖拽”这样的问题
TypeScript不仅仅用于开发Angular应用·
React
Angular
Node.js
Vue.js
WeChat
.
只要可以写JavaScript的都可以使用TypeScript
前置知识
EcmaScript 6
TypeScript概念以及关系
具有一定的javascript开发经验
有Java c# c++ c等静态类型语言使用经验更佳
如何学习TypeScript
●官方文档为准
●阅读别人的代码
●由于TypeScript是兼容EcmaScript 6的，所以在开发的时候不需要完全学会TypeScript再使用
●一个建议是有空就学，会了就用
●虽然兼容EcmaScript 6,但建议既然使用了TypeScript 就让你的TypeScript代码更加TypeScript,这样才能发挥出
TypeScript的威力。

搭建TypeScript开发环境

●什么是compiler?
●less编译器: less
●EcmaScript 6编译器: babel
●TypeScript 编译器: typescript
●- -句话:把TypeScript转换为JavaScript，浏览器就具有运行了
●在线测试编译环境compiler
。https://www.typescriptlang.org/play/index.html
●本地开发编译环境

npm i -g typescript
#查看版本号
tsc --version
#查看使用帮助
tsc --help

TypeScript的变量声明
var
作用域
重复声明
let
块级作用域
在同一个块中不能重复声明
const
声明时必须赋值
一定声明不可改变
对象可以修改
所以一般不使用var

数据的基本类型

布尔值

let isDone :boolean = true

数字

let num：number = 10；

字符串
类型
模板字符串
支持换行
支持内嵌表达式
和javascript一样可以使用双引号 也可以使用单引号 推荐单引号

 let nickname：string = ‘张三’；

还可以使用模板字符串（换行+嵌入表达式）

let nickname：string = ‘gs’；
let age：number = 37；
let sentene ：string = ~hello my nickname is $(nickname).

数组
TypeScript像javascript一样可以操作数组元素 有两方式可以定义数组 第一种 可以再元素类型后面接上[],表示由此类型元素组成的一个数组：

let list：number[] =[1,2,3];

第二种方式是使用数组泛型 Array<元素类型>

let list ：Array=[1,2,3];

元组
元组类型允许表示一个已知元素数量和类型的数组 各元素的类型不必相同 比如你可以定义一对值分别为string 和munber类型的元组

//Declare a tuple type
let x:[string,number];
//Initialize it
x=['hello',10];//ok
//Initialize it incorrectly
x=[10,'hello'];//Error

## Object
允许赋任意值
但是不能调用任意方法，即便它真的有

let foo：object = {
name: 'jack',
age:18
}

知道即可，用的很少 ，没有类型效验和语法提示
Any
有时候 ，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型，这些值可能来自于动态的内容，比如来自用户输入或者第三方代码库 这种情况下 我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查 那么我们可以使用 any类型来标记这些变量 .

let notSure：any = 4；
notSure =maybe a string instead“”；
notSure = false；//okay，definitely a boolean

Void
void 类型像是与any类型相反 它表示没有任何类型 当一个函数没有返回值时 你通常会见到其返回值类型是void：

function warnUser（）：Void{
alert（“this is my warning  message”）；
}

声明一个void类型的变量没有什么大用 因为你只能为它赋予underfined和null

let  unusable：void = underfined；

NUll和undefined
和void相似 他们的本身的类型用处不是很大

let u：undefined =undefined：
let n：null=null；

解构赋值

数组解构

let input = [1, 2];
let [first, second] = input;
console.log(first);//outputs 1
console.log(second);//outputs 2

上面的写法等价于：

 first = input[0];
 second = input[1];

利用解构赋值交换变量：

 [first, second] = [second, first];

对象解构

let o = {
    a: "foo",
    b: 12,
    c: "bar"
};
let{a,b} = o;

就像数组解构 你可以用没有声明的赋值：

let a: number,
    b: number;
({ a, b } = { a: 123, b: 456 })
    console.log(a,b)//123 456

你可以再对象里使用...语法创建剩余变量：

let{a，...passthrough}=0；
let total = passthrough.b+passthrough.c.length；

属性解构重命名
你也可以给属性以不同的名字：

let {a:newName，b：newName2}=.o；

注意，这里的冒号不是指示类型的。如果你想指定它的类型 仍然需要正在其后写上完整的模式

let {a,b}:{a:string,b:number}=o;

默认值

function keepWholeObject(wholeObject: { a: string, b?: number }) {
    let { a, b = 1001 } = wholeObject;
}

类的基本用法

class Person{
  name:string;
  age:number;
  //constructor 就是类的构造函数
  //当你new person的时候 就会自动调用constructor
  constructor(name:string,age:number){
    //typescript要求类的成员应该先被定义出来并确定类型
    this.name=name;
    this.age=age;
  }
  sayHello():void{
console.log(this.name,this.age)
  }
}
let pz = new Person('zd',18);
pz.sayHello();

类的继承

class Person{
  name:string;
  age:number;
  constructor(name:string,age:18){
    this.name=name;
    this.age=age;
  }
  eat(){
    console.log('吃饭');
  }
}
class Studet extends Person{
  constructor(name:string,age:number){
    super(name,age);
  }
}
let gs=new Studet('gs',21);
console.log(gs.age);
console.log(gs.eat());

类成员访问修饰

//类成员默认都是对外公开的
//类成员默认都是public
//private用来声明私有成员
//私有成员无法被继承
//我们可以吧不希望被外部修改的成员定义为私有的
//readonly 只读的不允许修改 作用跟const常量相似

class Person{
  public name:string;
  public age:number;
  //我们可以再声明类成员的同事为其赋值
  private readonly type ：string='人类';
  //和private类似 也是私有成员 外部无法直接访问
  //但是可以直接继承
  protected foo:string='bar';
  public getType(){
   //在类的内部访问私有成员
    //但是在外部无法被访问
    return this.type;
  }
} 
class Studet extends Person{
  getFoo(){
    console.log(this.foo)
  }
}

属性的get 和set用法

class Person{
  private _age:number;
  get age(){
    return this._age
  }
  set age(val){
    if(val<0){
      throw new Error('年龄不能为负数');
    }
    this._age=val;
  }
}
let gs = new Person();
gs.age=-10;

静态属性

static 关键字用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。
TypeScript

class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("num 值为 "+ StaticMem.num) 
   } 
} 
 
StaticMem.num = 12     // 初始化静态变量
StaticMem.disp()       // 调用静态方法

编译以上代码，得到以下 JavaScript 代码：
JavaScript

var StaticMem = /** @class */ (function () {
    function StaticMem() {
    }
    StaticMem.disp = function () {
        console.log("num 值为 " + StaticMem.num);
    };
    return StaticMem;
}());
StaticMem.num = 12; // 初始化静态变量
StaticMem.disp(); // 调用静态方法

输出结果为：
num 值为 12

实例成员只能通过new出来得实例访问
类成员也叫做类本身成员 只能通过本身访问
默认是实例成员 加上static变成静态成员

TYPESCRIPT中的抽象类

1.用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。
2. abstract抽象方法只能放在抽象类里面
3. 抽象类和抽象方法用来定义标准 。 标准：Animal 这个类要求它的子类必须包含eat方法
例子：

abstract class Animal{
public name:string;
constructor(name:string){
this.name=name;
}
abstract eat():any; //抽象方法不包含具体实现并且必须在派生类中实现。
run(){
console.log('其他方法可以不实现')
}
}
//var a=new Animal() /*错误的写法*/
class Dog extends Animal{
//抽象类的子类必须实现抽象类里面的抽象方法
constructor(name:any){
super(name)
}
eat(){
console.log(this.name+'吃粮食')
}
}
var d=new Dog('小花花');
d.eat();
class Cat extends Animal{

//抽象类的子类必须实现抽象类里面的抽象方法
constructor(name:any){
super(name)
}
run(){
}
eat(){
console.log(this.name+'吃老鼠')
}
}
var c=new Cat('小花猫');
c.eat();