• 慈善基金进社区 点对点帮扶居民 2019-04-10
  • 三面悬崖的3197哨所 战士背饮用水要走"天梯" 2019-04-10
  • 习近平《在深入推动长江经济带发展座谈会上的讲话》单行本出版 2019-04-09
  • 女子在自家院子乘凉 被后山滚落千斤巨石砸死 2019-04-07
  • 很深刻。当今城市化基本出于房地资本的繁衍需要与维持粗陋GDP的无奈,越来越显露其反动性。 2019-04-03
  • 故都之秋,惊艳了整个华东文章中国国家地理网 2019-04-03
  • 中国虚拟现实创新创业大赛南昌赛区颁奖仪式举行 2019-03-31
  • 邯郸“廉政诊所”筑起基层首道廉政防线 2019-03-31
  • 蔡英文,赖清德,李登辉,陈水扁..... 2019-03-24
  • 【北京海之沃车型报价】北京海之沃4S店车型价格 2019-03-22
  • 上海电影节第三日:电影市场热议产业新形势 2019-03-22
  • 特朗普雇佣资深律师应对涉俄调查 2019-03-18
  • 两部门:支持建设一批乡土经济活跃的农业产业强镇 2019-03-17
  • 法国总统马克龙首次访华 法国居民期待成果 2019-03-16
  • 黑龙江p62历史开奖结果

    福彩p62开奖号码查询:TypeScript - Interfaces

    稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2015-08-01   阅读次数: 66   查看权限: 游客查看

    关注于数据值的‘shape’的类型检查是TypeScript核心设计原则。这种模式有时被称为‘鸭子类型’或者‘结构子类型化’。在TypeScript中接口interfaces的责任就是命名这些类,而且还是你的代码之间或者是与外部项目代码的契约。

    初见Interface

    黑龙江p62历史开奖结果 www.tgpe.net 理解interface的最好办法,就是写个hello world程序:

    function printLabel(labelledObj: {label: string}) {
      console.log(labelledObj.label);
    }
    
    var myObj = {size: 10, label: "Size 10 Object"};
    printLabel(myObj);

    在这里类型检查系统会检查printLabel这个函数,printLabel函数要求传入一个包含一个label的字符串属性。上例可以了解我们传入的对象可以有多个属性,但是类型检查系统只会检查printLabel所要求的label属性是否满足其要求。

    接下来我们可以进一步简化,声明一个interface来描述一个具有label字符串属性的对象:

    interface LabelledValue {
      label: string;
    }
    
    function printLabel(labelledObj: LabelledValue) {
      console.log(labelledObj.label);
    }
    
    var myObj = {size: 10, label: "Size 10 Object"};
    printLabel(myObj);

    接口LabelledValue描述了上例中printLabel的所要求的类型对象。它依然代表包含一个label的字符串属性??梢钥醇颐抢?lsquo;shape’(行)描述了printLabel的传入参数要求。

    可选的Properties

    有时不是所有定义在interface中的属性都是必须的。例如流行的”option bags”模式(option配置),使用者可以之传入部分定制化属性。如下面“option bags”模式:

    interface SquareConfig { color?: string; width?: number; }
    
    function createSquare(config: SquareConfig): {color: string; area: number} {
      var newSquare = {color: "white", area: 100};
      if (config.color) {
        newSquare.color = config.color;
      }
      if (config.width) {
        newSquare.area = config.width * config.width;
      }
      return newSquare;
    }
    
    var mySquare = createSquare({color: "black"});

    带有可选属性的interface定义和c#语言很相似,以’?‘紧跟类型后边表示。

    interface的可选属性可以限制那些属性是可用的,这部分能得到类型检查,以及智能感知。例如下例:

    interface SquareConfig {
      color?: string;
      width?: number;
    }
    
    function createSquare(config: SquareConfig): {color: string; area: number} {
      var newSquare = {color: "white", area: 100};
      if (config.color) {
        newSquare.color = config.collor;  // 类型检查系统能识别不正确的属性collor.
      }
      if (config.width) {
        newSquare.area = config.width * config.width;
      }
      return newSquare;
    }
    
    var mySquare = createSquare({color: "black"});

    函数类型

    Interfaces为了描述对象能接收的数据形(shapes)的返回。对于interface不仅难呢过描述对象的属性,也能描述函数类型。

    下面是定义的interface signature是一个接收两个string的输入参数,并返回boolean的函数类型:

    interface SearchFunc {
      (source: string, subString: string): boolean;
    }

    我也可以使用函数类型的interface去描述我们的数据。下面演示如何将一个相同类型的函数赋值给interface:

    var mySearch: SearchFunc;
    mySearch = function(source: string, subString: string) {
      var result = source.search(subString);
      if (result == -1) {
        return false;
      }
      else {
        return true;
      }
    }

    对于函数类型的interface,并不需要参数名的对应相同,如下例:

    var mySearch: SearchFunc;
    mySearch = function(src: string, sub: string) {
      var result = src.search(sub);
      if (result == -1) {
        return false;
      }
      else {
        return true;
      }
    }

    对于函数参数的检查,会按照参数的顺序检查对应的类型是否匹配。同时也会检查函数的返回类型是否匹配,在这个函数我们期望返回boolean类型true/false, 如果返回的是numbers或者string,则类型检查系统会提示返回值类型不匹配。

    数组类型

    类似于函数类型,TypeScript也可以描述数组类型。在数组类型中有一个’index’类型其描述数组下标的类型,以及返回值类型描述每项的类型,如下:

    interface StringArray {
      [index: number]: string;
    }
    
    var myArray: StringArray;
    myArray = ["Bob", "Fred"]

    index的支持两种类型,分别是字符串和数值类型. 我们可以限制index的类型,同时也可以检查index项的返回值类型。

    index的类型签名可以描述常用的数组或者是‘dictionary’(字典序)模式,这点会强制所有的属性都需要和其返回值匹配。下例中length属性不匹配这点,所以类型检查会给出一个错误:

    interface Dictionary {
      [index: string]: string;
      length: number;    // error, the type of 'length' is not a subtype of the indexer
    }

    Class类型

    实现interface

    在C#和java中interface是很常使用的类型系统,其用来强制其实现类符合其契约。在TypeScript中同样也可以实现:

    interface ClockInterface {
        currentTime: Date;
    }
    
    class Clock implements ClockInterface  {
        currentTime: Date;
        constructor(h: number, m: number) { }
    }

    同样也可以在interface中实现函数类型的契约,并要求clas实现此函数。如下例的‘setTime’函数:

    interface ClockInterface {
        currentTime: Date;
        setTime(d: Date);
    }
    
    class Clock implements ClockInterface  {
        currentTime: Date;
        setTime(d: Date) {
            this.currentTime = d;
        }
        constructor(h: number, m: number) { }
    }

    interface描述的的是class的公开(public)部分,而不是私有部分.

    类static/instance区别

    当使用类和接口的时候,我们需要知道类有两种类型:static(静态)部分和instance(实例)部分。如果尝试一个类去实现一个带有构造签名的interface,TypeScript类型检查会提示你错误。

    interface ClockInterface {
        new (hour: number, minute: number);
    }
    
    class Clock implements ClockInterface  {
        currentTime: Date;
        constructor(h: number, m: number) { }
    }

    这是因为一个类去实现接口的时候,只有instance(实例)的部分才会被检查。而构造函数属于静态部分,所以不会被类型检查。相反你可以直接在类中实现这些(static)静态部分,如下例:

    interface ClockStatic {
    new (hour: number, minute: number);
    }
    
    class Clock {
    currentTime: Date;
    constructor(h: number, m: number) { }
    }
    
    var cs: ClockStatic = Clock; var newClock = new cs(7, 30);
    interface的继承

    和类一样,接口也能集成其他的接口。这相当于复制接口的所有成员。接口的集成是的我们可以自由的抽象和分离到可重用的组件。

    interface Shape {
        color: string;
    }
    
    interface Square extends Shape {
        sideLength: number;
    }
    
    var square = <Square>{};
    square.color = "blue";
    square.sideLength = 10;

    一个interface可以同时集成多个interface,实现多个接口成员的合并。

    interface Shape {
        color: string;
    }
    
    interface PenStroke {
        penWidth: number;
    }
    
    interface Square extends Shape, PenStroke {
        sideLength: number;
    }
    
    var square = <Square>{};
    square.color = "blue";
    square.sideLength = 10;
    square.penWidth = 5.0;

    混合式类型

    如前边提到的一样,在interface几乎可以描述JavaScript世界的一切对象。因为JavaScript是一个动态,灵活的脚本语言,所以偶尔也希望一个对象能够描述一些多个类型.

    下面是一个混合式描述函数,对象以及额外属性的实例:

    interface Counter {
        (start: number): string;
        interval: number;
        reset(): void;
    }
    
    var c: Counter;
    c(10);
    c.reset();
    c.interval = 5.0;

    和第三方JavaScript库交互的时候,也许我们也会上面的模式来描述一个完整的类型。

    关键词: javascript,typescript,interfaces   编辑时间: 2015-08-01 11:39:02

    • 感到高兴

      8

      高兴
    • 感到支持

      8

      支持
    • 感到搞笑

      8

      搞笑
    • 感到不解

      8

      不解
    • 感到谎言

      9

      谎言
    • 感到枪稿

      8

      枪稿
    • 感到震惊

      8

      震惊
    • 感到无奈

      8

      无奈
    • 感到无聊

      9

      无聊
    • 感到反对

      8

      反对
    • 感到愤怒

      8

      愤怒
    50%(8)
    50%(8)
    共有0 条评论 发言请遵守【相关规定

    网友评论

    会员头像
    发 表同步腾讯微博  匿名评论  验证码:  点击更新
    • 暂无评论
    关闭??? align=文章图片 article Pictrue
    • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
    • 代码覆盖率工具 Istanbul 入门教程
    • 全栈工程师的武器——MEAN
    • 9款超炫的 CSS3 复选框(Checkbox)
    • 微信开发在线翻译功能
    • CSS3那些不为人知的高级属性
    • 给easyui的datebox添加清空事件
    • flash写字效果
    • kendoUI系列教程之DropDownList下拉菜单
    • kendoUI系列教程之datetimepicker日期时间选择
    • kendoUI系列教程之datepicker日期选择
    • kendoUI系列教程之combobox下拉列表框
    • kendoUI系列教程之colorpicker
    • kendoUI系列教程之calendar日历表
    • kendoUI系列教程之autocomplete自动补齐
    • kendo ui简介
  • 慈善基金进社区 点对点帮扶居民 2019-04-10
  • 三面悬崖的3197哨所 战士背饮用水要走"天梯" 2019-04-10
  • 习近平《在深入推动长江经济带发展座谈会上的讲话》单行本出版 2019-04-09
  • 女子在自家院子乘凉 被后山滚落千斤巨石砸死 2019-04-07
  • 很深刻。当今城市化基本出于房地资本的繁衍需要与维持粗陋GDP的无奈,越来越显露其反动性。 2019-04-03
  • 故都之秋,惊艳了整个华东文章中国国家地理网 2019-04-03
  • 中国虚拟现实创新创业大赛南昌赛区颁奖仪式举行 2019-03-31
  • 邯郸“廉政诊所”筑起基层首道廉政防线 2019-03-31
  • 蔡英文,赖清德,李登辉,陈水扁..... 2019-03-24
  • 【北京海之沃车型报价】北京海之沃4S店车型价格 2019-03-22
  • 上海电影节第三日:电影市场热议产业新形势 2019-03-22
  • 特朗普雇佣资深律师应对涉俄调查 2019-03-18
  • 两部门:支持建设一批乡土经济活跃的农业产业强镇 2019-03-17
  • 法国总统马克龙首次访华 法国居民期待成果 2019-03-16
  • 正规彩票平台代理 北京赛车官网开奖网址 盐都区彩票大奖 江苏十一选五开奖结果 大乐透走势图浙江 500竞彩足球混合过关 谁有极速飞艇计划网站 福彩3d历史开奖号码 新时时彩网赚 海南飞鱼彩票规律图 福彩15选5走势图 北京pk10是违法赌博吗 快乐时时彩官网下载手机版 快乐炸金花电脑版 篮球让分胜负4串1中奖 北京pk10走势图彩图