• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

typescript入门,可以一起探讨提点意见互相学习。

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

  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函数

  3、泛型

    参数化的类型,一半用来限制集合的内容
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。

  4、接口

    用来建立某种代码约定,使得其他开发者在调用某个方法或创建新的类时必须遵循接口所定义的代码约定
  第一种看如下代码
  
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函数,不然不遵从就不行。

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

  5、析构表达式

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这个文件会搜索类是否重复,两个文件用了共同的类的名字都是会报错的哦。

 

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript基础类型,类实例和函数类型声明发布时间:2022-07-18
下一篇:
如何编写 Typescript 声明文件发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap