zoukankan      html  css  js  c++  java
  • TypeScript入门( 二)

    观看bilibili的视频总共总结了三篇文章(入门一,二,三);每一篇的内容都是同一类型的,这样理解起来更加方便;之后我回去找一些其他的TypeScript的资料去更加深入的学习一下;

    (1)typeScript接口:

      typescript中的接口类似于java,同时还增加了更灵活的接口类型,包括属性、函数、可索引和类等;

    //1.ts自定义方法传入参数,对json进行约束
    function printLable(labelInfo:{label:string}):void{console.log('haha')}
    printLabel({label:'xiaoming '}); //必须包含label
    
    
    //2.对批量方法传入参数进行约束
    interface FullName{
       firstName: string;
       secondName: string;
    }
    function printName(name:FullName){
       console.log(name.firstName)
    }
    var obj = {
       age:20,
       firstName: 'xiao',
       secondName: 'san'
    }
    printName(obj);//若直接将对象写入参数中,那么只能包含firstName和secondName;
    
    //3.接口可选属性
    interface FullName{
       firstName: string;
       secondName?: string;
    }
    
    //函数类型接口: 对方法传入的参数以及返回值进行约束 和批量约束
    //加密的函数类型接口
    
    interface encrypt{
      (key:string,vakue:string):string;
    }
    var md5:encrypt = function(key:string,vakue:string):string{
      //模拟操作
      return key + value;
    }
    console.log(md5('name': 'xiaoming'));
    
    var sha1:encrypt = function(key: string,value: string): string{
       return key+'--'+value;
    }
    console.log(sha1('name': 'xiaoming'));
    
    //可索引接口;数组,对象的约束(不常用)
    interface UserArr{
      [index:number]:string
    }
    var arr: UserArr = ['aa','bb'];
    console.log(arr[0]);
    interface UserObj{
      [index:string]:any
    }
    var obj:UserObj = [name:'12'];
    
    //类类型接口:对类的约束 和 抽象类有点相似
    interface Animal{
      name:string;
      eat(str:string):void;
    }
    class Dog implements Animal{
       name: string;
       constructor(name:string){
         this.name = name
       }
       eat(){ //不添加就会报错
          console.log(this.name + "吃狗粮 ");
       }
    }
    var d = new Fog('二哈');
    d.eat();
    
    //接口扩展: 接口可以继承接口
    
    interface Animal{
      ear(): void;
    }
    interface Person extends Animal{
       work():void;
    }
    class Programmer{
       public name: string;
       constructor(name:string){
         this.name = name;
      }
      coding(code:string){
         console.log(this.name + code)
      }
    }
    class Web extends Programmer implements Person{
      public name: string;
      constructor(name:string){
         this.name = name;
      }
      eat(){
          console.log(this.name + '喜欢吃')
      }
       work(){
          console.log(this.name + '喜欢写')
      }
    }
    var w = new Web('xiaoming');
    
    w.coding('写代码');

    越看越觉得跟jave和c#有相似之处,有空的话也要捡起来我的java啊,后续再说...

  • 相关阅读:
    【转】HTML CANVAS
    【转】JY 博客
    【转发】如何使用NPM?CNPM又是什么?
    【转廖大神】package.json 包安装
    【转】Socket接收字节缓冲区
    C# 串口操作系列(5)--通讯库雏形
    C# 串口操作系列(3) -- 协议篇,二进制协议数据解析
    C# 串口操作系列(4) -- 协议篇,文本协议数据解析
    .netCore微服务使用Nginx集中式管理实现
    nginx代理访问及上传文件异常413 Request Entity Too Large
  • 原文地址:https://www.cnblogs.com/naniandongzhi/p/10599960.html
Copyright © 2011-2022 走看看