经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JSJS库框架 » JavaScript » 查看文章
typescript入门,可以一起探讨提点意见互相学习。
来源:cnblogs  作者:文博的博客  时间:2018/9/28 16:51:41  对本文有异议

  typescript是js的一个超集,TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性。这个语言添加了基于类的面向对象编程,可以帮助我们更好的理解什么是面向对象编程!

  这篇文章只简单的讲解一下ts的扩展方法,不讲扩展符,剪头函数等es6已经支持的语法基础了。

  一、类型批注和类

  1. class Person {
  2. //protected name; protected是可以内部和子类调用
  3. //public name; public是内部和外部都可以调用,默认为public
  4. //private name; private 只能类内部访问
  5. constructor(public name:string){ //constructor是构造函数,只有被new的时候被调用,且只被调用一次。
  6. // public name:string 这个是制造一个约定,new这个实例时候必须传入一个name才可以;不写public如Employee中写法也可
  7. //在构造函数里写不写public是两种概念,写public 下面this.name才可以有值
  8. }
  9. eat(){
  10. console.log(this.name);
  11. }
  12. }

  * name:string 为类型批注,这个是可以写可以不写的,对于基本类型的批注是 number, bool 和 string。而弱或动态类型的结构则是 any 类型。如果没有类型批注那么就默认为any类型。

  二、继承

  1. // extends 为继承,下面表示 Employee继承了Person类
  2. // super 为调用父类的方法
  3. class Employee extends Person{
  4. //super调父类的构造函数
  5. constructor(name:string,code:string){
  6. super(name);//必须调用父类的构造函数,不调报错
  7. console.log("xixi");
  8. this.code=code;
  9. }
  10. code:string;
  11. work(){
  12. super.eat();
  13. this.doWork();
  14. }
  15. private doWork(){
  16. console.log('im working');
  17. }
  18. }

  * 注意在子类中如果有构造函数声明则必须调用父类的构造函数,不调则报错。

  调用就用这个super来调就可以。如上述代码super(name);

  为什么必须调用不调就报错呢?个人这样理解的,子类本来就继承了父类的属性和方法,构造函数是指new这个实例时候必须遵从这个约定才可以使用,那么子类继承父类所以在制造一个约定的时候必须也遵从父类的这个约定才可以,所以必须调用一下这个父类的构造函数,不知道我这样解释大家可以明白不。。。

  总结super:有两种调用方式,一个是调用父类的构造函数,一个是调用父类的方法,如super.eat();

  1. var e1 = new Employee("name","1");
  2. e1.eat(); //输出name

  如这段代码,new了一个子类Employee传入两个值(因为构造函数约定必须传两个值就必须传,不传则报错),可以直接调用父类eat函数

  三、泛型

    参数化的类型,一半用来限制集合的内容
  1. var workers:Array<Person> = []; //泛型,指定一个数组只能放某一个类型的元素,其他不行
  2. workers[0] = new Person("zhangsan");
  3. workers[1] = new Employee("lala","3");
  4. workers[2] = 2; //报错

  如上述代码,指定了workers是Person类型的数组那么workers只可以放person类型的 ,那么有伙伴就会问了,为什么也可以放Employee类型的?因为Employee类型继承了person类型的属性和方法,Employee是person的子类,所以也可以放Employee。

  四、接口

    用来建立某种代码约定,使得其他开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定
  第一种看如下代码
  
  1. interface IPerson{
  2. name:string;
  3. age:number;
  4. }
  5. class Person2{
  6. constructor(public config:IPerson){//当接口用作一个类的构造声明时,在newperson调用时会检查接口的属性是否符合
  7. }
  8. }
  9. var p10 = new Person2({
  10. name:"zhangsan",
  11. age:18,
  12. })

    interface是接口 声明了一个Iperson这个东西吧,意思就是:person2里面构造函数说了,必须遵循这个接口!就是说new我的时候必须遵循IPerson不管是类型还是数量还是键的名字,都要遵循!不然就报错。

  第二种接口方式声明一个函数,

  1. interface Animal {
  2. eat();
  3. }
  4. class Sheep implements Animal{//implements关键字代表该类实现该接口,该类必须定义接口中的方法
  5. eat(){
  6. console.log("i eat grass");
  7. }
  8. }
  9. class Tiger implements Animal{
  10. eat(){
  11. console.log("i eat meat");
  12. }
  13. }

  接口声明了Animal这个东西里面有一个eat函数,那么implements关键字代表该类实现该接口,该类必须定义接口中的方法,就是说哪个类用了这个接口就必须给我声明一个这个eat函数,不然不遵从就不行。

还挺任性的,也就是强制让大家都遵从这个约定来开发。

  五、析构表达式

  1. function getName(){
  2. return {
  3. id:"13",
  4. borth:"1994",
  5. aaa:{
  6. a1:"lala",
  7. a2:"fafa"
  8. }
  9. }
  10. }
  11. var {id:ids,aaa:{a2},aaa:{a1:as}}=getName();
  12. console.log(ids);//13
  13. console.log(a2);//fafa
  14. console.log(as);//lala

  这个就是析构表达式啦!就是这样直接就可以取到对应的值,如果要另外声明别的名字就:xx就可以了。

 

另外想说一个问题就是ts这个文件会搜索类是否重复,两个文件用了共同的类的名字都是会报错的哦。

 

如果有说的不对的地方请各路大神指正,互相交流增长经验,感谢感谢,博主不怕批评互相借鉴。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号