ts的数据类型

ts必须指定数据类型（给人理解将数据类型分成3种）
1.js有的类型
boolean类型、number类型、string类型、array类型、undefined、null
2.ts多出的类型
tuple类型（元组类型）、enum类型（枚举类型）、any类型（任意类型）
3.特别的类型
void类型（没有任何类型）表示定义方法没有返回值
never类型：是其他类型（包括null和undefined）的子类型，代表从不会出现的值
这意味着声明never变量只能被never类型所赋值

// 第一种定义array类型方法
var arr1:number[] = [1,2,3]
// 第二种定义array类型方法
var arr2:Array = [11,22,33]

  1. // 定义元组类型的方法
  2.     let arr3:[number,string] = [111,'111']
  4. // 定义enum枚举类型方法（在程序中用自然语言和计算机状态联系起来，方便理解）
  5.     enum Flag {success=1,error=2}
  6.     let s:Flag = Flag.success
  7.     console.log(s)
  9.     enum Color {red,blue,orange}
  10.     let num:Color = Color.red
  11.     console.log(num)
  13. // 定义any任意类型方法
  14.     var num1:any = 123
  15.     num1 = true
  16.     var obox:any = document.getElementById('box')
  17.     obox.style.color = 'red'
  19. // undefined类型
  20.     var num2:number | undefined
  21.     console.log(num2)
  23. // void类型,函数没有返回值
  24.     function run():void{
  25.         console.log('run')
  26.     }
  28.     function run1():number{
  29.         return 123
  30.     }
  32. // never类型定义方法
  33.     var a:undefined
  34.     a = undefined
  36.     var b:null
  37.     b = null
  39.     // var c:never
  40.     // c = (()=>{
  41.     //     throw new Error('错误')
  42.     // })()

函数的声明

// es5函数声明
function run3(){
return ‘run’
}
// es5匿名函数
var run4 = function(){
return ‘run’
}

  1.     // ts函数声明<br />        function run5():string{<br />            return 'run'<br />        }<br />        // ts匿名函数<br />        var run6 = function():number{<br />            return 123<br />        }
  3.     // ts中定义方法传参<br />        function getInfo(name:string,age:number):string{<br />            return 'info'+`$(name)---$(age)`<br />        }<br />        var getInfo1 = function(name:string,age:number):string{<br />            return 'info'+`$(name)---$(age)`<br />        }<br />        // 没有返回值的方法<br />        function getInfo2():void{<br />            console.log(123)<br />        }

方法可选参数，在参数后面加？变为可选参数，可选参数必须配置到参数的最后面
function getInfo3(name:string,age?:number):string{
if(age){
return ‘info’+$(name)---$(age)
}else{
return ‘info’+$(name)---年龄保密
}
}

默认参数 es6和ts都可以设置默认参数
function getInfo4(name:string,age:number=20):string{
if(age){
return ‘info’+$(name)---$(age)
}else{
return ‘info’+$(name)---年龄保密
}
}
getInfo4(‘张三’,30)

剩余参数
function sum(a:number,b:number,c:number):number{
return a+b+c
}
sum(1,2,3)
// 三点运算符接收传过来的值
function sum1(…result:number[]):number{
var sum = 0
for(var i=0;i sum += result[i]
}
return sum
}
sum1(1,2,3)

  1. function sum2(a:number,...result:number[]):number{<br />        var sum = 0<br />        for(var i=0;i<result.length;i++){<br />            sum += result[i]<br />        }<br />        return a + sum<br />    }<br />    sum1(1,2,3)

函数重载
// java重载是指两个或两个以上同名函数，但是函数参数不同，这时候会出现函数重载的情况
// ts重载是指通过一个函数提供多个函数定义来试下多种功能的目的
function getInfo5(name:string):string
function getInfo5(age:number):number
function getInfo5(str:any):any{
if(typeof str == ‘string’){
return str
}else{
return str
}
}
alert(getInfo5(123))
// 方法重载可以和函数选择传参一起用

箭头函数
setTimeout(function(){
alert(‘run’)
},1000)
setTimeout(()=>{
alert(‘run’)
},1000)

ES5的类
function Person(){
this.name=’zhangsan’
this.age=20 }
var p = new Person()

构造函数和原型链添加方法
function Person(){
this.name=’zhangsan’
this.age=20
this.run = function(){
alert(‘yundong’)
}
}
Person.prototype.sex = ‘男’
Person.prototype.work = function(){
alert(‘work’)
}
var p = new Person()

类里面的静态方法
function Person(){
this.name=’zhangsan’
this.age=20
this.run = function(){
alert(‘yundong’)
}
}
Person.getInfo = function(){
alert(‘我是静态方法’)
}
Person.prototype.sex = ‘男’
Person.prototype.work = function(){
alert(‘work’)
}
var p = new Person()
// 调用静态方法
Person.getInfo()

es5里面的继承 原型链加对象冒充组合的方式
// 对象冒充可以实现构造函数的继承，但是没办法实现构造函数的继承
function Web(){
Person.call(this)
}
var w = new Web()
//5. 改善
Web.prototype = Person.prototype
var w1 = new Web()

原型链继承时如果需要传参，那么实例化子类无法传参
function Web1(name,age){}
Web.prototype = new Person()
// 改善
function Web2(name,age){
Person.call(this,name,age)
}
Web.prototype = new Person()
// 想办法继承原型链上和构造函数的方法

ts的类

//1.
function Person1(name,age){
this.name=’zhangsan’
this.age=20
this.run = function(){
alert(‘yundong’)
}
}
Person.prototype.sex = ‘男’
Person.prototype.work = function(){
alert(‘work’)
}
var p = new Person1(‘zhangsan’)
//2.
class Person3{
name:string //属性，前面省略了public关键词
constructor(name:string){ //构造函数 实例化类的时候触发的函数
this.name = name
}
getName():string{
return this.name
}
setName(name:string):void{
this.name=name
}
}
var p1 = new Person3(‘zhangsan’)

// ts实现继承
class Person4{
name:string
constructor(name:string){
this.name=name
}
run():string{
return $(this.name)在运动
}
}
// var p2=new Person4(‘wangwu’)
// alert(p2.run())
class Web4 extends Person4{
constructor(name:string){
super(name)
}
}
var w = new Web4()
alert(w.run())

  1. // 3.类里面的修饰符，ts三种：public（公类、子类、类外面） protected（类外面不能访问） private（子类、类外面不能访问）
  3. // 4.静态属性 静态方法<br />    class Person{<br />        name:string<br />        constructor(name:string){<br />            this.name = name<br />        }<br />        run(){<br />            alert('这是实例方法')<br />        }<br />        static print(){<br />            alert('这是静态方法')<br />            // 静态方法没办法直接调用类里面的属性<br />        }<br />    }<br />    var p = new Person('zhangsan')<br />    p.run()<br />    Person.print()

ts中的多态

// 父类定义一个方法不去实现，让继承它的子类去实现，每一个子类有不同的表现多态属于继承
class Animal{
name:string
constructor(name:string){
this.name = name
}
eat(){
console.log(‘吃的方法’)
}
}
class Dog extends Animal{
constructor(name:string){
super(name)
}
eat(){
return this.name+’吃肉’
}
}
class Cat extends Animal{
constructor(name:string){
super(name)
}
eat(){
return this.name+’吃粮食’
}
}