欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

es5的JavaScript语法和TypeScript的比较

程序员文章站 2022-09-11 15:08:26
1.变量(基础类型和定义) typescript定义变量需要指定变量的类型,后面不许更改变量的类型 1>定义 let 和 var 和const的区别 let定义的变量...

1.变量(基础类型和定义)

typescript定义变量需要指定变量的类型,后面不许更改变量的类型

1>定义

let 和 var 和const的区别

let定义的变量只在作用域中起作用,出来作用域就会被销毁

var在指定作用域中起作用

比如:都在函数中定义for循环,let只能在for循环中使用,var可以在整个函数中使用

const 定义的变量不可以修改值,是一个常量

2>基础类型

//boolean
let isdone: boolean = false;

//number
let decliteral: number = 6;

//string
let name: string = "bob";

//对象object
let info:object = {};

//数组array<元素类型>或number[]
let list: array = [1, 2, 3];
let list: number[] = [1, 2, 3];

//元组---个数类型,位置都确定
let x: [string, number];
x = ['hello', 10]; // ok
x = [10, 'hello']; // error


//枚举enum
//不给赋值的话一般从0开始,赋值了,之后的元素对应值,接在后面递增
//把枚举的名字变成值
enum color {red = 1, green, blue}
let c: color = color.green;//2

//由枚举的值得到它的名字
enum color {red = 1, green, blue}
let colorname: string = color[2];

//any
let notsure: any = 4;
let tts:array = [1,"2",new date()];

//函数
//规定返回值类型为number
function run1():number{
    return 1;
}
//没有返回值,
function run3(name:string,age?:number):void{
//age这个参数可传可不传
}

//function run():never{}一般是死循环等永远拿不到的值

//类型断言
let somevalue: any = "this is a string";
//尖括号”语法:
let strlength: number = (somevalue).length;
//as语法
let strlength: number = (somevalue as string).length;

//高级类型
//|交叉类型,可以是str也可以是num
function test2():string|number{
    return 123;
}

//&联合类型




2.类

1>类的创建

class person{
    name:string;
    constructor(){
        this.name = "xiaoming";
    }
    open(){
        console.log("person.open()");
    }
}

//es5
function person(){
    this.name = "xiaoming";
    this.open = function(){
        console.log("person.open()");
    }
}

2>公共,私有与受保护的修饰符

a)public默认,公开,可以在继承了父类的子类内部使用,外部也可以访问
b)protected是只要自己和子类的内部就可以访问,外部不可访问
c)private私有的,只有自己才能访问,子类内部都不可以访问
一般通过存储器来设置,使用某些私有属性

//protected
class chinese{
    constructor(){}
    protected action(type:number){
        let deng ="red";
        let actiontype = "stop";
        switch (type){
            case 0:
                break;
            case 1:
                deng = "green";
                actiontype = "go";
                break;
            case 2:
                deng = "yellow";
                actiontype = "go";
                break;
            default :
                deng = "black";
                actiontype = "go";
                break;
        }
        console.log("灯的颜色是"+deng+"意思是 "+actiontype);
    }
    red(){this.action(0);}
    green(){this.action(1);}
    yellow(){this.action(2);}
}
//假如西安比其他地方多一个黑的等
class xian extends chinese{
    static cityname = "xian";//静态属性,和类属性差不多

    constructor(){super();}
    black(){
        this.action(3)
    }
}




//private
class person{
    private name:string = "";
    protected age:number = 8;

     /*
    //es5set,get方法
    var _name = "";
    this.getname = function(){
        return _name
    }
    this.setname = function(){
    _name = name;
    }*/

    get getname(){
        if(this.age>30){}
        return this.name;
    }
    set setname(name:string){
        this.name = name;
    }
}
class  china extends person{
    constructor(){
        super();
    }
    move(){
       // console.log(this.age+this.name);//protect类可以在子类里使用,所以this.age可以,name不行
        console.log("年龄是"+this.age+this.getname);//存储器直接当做属性一样使用

    }
}

3.继承

class animal{
    blood:number;
    att:number;
    level:number;
    constructor(blood:number,att:number,level:number){
        this.blood = blood;
        this.att = att;
        this.level = level;
    }
}

class person extends animal{
    name:string;
    job:string;            constructor(blood:number,att:number,level:number,name:string,job:string){
        super(blood,att,level);
        this.name = name;
        this.job = job;
    }

}

//es5
//多重继承
//混合继承

4.命名空间和模块

注意:不应该对模块使用命名空间
使用命名空间是为了提供逻辑分组和避免命名冲突。 模块文件本身已经是一个逻辑分组,并且它的名字是由导入这个模块的代码指定,所以没有必要为导出的对象增加额外的模块层。

module flower{
    //导出flower模块中的rose类
    export class rose{
        constructor(){}
        open(){
            console.log("a beautify rose");
        }
    }
}

//在其他文件中使用rose的open方法
new flower.rose().open();


//命名空间
namespace hxx{
    //导出命名空间里的内容
    export let name ="hxx";

}

//使用
console.log(hxx.name);

5.基础类

基础类不可实例化,只有继承了基础类的子类可以实例化(bmap的时候见了些)

abstract class dbmanagerbase{
    private dbname:"st"
    constructor(){}
    opration(){
        console.log("opration");
    }
}

class dbmanager extends dbmanagerbase{
    constructor(){
        super();
    }
}
new dbmanager().opration();
new dbmanagerbase();//error,基础类不可实例化,只有继承了基础类的子类可以实例化