typescript语法基本总结（上）

现在好多前端框架都开始支持typescript，ts本身支持es5和es6写法，但是ts本身对js语法进行了进一步封装，vue3.0开始全面支持，但是惭愧自己一直不了解ts，趁着这两天有时间，自己总结下，欢迎评论留言交流，如有不对的地方，会及时更正，还望见谅

1.全局安装typescript

npm install typescript -g

2，编译ts文件

1，新建文件 index.ts
内容随写上 console.log(‘你好’)
2，cmd在index目录下，执行tsc index.ts,会自动在统同级目录下生成index.js文件 

3.如果每次都要自动编译就会非常的麻烦，所以编辑器中可以配置一下，就是在你写ts文件的时候，会自动生成js文件 ，另一种不需要手动配置，一般在一些支持ts语法的框架中可以直接使用，因为webpack打包时候已经进行配置进行编译

手动配置vscode实时编译ts文件生成js文件
1.首先在项目中命令生成 tsconfig.json配置文件--运行命令 tsc --init
2.进入配置文件中，将配置项 outDir: './' 放开注释
3.查看菜单栏--任务-监视任务
    

4.ts中的数据类型和js语法中的数据类型还是略有不同的，ts为了使代码更加的规范，增加了类型的校验，这点和其他语言比较相似

布尔类型（boolean）  
数字类型number
字符串string  
数组 array
元组类型（tuple） 
枚举类型（enum）
任意类型（any）
null undefined void类型 never类型

代码示例：-字符串示例
var a：string = '123'
a= 113 // 由于上边指定了类型，下边就会报错

数组示例
var arr:number[] = [12,3,5] // 如果里边元素有一个是字符串的话就会error
var arr:Array = [12,2,3] // 如果元素有一个是字符串的话也是error

元组类型属于数组的一种：就是里边的类型可以是多种数据类型-给数组中每一个位置指定一个类型
var arr:[number,string] = [1,'hello']

枚举类型
enum Name {a,b,c}
enum Name {a =1,b=2,c=3}
var aa:Name =Name.a // 如上如果已经赋值的话，就直接打印出值1，如果没有的话，就打印下标0

任意类型和js中没有指定类型有点相似
var name:any = 23

underfind类型
示例：
var num:number
console.log(num ) // 会报错，因为没有赋值，是undefined

var num:undefined
console.log(num)  // 这样是正确的
也可以指定多类型
var num:number|undefined

null类型和上边同理
void类型：一般用于定义方法时候没有返回值，表示没有任何类型
function run():number{
    return 123
}
run()

never表示从不会出现的值

5.ts中函数的定义-参数和返回值指定类型

匿名函数
var fun = function(name:string,age:number):number{
    return 123
}
声明函数
function fun:string(name:string,age:number){
    return 123
}
么有返回值的函数
function fun():void{
    console.log(123)
}
fun()

6。方法中的可选参数-默认参数-剩余参数

方法中第二个参数可以传可以不传，参数后边加？号
function run (nameL:string,age？:number):string{
    return 123
}
run('zpc') // 可以直接调用
run('zpc',28) // 也可以


默认参数示例：es5中是不能设置默认参数，但是es6中和ts中可以设置默认参数
function run (nameL:string,age:number=20):string{
    return 123
}


三点运算符接受，传过来的参数
function sun (...result:number[]):number{
    
}
sum(1,2,3,4)

7.函数的重载--不会像es5中进行覆盖。会进行类型判断之后走哪个方法

8.typescript中的类

   es5中的类的定义：代码示例
    funtion Person(name){
        this.name = name
        this.run = function(){
            console.log(this.name)
        }
    }
    var p  = new Person('zpc')
    p.run //打印结果是zpc


   ts语法定义类：代码示例
    class Person{
        name:string;
        constructor(str:string){
            this.name = str;
        }
        run():viod{
            alert(this.name)
        }
        getName():string{
            return this.name
        }
        setName(name:string):void{
            thid.name = name            
        }
    
    }
    var p = new Person('zpc')
    p.run()
    p.getName()
    p.setName('lisi')
    

9.ts中实现继承

实现继承主要是两个关键字 super extends
class Person{
    name:string;
    constructor(name:string){ // 命令构造函数
         this.name = name;   
    }
    run():string{
        return `${this.name}在运动`
    } 
}
var p = new Person('zpc')
p.run() // 打印zpc在运动



class Web extends Person{ /// extends之后会自动继承父类的方法
    constructor(name:string){
        super(name) // 表示调用父类的构造函数：初始化父类的构造函数
    }
}
var w  = new Web('李四')
alert(w.run()) 

如果父类和子类中都有共同的方法的话，子类进行调用的话，会先执行子类的，如果子类中没有，找父类的

10.类里边的修饰符-定义属性的时候提供了三种修饰符

public:公有 ：类里边，外边，子类都可以访问
protected：保护类型 类里边，子类中可以访问，在类外边没法访问
provite：私有： 类里边可以访问，，，但是在类外边和子类中都没法访问

不加修饰符的话默认是public

11.静态属性和静态方法

es5中的静态方法示例：
function Run (){
    this.run1 = function(){}
}
Run.run = function(){} ---这个方法叫做静态方法
Run.run() -静态方法的调用

ts中静态方法一般比较少用，就是在类中使用关键字static,下边是代码示例：
class Person{
     name:string;
     age:number;
     constructor(name：string){
        this.name = name
    }
    static run(){ // 类名直接调用
        console.log('hello')
    }
}
Person.run()

12.抽象类：提供其他类继承的基类，不能直接被实例化，关键字abstract定义抽象类和抽象方法不包含具体实现，并且必须在派生类中实现

 

补一下ts中多态的概念：父类中定义的方法不去实现，让继承它的子类去实现，每一个子类都有不同的表现，就叫做多态

父类定义的抽象方法在子类中必须实现
abstract class Animal{
    public name:string;
    abstract  eat():any; 
    construcor(name:string){
        this.name = name
    }
}

class Dog extends Animal{
     construcor(name:string){
        super(name)
    }
    eat(){
        console.log(this.name + '吃肉')
    }
}

var a = new Dog('wangcai')
a.eat()

今天没时间总结先到这里，完事继续补上