美文网首页
typescript接口

typescript接口

作者: 逸崖 | 来源:发表于2020-04-30 10:38 被阅读0次

接口主要用来规范一些行为实现某些契约,比如是否支持什么属性,类型或者方法。
1 属性接口

interface LabelledValue {
  label: string;
}
function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}
let myObj = { a: 10, label: 'Size 10 Object' };
printLabel(myObj);

let newObj: LabelledValue = {label: '22'}

--- 函数参数只要有其中一种属性就是符合接口,对象需要一致。

2 函数类型接口

interface printInterface{
    (firstName:string,secondName:string):string;
}
const printName: printInterface = function(firstName:string,secondName:string):string {
    return firstName + secondName
}

3 可索引接口 主要是约束数组或者对象

interface arr {
  [index: number]: string;
}
interface obj {
  [index: string]: string;
}

4 类类型接口

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

5 接口扩展

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

// 继承多个
interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

6 混合类型

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = <Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

7 接口继承类

class Control {
     state: any;
}
interface SelectableControl extends Control {
    select(): void;
}
// 错误:“Image”类型缺少“state”属性。
class Image implements SelectableControl {
    select() { }
}

8 其他 可选属性 & 只读属性

interface FullName {
  firstName: string;
  secondName?: string;
  readonly otherName: string;
}

相关文章

  • TypeScript 中的接口(interface)

    TypeScript 中的接口可分为: 之前的文章 TypeScript 基础类型和接口(interface)里面...

  • 学习TypeScript 接口

    TypeScript 接口定义 interface interface_name {} 实例 联合类型和接口 接口...

  • TypeScript学习笔记之四接口(Inferfaces)

    一、使用环境 Mac 电脑 WebStorm TypeScript3.x版本 二、接口 在 TypeScript ...

  • TypeScript - 接口

    TypeScript - 接口( Interface) [TOC] 学习目标 理解接口的概念 学会通过接口标注复杂...

  • TypeScript 接口

    TypeScript接口 接口只读属性 使用关键字readonly定义只读的接口属性 出现错误,如下 创建不可修改...

  • TypeScript接口

    属性类型接口 函数类型接口 定义了函数的参数。包括入参和出参。 可索引类型接口 类类型接口

  • typescript 接口

    日期:2019 年 8 月 29 日 typescript 接口 介绍 TypeScript的核心原则之一是对值所...

  • TypeScript接口

    接口定义 类型检查器不会检查属性的顺序,只要相应的属性存在并且类型匹配即可。 可选属性 定义可选属性只需要在属性后...

  • TypeScript——接口

    TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”...

  • TypeScript -- 接口

    接口可以用来约束对象,函数,以及类的结构和类型,这是一种代码协作的契约 1,对象类型接口interfaceLi...

网友评论

      本文标题:typescript接口

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