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,基础类不可实例化,只有继承了基础类的子类可以实例化
推荐阅读
-
JavaScript和TypeScript中的void的具体使用
-
正则表达式语法规则及在Javascript和C#中的使用方法
-
es5的JavaScript语法和TypeScript的比较
-
JavaScript是如何工作的:深入类和继承内部原理 + Babel和TypeScript之间转换
-
JavaScript 和 TypeScript 中的 class
-
C#的Attribute和Typescript的装饰器之比较
-
深入理解JavaScript中的语法和代码结构
-
javascript的字符串按引用复制和传递,按值来比较介绍与应用_javascript技巧
-
jquery和javascript的区别(常用方法教程比较)
-
JavaScript中的null和undefined 以及 “==” 比较的一些细节点