TypeScript学习

一、TypeScript介绍

1. TypeScript是由微软开发的一款开元的编程语言。
2. TypeScript是javascript的超集，遵循最新的 ES6、ES5规范。TypeScript扩展了JavaScript的语法。

特性

• 基于ECMAScript标准进行扩展，是JavaScript的超集
• 添加了可选静态类型、类和模块
• 可以编译成JavaScript，也可以和JavaScript一起运行
• 编译时检查，但不污染运行时

作用

• TypeScript拥抱ES2015以及ESNext草案规范，并且几乎第三方库都有TypeScript类型定义文件
• 类型系统可以在编译阶段发现大部分的错误，减少运行时错误

二、TypeScript 安装 编译

安装

npm install -g typescript
或者
yarn global add typescript

编译

tsc xxx.ts

三、基本类型

• 类型声明

  • 类型声明是TS非常重要的一个特点

  • 通过类型声明可以指定TS中变量（参数、形参）的类型

  • 指定类型后，当为变量赋值时，TS编译器会自动检查值类型是否符合类型声明，符合则赋值，否则报错

  • 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值

  • 语法：

  let str: string = '张三'
  let num: number = 1
  
  function fun(a: string,b: number):boolean{
    return false
  }

• 自动类型判断

  • TS拥有自动的类型判断机制
  • 当对变量的声明和赋值同时进行时，TS编译器会自动判断变量的类型
  • 所以如果你得变量的声明和赋值同时进行时，可以省略掉类型声明

• 类型：

  类型	例子	描述
  number	1,-2,2,45	任意数字
  string	'hi','hello',ddd	任意字符串
  boolean	true、false	布尔值true或者false
  字面量	其本身	限制变量的值就是该字面量的值
  any	*	任意类型
  unknown	*	类型安全的any
  void	空值（undefined）	没有值（或者undefined）
  never	没有值	不能是任何值
  object	{name:'张三',age:20}	任意的JS对象
  array	[1,2,3]	任意的JS数组
  tuple	[4,5]	元祖,描述有限的顺序的数组
  enum	enum Num{a,b}	枚举

四、interface 与 type

两者非常相似，都可以用来描述一个对象或者函数，在写法上存在一定的不同

• 描述一个对象

  interface User{
  name: string,
  age: number
  }
  
  type User = {
  name:string,
  age: number
  }

• 定义函数

  interface SetUser {
  (name: string,age: number): void
  }
  
  type SetUser = (name: string,age: number):void

• 继承 & 组合

  interface Name {
  name: string
  }
  
  interface User extends Name {
  age: number
  }
  
  type Name = {
  name: string
  }
  
  type User = Name & {age: number}

Type 和interface都支持互相组合

• type的主要应用场景在于类型别名以及联合类型和元祖的定义

  interface Person {
  name: string,
  age: number
  }
  interface Staff {
  job: string,
  salary: number
  }
  
  type People = Person | Staff
  
  type Pair<T> = [T,T]
  
  type PairList = Pair<number>
  
  let list:PairList = [1,2]

五、类型断言

function count(x: number | string,y:number):number{
  return x as number  + y
}

六、类

js没有严格意义上的类，ES6的class实现的继承不过也是基于原型链的语法糖。

相比较与es6中的class typescript做了一些扩展

• 抽象类

• 抽象方法

• 接口继承

• 访问限定符

  class Dog {
  constructor(name:string){
    this.name = name
  }
  public name:string  // public 修饰符 公有成员，对所有人都可见
  
  private changeName(name:string){ // private 修饰符 只能在类的本身调用，不能在类的实例和子类中调用
    this.name = name
  }
  protected age:number = 20; // protected 修饰符 受保护的成员，只能在类本身和子类中访问，不能在实例中访问
  
  readonly color:string = 'black'; // readonly 修饰符  只读属性，必须初始化
  
  static food:string = 'bones'; // 修饰符 静态成员，只能通过类名访问，类的静态成员可以被继承
  
  }