zoukankan      html  css  js  c++  java
  • TypeScript Handbook 2——接口1(翻译)

    接口(Interfaces)

    One of TypeScript's core principles is that type-checking focuses on the 'shape' that values have. This is sometimes called "duck typing" or "structural subtyping". In TypeScript, interfaces fill the role of naming these types, and are a powerful way of defining contracts within your code as well as contracts with code outside of your project. 

    实在水平有限,不知道怎么翻译。

    大概的意思应该是,typescript对类型检查是对"形状"来判断的。用函数举个例子说,就是只要参数列表被调用的函数所包含,就算是匹配了。

    你在项目内外编写的代码只要符合接口定义的协议,就都能识别。

    我们的第一个接口

    我们通过一个简单的例子来看接口是如何工作的:

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

    The type-checker checks the call to 'printLabel'. The 'printLabel' function has a single parameter that requires that the object passed in has a property called 'label' of type string. Notice that our object actually has more properties than this, but the compiler only checks to that at least the ones required are present and match the types required. 

    调用'printLabel'时,类型检查器进行检查。'printLabel'函数需要传递一个参数,这个参数是一个对象(labelledObj),并且有一个字符串的属性——"label"。

    注意,我们的这个对象实际上可能不止这一个属性,但是编译器只会检查当前这个对象至少符合接口要求的类型,即包含一个label的字符串类型的属性。

    我们再以同一个例子,这次使用一个接口来描述需要一个字符串类型的label属性:

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

    The interface 'LabelledValue' is a name we can now use to describe the requirement in the previous example. It still represents having a single property called 'label' that is of type string. Notice we didn't have to explicitly say that the object we pass to 'printLabel' implements this interface like we might have to in other languages. Here, it's only the shape that matters. If the object we pass to the function meets the requirements listed, then it's allowed.

    'LabelledValue'是接口的名字,这个接口用来描述前面那个例子的要求。它表示的仍然是一个叫做label的字符串类型的属性。

    注意,我们没有像其他语言那样,明确说这个对象实现了LabelledValue接口。在这里,重要的只是“形状”(shape)。

    如果这个对象符合函数的要求,那么就是允许的。

    It's worth pointing out that the type-checker does not require that these properties come in any sort of order, only that the properties the interface requires are present and have the required type.

    值得指出的是:类型检查并不要求属性的顺序,只要这个属性符合接口的要求,并且类型匹配,那么就是允许的。

    可选属性(Optional Properties)

    Not all properties of an interface may be required. Some exist under certain conditions or may not be there at all. These optional properties are popular when creating patterns like "option bags" where the user passes an object to a function that only has a couple properties filled in.

    并不是所有的属性都是接口要求的。某些存在的条件不是必须的。当用户传递一个对象到一个只有具有一父类拥有的属性的函数时,这些可选属性很受欢迎。

    下面是这个模式的例子:

    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"});

    Interfaces with optional properties are written similar to other interfaces, which each optional property denoted with a '?' as part of the property declaration. 

     有可选属性的接口在编码上与其他接口类似,每个可选属性在属性声明时用一个 '?'来表示。

    The advantage of optional properties is that you can describe these possibly available properties while still also catching properties that you know are not expected to be available. For example, had we mistyped the name of the property we passed to 'createSquare', we would get an error message letting us know:

    可选属性的优点是,您可以描述这些可能可用的属性,同时还可以检查您知道不需要使用的属性。例如假定传递给'createSquare'的属性名称拼写错误,则会得到下面错误消息:

    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;  // Type-checker can catch the mistyped name here
      }
      if (config.width) {
        newSquare.area = config.width * config.width;
      }
      return newSquare;
    }
    
    var mySquare = createSquare({color: "black"}); 
  • 相关阅读:
    第一节:理解垃圾回收平台的基本工作原理
    回想笔记 瞎比比 域名注册 解析绑定ip 下载证书 设置证书 重定向http到https请求
    flask 设置https请求 访问flask服务器
    关于 服务器ip和域名进行一个绑定
    ubuntu 安装flask+nginx+gunicorn 待定
    使用flask-dropzone 上传图片文件
    flask 对于用户登录保持状态 flask_login
    flask 对于邮件url进行一个加密防止爆破
    flask 密码加密 视频资料
    flask 多线程邮件异步发送 视频资料
  • 原文地址:https://www.cnblogs.com/codingnote/p/4972592.html
Copyright © 2011-2022 走看看