接口

作者: penelope_2bad | 来源:发表于2020-07-20 10:57 被阅读0次
1.接口初探
interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);
2.可选属性

这段代码写的很好

interface SquareConfig {
  color?: string;
  width?: number;
}

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

let mySquare = createSquare({color: "black"});
3.只读属性
  interface Point {
  readonly x: number;
  readonly y: number;
}
let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // error!
ro.push(5); // error!
ro.length = 100; // error!
a = ro; // error!
  1. 上面代码的最后一行,可以看到就算把整个ReadonlyArray赋值到一个普通数组也是不可以的。 但是你可以用类型断言重写:
a = ro as number[];

4.最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 const,若做为属性则使用readonly。

4. 额外的属性检查

对象字面量会被特殊对待而且会经过 额外属性检查,当将它们赋值给变量或作为参数传递的时候。 如果一个对象字面量存在任何“目标类型”不包含的属性时,你会得到一个错误。

interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): { color: string; area: number } {
    // ...
}

// error: 'colour' not expected in type 'SquareConfig'
let mySquare = createSquare({ colour: "red", width: 100 });
  1. 方法一:绕开这些检查非常简单。 最简便的方法是使用类型断言:
let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig);
  1. 方法二:添加一个字符串索引签名
interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any;
}
  1. 还有最后一种跳过这些检查的方式,这可能会让你感到惊讶,它就是将这个对象赋值给一个另一个变量: 因为 squareOptions不会经过额外属性检查,所以编译器不会报错。
let squareOptions = { colour: "red", width: 100 };
let mySquare = createSquare(squareOptions);
5. 函数类型
  1. 可索引的类型
    7.类类型
    8.继承接口
    9.混合类型
    10.继承接口类

相关文章

  • 接口接口接口

    发现很多朋友对于接口都很纠结,阐述一下个人对接口的理解。 接口分为很多种类型,程序语言内部接口 移动端和服务端接口...

  • Android常用接口

    不知名接口 头条接口: 科技接口: 财经接口: 军事接口: 体育接口: 房产接口: 足球接口: 娱乐接口: 电影接...

  • 第十八天 微信微博天气接口

    分享接口 微信接口 微博接口 天气接口 mob接口

  • 接口测试概述

    接口(interface)的概念 常见接口名词 接口测试: 接口测试目的: 接口测试的重要性: 接口测试流程 接口...

  • 接口测试

    接口测试概念: 接口:接口是为了提供一种服务 所有的接口统称为API,接口分为内部接口和外部接口 外部接口:测试被...

  • 接口

    接口 接口类型 空接口 接口嵌套 接口断言 type关键字

  • 线程池原理

    Callable 接口 Runnable 接口 Future接口 RunnableFuture 接口 Future...

  • JMeter-一个接口的返回值作为输入传给其他接口

    背景: 在用JMeter写接口case,遇到一种情况,接口1查看列表接口,接口2查看详情接口,接口2需要传入接口1...

  • 用户操作接口

    登陆 接口地址 获取列表 接口地址 删除 接口地址 批量删除 接口地址 编辑用户 接口地址 添加用户 接口地址

  • JAVA中的集合框架 List (二)

    Collection接口List接口简介 Collection接口、子接口及其实现类,Collection接口是j...

网友评论

      本文标题:接口

      本文链接:https://www.haomeiwen.com/subject/lxrekktx.html