typescript入门,可以一起探讨提点意见互相学习…
2018-09-29 03:53:51来源:博客园 阅读 ()
typescript是js的一个超集,TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性。这个语言添加了基于类的面向对象编程,可以帮助我们更好的理解什么是面向对象编程!
这篇文章只简单的讲解一下ts的扩展方法,不讲扩展符,剪头函数等es6已经支持的语法基础了。
一、类型批注和类
class Person { //protected name; protected是可以内部和子类调用 //public name; public是内部和外部都可以调用,默认为public //private name; private 只能类内部访问 constructor(public name:string){ //constructor是构造函数,只有被new的时候被调用,且只被调用一次。 // public name:string 这个是制造一个约定,new这个实例时候必须传入一个name才可以;不写public如Employee中写法也可 //在构造函数里写不写public是两种概念,写public 下面this.name才可以有值 } eat(){ console.log(this.name); } }
* name:string 为类型批注,这个是可以写可以不写的,对于基本类型的批注是 number, bool 和 string。而弱或动态类型的结构则是 any 类型。如果没有类型批注那么就默认为any类型。
二、继承
// extends 为继承,下面表示 Employee继承了Person类 // super 为调用父类的方法 class Employee extends Person{ //super调父类的构造函数 constructor(name:string,code:string){ super(name);//必须调用父类的构造函数,不调报错 console.log("xixi"); this.code=code; } code:string; work(){ super.eat(); this.doWork(); } private doWork(){ console.log('im working'); } }
* 注意在子类中如果有构造函数声明则必须调用父类的构造函数,不调则报错。
调用就用这个super来调就可以。如上述代码super(name);
为什么必须调用不调就报错呢?个人这样理解的,子类本来就继承了父类的属性和方法,构造函数是指new这个实例时候必须遵从这个约定才可以使用,那么子类继承父类所以在制造一个约定的时候必须也遵从父类的这个约定才可以,所以必须调用一下这个父类的构造函数,不知道我这样解释大家可以明白不。。。
总结super:有两种调用方式,一个是调用父类的构造函数,一个是调用父类的方法,如super.eat();
var e1 = new Employee("name","1"); e1.eat(); //输出name
如这段代码,new了一个子类Employee传入两个值(因为构造函数约定必须传两个值就必须传,不传则报错),可以直接调用父类eat函数
三、泛型
var workers:Array<Person> = []; //泛型,指定一个数组只能放某一个类型的元素,其他不行 workers[0] = new Person("zhangsan"); workers[1] = new Employee("lala","3"); workers[2] = 2; //报错
如上述代码,指定了workers是Person类型的数组那么workers只可以放person类型的 ,那么有伙伴就会问了,为什么也可以放Employee类型的?因为Employee类型继承了person类型的属性和方法,Employee是person的子类,所以也可以放Employee。
四、接口
interface IPerson{ name:string; age:number; } class Person2{ constructor(public config:IPerson){//当接口用作一个类的构造声明时,在newperson调用时会检查接口的属性是否符合 } } var p10 = new Person2({ name:"zhangsan", age:18, })
interface是接口 声明了一个Iperson这个东西吧,意思就是:person2里面构造函数说了,必须遵循这个接口!就是说new我的时候必须遵循IPerson不管是类型还是数量还是键的名字,都要遵循!不然就报错。
第二种接口方式声明一个函数,
interface Animal { eat(); } class Sheep implements Animal{//implements关键字代表该类实现该接口,该类必须定义接口中的方法 eat(){ console.log("i eat grass"); } } class Tiger implements Animal{ eat(){ console.log("i eat meat"); } }
接口声明了Animal这个东西里面有一个eat函数,那么implements关键字代表该类实现该接口,该类必须定义接口中的方法,就是说哪个类用了这个接口就必须给我声明一个这个eat函数,不然不遵从就不行。
还挺任性的,也就是强制让大家都遵从这个约定来开发。
五、析构表达式
function getName(){ return { id:"13", borth:"1994", aaa:{ a1:"lala", a2:"fafa" } } } var {id:ids,aaa:{a2},aaa:{a1:as}}=getName(); console.log(ids);//13 console.log(a2);//fafa console.log(as);//lala
这个就是析构表达式啦!就是这样直接就可以取到对应的值,如果要另外声明别的名字就:xx就可以了。
另外想说一个问题就是ts这个文件会搜索类是否重复,两个文件用了共同的类的名字都是会报错的哦。
如果有说的不对的地方请各路大神指正,互相交流增长经验,感谢感谢。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:React项目搭建及依赖安装
- javascript面向对象入门基础详细介绍 2020-03-29
- vue.js开发环境搭建教程 2020-03-16
- 高效的获取当前元素是父元素的第几个子元素 2020-02-15
- JS实现数组按升序及降序排列的方法 2019-12-15
- 网页设计的常用技巧 2019-10-25
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash