typeScript的基础(3)

一:TypeScript是什么?

1. 他是以javascript为基础构建的语言;

2. 他是一个javascript的超集;

3. 可以在任何支持javascript的平台中执行;

4. 他扩展了javascipt并添加了类型系统;

注意:Ts不能被解析器直接执行

二、Typescript安装编译

​ 在使用npm命令之前电脑必须得安装nodejs

​ 安装

npminstall-gtypescript
或者
cnpminstall-gtypescript
或者
yarnglobaladdtypescript

​ 运行：

tsc  helloworld.ts

​ 注意：如果电脑上面没有安装过cnpm，请先安装cnpm

npm install -g cnpm--registry=https://registry.npm.taobao.org

​ 注意：如果电脑上面没有安装过yarn请先安装yarn:

npm install -gyarn 
或者
cnpm install -gyarn

​ 三、Typescript开发工具Vscode自动编译.ts文件

​ 1.创建tsconfig.json文件tsc–init生成配置文件

​

2、老版本vscode点击:任务->运行任务->tsc:监视-tsconfig.json然后就可以自动生成代码了

3、最新版本vscode点击:终端->运行任务->typescript->tsc:监视-tsconfig.json然后就可以自动生成代码了

二.typeScript数据类型

​ TypeScript支持与JavaScript几乎相同的数据类型

注意:

• 在TypeScript中变量声明了是什么类型,它赋的值也必须和声明的类型一致,不然会报错
• 声明赋值可以同时进行,ts会自动对变量进行类型检测
• 下面赋的值会覆盖上面的值

typeScript的数据类型
布尔类型(boolean)
字符串类型(string)
数值类型(number)
数组类型(array)
元组类型(tuple)
枚举类型(enum)
任意类型(any)
null和undefined
void类型
never类型

布尔(boolean):

//布尔类型(boolean)   true false
var flag:boolean=true
flag=true

字符串(string):

//字符串类型(string)
  let str:string='hahah'
  str=12   //错误写法
  str=false   //错误写法
  str='你好'
console.log(str)

数值类型(number):

//数值类型(number)
 var a:number=123;
 console.log(a);
 a='string'   //错误写法
 a=boolean      //错误写法
 a=87.5
console.log(a)

数组类型(array)

/数组类型(array)  Ts中定义数组有两种方法
   //   es5 var  arr=[1,'2333',false]

   //1.第一种定义方法
         let arr:number[]=[1,2,366]
         console.log(arr)

        let arr:string[]=['html','css','php']
        console.log(arr)


   //第二种定义方法
         let  arr:Array<number>=[11,22,33];
         console.log(arr)

         let  arr:Array<string>=['html',"css","php"];
         console.log(arr)

元组类型(tuple):

在定义数组的时候,类型和数据的个数一开始就已经限定了

let arr:[string,number,boolean]=['str',123,true];
console.log(arr)

注意:元组类型使用的时候,数据的类型的位置和数据的个数,应该和定义元组的时候的数据一致

枚举类型(enum):

enum枚举类型是对javascript标准数据类型的一个补充

如果说我们有些数据是常用的,个数也是固定的,就可以把它定义为一种单独的数据类型,叫枚举类型

// 枚举类型(enum)
        enum flag {success=1,error=-1}
        var  f:flag=flag.success
         console.log(f)

        enum flag {success=1,error=-1}
        console.log(flag.error)

         enum Color {red,blue,cyan}
         var c:Color=Color.blue;
         console.log(c)  //  1  没有给值,默认是索引值

         enum Color {red,blue=5,cyan}
        // var c:Color=Color.red;
        // console.log(c)    //输出0

        // enum Color {red,blue=5,cyan}
        // var c:Color=Color.cyan;
        // console.log(c)     //输出6,以上一个为基础

任意类型(any):

可以存储任何类型的数据,当我们不知道当前数据是什么类型,但又想把他存起来可以用any类型

// 任意类型(any)
    var num:any=123;
 	num='456'
    num=true
    console.log(num)

当一个数组中要存储多个数据,个数不确定,类型不确定,也可以使用any类型

let aa:any[]=[1,'hello',true]
console.log(aa) //[1,'hello',true]

null和undefined

// null和undefined  其他类型的子类型
         var num:number;
        console.log(num)   //undefined  报错

          var num:undefined;
         console.log(num)    //undefined  正确
        
        var num:number | undefined;
         num=12;
        console.log(num)

        //定义未赋值
         var num:number|undefined;
         console.log(num)
         //一个元素可能是undefined或者是null
          var num:number|null|undefined;
          num=123;
         console.log(num)

void:

从某种程度上来说,void类型与any 类型相反,它没有任何类型,当一个函数没有返回值是,通常它的返回值类型是void

function run():void{
      console.log('run')
   }
 	run()

定义void类型的变量,可以接收一个undefined的值,但意义不大

let vd:void=undefined
console.log(vd)  //undefined

never:

never类型 其他类型的值 包括null和undefined 的子类型 代表从不会出现的值
这就意味着声明never的变量只能被never类型所赋值;

    var a:undefined;
    a=undefined;

    var  b=null;
    b=null;

三.函数类型

1.函数的定义

   function run:string{
        return '必须返回字符串'
    }
//匿名函数
var run2=function():number{
    return  123
}
alert(run2())

//ts定义方法传参
function getInfo(name:string,age:number):string{
        return `${name}------${age}`
    }

    alert(getInfo('zhangsan',20))
// 匿名函数
   var getInfo=function(name:string,age:number):string{
        return `${name}------${age}`
    }

    alert(getInfo('王五',20))

2.可选参数

​ es5里面方法的实参和形参可以不一样,但是ts中必须一样,如果不一样就要配置必 选参数

加个?就是可选参数,可选可不选

function getInfo(name?:string,age:number):string{
      if(age){
        return `${name}------${age}`
      }else{
        return `${name}------年龄保密`
      }
    }

    alert(getInfo('zhangsan'))

3.默认参数

​ es5终不能选默认参数,es6和ts都可以有默认参数

注意:可选参数必须配置到参数最后面,有参数传入,默认值不起作用

   function getInfo(name:string,age:number=20):string{
        if(age){
            return `${name}------${age}`
        }else{
            return `${name}------年龄保密`
        }
    }

    // alert(getInfo('zhangsan'))   //zhangsan---20
    alert(getInfo('zhangsan',30))   //zhangsan---30

4.剩余参数

​ …运算符接收新传过来的值

 function sum(a:number,...result:number[]):number{
//解释:a=1,result=2,3,4,5,6
            var sum=0;
            for(var i=0;i<result.length;i++){
                sum+=result[i]
            }
            return sum;
        }
        alert(sum(1,2,3,4,5,6))  //21

5.函数重载

​ 多个函数方法名是一样的

function getInfo(name:string):string;
        function getInfo(age:number):number;
        function getInfo(str:any):any{
                if(typeof str=='string'){
                    return '我叫'+str
                }else{
                    return '我的年龄是'+ str
                }

        }
        // alert(getInfo('张三'))   //我叫张三
        alert(getInfo(30))   //我的年龄是30

6.箭头函数 es6

   setTimeout(()=>{
            alert('123')
        },1000)

ES5的类和继承

  function Person(){
            this.name='张三';
            this.age=18;
            this.run=function(){
                alert(this.name+'在跑步')
            }
        }
  //原型链
        //通过原型链添加属性
        // 注意:原型链上的属性会被多个实例共享,构造函数的属性不会
        Person.prototype.sex='男';
        //通过原型链添加方法
        Person.prototype.work=function(){   //实例方法
            alert(this.name+'在工作')
        }
        //静态方法
        Person.getInfo=function(){
            alert('我是静态方法')
        }

        var p=new Person();

        alert(p.name)   //张三
        p.run();   //张三在跑步
        调用原型链上的方法
        p.work()  //张三在工作
        调用静态方法
        Person.getInfo()

es5里的继承 对象冒充实现继承

​ 对象冒充可以继承构造函数的属性和方法

​ 对象冒充可以继承构造函数的属性和方法,但是没办法继承原型链的属性和方

 function Person(){
            this.name='张三';
            this.age=18;
            this.run=function(){
                alert(this.name+'在跑步')
            }
        }

        Person.prototype.sex='男';
        Person.prototype.work=function(){   //实例方法
            alert(this.name+'在工作')
        }
        //web类  继承person类  原型链UI想冒充组合继承模式
        function Web(){
            Person.call(this)   /* 对象冒充实现继承*/
        }
        var w=new Web();
        // w.run();      
        w.work();    

es5继承 原型链继承

​ 好处:原型链实现继承既可以实现构造函数里的属性和方法的继承,又可以实现原型链里的继承

 function Person(){
            this.name='张三';
            this.age=18;
            this.run=function(){
                alert(this.name+'在跑步')
            }
        }

        Person.prototype.sex='男';
        Person.prototype.work=function(){   //实例方法
            alert(this.name+'在工作')
        }
        //web类  继承person类  原型链UI想冒充组合继承模式
        function Web(){
           
        }
        Web.prototype=new Person()   //原型链实现继承
        var w=new Web();
        // w.run();    //张三在跑步
        w.work();      //张三在工作

TS中类:

//ts类中的定义和使用
class aa{
	//定义属性
	name:string
	age:number
	sex:string
	//定义构造函数
	constructor(name:string='花花',age:number=18,sex:string='女'){
		this.name=name
		this.age=age
		this.sex=sex
	}
	//定义实例方法
	bb(){
		console.log(`我是${this.name},今年${this.age}岁,性别${this.sex}`)
	}
}
//实例化对象
const cc=new aa()
cc.bb() //我是花花,今年18岁,性别女

TS实现继承

class cc{
	//定义属性
	name:string
	age:number
	//定义构造函数
	constructor(name:string,age:number){
		//更新属性
		this.name=name
		this.age=age
	}
	//定义实例方法
	aa(){
		console.log(`我是${this.name},今年${this.age}`)
	}
}

定义一个类,作为子类,继承

//定义一个类,作为子类
class dd extends cc{
	constructor(name:string,age:number){
		//调用父类中的构造函数,使用super
		super(name,age)
	}
	//调用父类中的方法
	aa(){
		console.log('我是子类中的aa方法')
		//调用父类中的aa方法
		super.aa()
	}
}

实例化

//实例化父
const person=new cc('父',11)
person.aa()
//子
const stu=new dd('子',1)
stu.aa()

类里面的修饰符

public :公有 在类里面,子类,类外面都可以访问;

protected:保护类型 在类里面和子类里面可以访问,类外面不能访问;

private :私有 在类里面可以用,类外面和子类不能用

.注意:属性如果不写修饰符默认是公有的(public)

public :

公有 在类里面,子类,类外面都可以访问;

class aa{
	public name:string
    public constructor(name:string){
        this.name=name
    }
}
const b=new aa('张三')
console.log(b.name) //张三

protected:

保护类型 在类里面和子类里面可以访问,类外面不能访问;

class aa{
	protected name:string
    constructor(name:string){
        this.name=name
    }
}
class bb extends aa{
	constructor(name:string){
		super(name)
	}
	cc(){
		console.log('hello',this.name) 
	}
}
const c=new bb('李四')
c.cc() //hello 李四

private :

私有 类中的成员如果使用private来修饰,那么外部是无法访问到这个成员的

class aa{
	private name:string
    public constructor(name:string){
        this.name=name
    }
}
const b=new aa('张三')
console.log(b.name) //报错属性"name"为私有属性,只能在类"aa"中访问

子类也不能访问:

class bb extends aa{
	constructor(name:string){
		super(name)
	}
	cc(){
		console.log('hello',this.name) //报错属性"name"为私有属性,只能在类"aa"中访问
	}
}

总结:
安装typescript以及配置vscode里的自动监听
typescript里的数据类型,
复习了ES5里的类和继承;
typeScript里的类,继承,静态方法