TS接口

2018-10-22  本文已影响0人  郑无穷大

函数和方法的区别:

当一个函数是对象的属性时,这个函数为该对象的方法

接口就是用代码描述一个对象必须有什么属性(包括方法),但是有没有其他属性就不管了。

比如「一个电脑有 USB 接口」的意思是这个电脑能够插入 USB 设备,这个电脑其他的功能就随意了。

interface Human{
    name: string,
    age: number
}
只读属性
interface Human{
    readonly name: string,
    readonly age: number
}

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

可选属性
interface Human{
    name?: string,
    age?: number
}
interface Shape {
  head: string;
  body: string;
}
interface Human {
  readonly name: string;
  age: number;
  shape: Shape;
  likedGame?: Array<string>;
  say(word: string): void;
}

let frank: Human = {
  name: 'frank',
  age: 18,
  shape: { head: '〇', body: '口' },
  say(word: string) {
    console.log(`${this.name}: ${word}`);
  },
};

frank.say('你好');
传interface之外的(有个缺陷在传入函数或者方法的时候,若是可选的则不会报错)
interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): void {
    // ...
}

let mySquare = createSquare({ colour: "red", width: 100 });

那么,想要传入 Interface 之外的属性,可以受控:

使用类型断言
 let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig);
使用索引签名
 interface SquareConfig {
     color?: string;
     width?: number;
     [propName: string]: any;
 }
使用临时变量(不推荐)

接口就是用代码描述一个对象必须有什么属性。

如果这个属性是函数怎么办?

interface Human{
    name: string,
    age: number,
    add(a:number, b:number): number
}

如果这个对象是函数怎么办?

interface SearchFunc {
    (source: string, subString: string): boolean;
}
如果这个对象是函数,而且这个对象的属性也是函数怎么办?
interface 二则运算 {
    (a: number, b: number): number;
    逆运算(a: number, b: number): number;
}
let fn = (): 二则运算 => {
    let x: any = function(a: number, b: number): number {
        return a + b;
    };

    x.逆运算 = function(a: number, b: number): number {
        return a - b;
    };
    return x;
}

let add: 二则运算 = fn();

console.log(add(1, 2));
如果这个对象是数组怎么办?
interface StringArray {
[index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];
接口可以继承
interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

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

接口可以继承两个接口(横向)
接口可以继承继承过的接口(纵向)

上一篇下一篇

猜你喜欢

热点阅读