typtScript学习笔记

typescript是JavaScript的一个超集，添加了可选的静态类型和基于类的面向对象编程。可使用于react，angular，vue

typescript优点：更适合大型系统，跨平台能力更强（浏览器，操作系统），可编译纯js，提供了类。模块，接口，更易于组件的创建和维护。

环境安装

1、安装node+npm，node自带npm，安装完node -v，npm -v检测是否安装成功。

2、全局安装typescript，npm install typescript -g，安装好了tsc --version检测

3、项目初始化，生成package.json, npm init

4、初始化ts，生成tsconfig.json文件，tsc --init 。tsconfig.json文件用于配置如何编译成js文件

5、安装types/node包,npm install @types/node --dev-save ，用于开发环境，主要用于解决模块的声明文件的问题

6、新建你需要的文件x，写相关代码。

7、把ts转成js文件，vscode的菜单栏，任务->运行生成任务->tsc构建tsconfig，会生成xx.js文件.

支持的数据类型：

1、undefined:已声明但未赋值 var age:number; console.log(age); //undifined

2、number ：既支持整型也支持浮点型 var age:number = 18; var b=1.22; NAN 非数字

3、string：字符串 var a:string = 'hah'

4、boolean：布尔类型只有 true/false,0不会直接转为false

5、enum:枚举类型  enum HUMAN{man,faleman}; console.log(HUMAN.man); //1（索引） 

　  enum HUMAN{man=“男人”,faleman=“女人”}; console.log(HUMAN.man); //男人（值） 

6、any:任意类型 var t:any= 10 类型可以自动转换

7、null:空

8、array:数组类型

9、void:空类型

10、元祖类型

函数：形参需要定义类型，返回到数据需要定义类型,?:可选的参数

function searchWomen(age:number=18，sex?:string,...xxx:string[]):string{//参数需要添加类型，age:number=18 设置默认值，sex?:string可选传参数，:string{函数返回值的类型；...xxx:string[]不确定参数类型时使用es6解构赋值的方式传参

　　return age + '岁'

}

类，继承，重写：

class X {//类X
  public sex:string //公开属性
  protected name:string //限制属性
  provide age:number //私有属性
  constructor (sex:string,name:string,age:number) {
    this.sex = sex
    this.name = name
    this.age = age
  }
  pubic interest(){ //公开方法
    cosole.log('吃吃吃')
  }
  protected love(){ //限制方法
    cosole.log('爱小花')
  } 
  provite bankPsd(){ //私有方法
    cosole.log('123456')
  }  
}
let xiaoming:X = new X('男'，'小明'，'18')
xiaoming.interest()//吃吃吃

//类的继承，类的重写
class Xx extends X { //extends关键字表示Xx完全继承X的属性及方法
    //Xx私有属性
    public skill:string
    constuctor(skill:string){
       this.skill = skill
    }
    //Xx私有属性
    public play(){
       console.log('打篮球')
    }
    //重写interest()
    public interest(){
        super.interest() //表示继承父类
        console.log('建立电商平台')
    }
}

接口：interface关键字，用于定义技术规范

interface Husband {//定义一个接口
    sex:string
    interest:string
    maiBaoBao?:Boolean
}
let myhusband:Husband ={ sex:'男',interest:'看书、作家务',maiBaoBao:true}
console.log(myhusband)

命名空间：namespace关键字，用于模块之间合作开发，避免命名冲突

namespace shuaiGe{
    export class Dehua{
        public name:string = '刘德华'
        talk(){
            console.log('我是帅哥刘德华')
        }
    }
}
namespace bajie{
    export class Dehua{
        public name:string = '马德华'
        talk(){
            console.log('我是二师兄马德华')
        }
    }
}
let dehua1:shuaiGe.Dehua = new shuaiGe.Dehua()
let dehua2:shuaiGe.Dehua = new bajie.Dehua()
dehua1.talk()//我是帅哥刘德华
dehua2.talk()//我是二师兄马德华