Typescript的接口

文章目录

• ​​接口声明​​
• ​​可选属性和方法​​
• ​​接口继承​​

接口声明

接口，用来表示任意的对象类型以及定义参数类型。比如：

interface Props{
   name:string;
   age:number
}

接口的类型成员可以分为：

1. 属性签名，比如：​​name:string​​；
2. 调用签名，定义对象表示的函数在调用时的参数类型、参数列表以及返回值类型，比如：

// 调用签名
let sum: { (x: number, y: number): number };
sum = function (x: number, y:) {
    return x + y;
}

3. 构造签名，定义了对象所表示的构造函数在使用new运算符调用的参数列表以及返回值类型，语法：​​new (ParameterList): Type​​，比如：

interface Props {
    new (message?:string):Error;
}

4. 方法签名，是声明函数类型的属性成员的简写，语法：​​PropertyName(ParameterList): Type​​，PropertyName是属性名，可以为标识符、字符串、数字或者可计算属性名；ParameterList表示可选的方法参数列表；Type表示可选的方法返回值类型。比如：

interface Document{
    getElementById(element:string):HTMLElement | null
}

以下这三种方式是一样的：

interface A {
    f(x: boolean): string;
}
interface B {
    f: { (x: boolean): string }
}

interface C {
    f: (x:) => string
}

5. 索引签名，描述使用索引访问对象属性的类型，索引只能是字符串或者数值，语法：​​[IndexName: string]: Type​​，比如

interface Index{
    [prop:string]:number
}

一个接口中只能定义一个字符串索引签名，字符串索引签名会约束该对象中所有的属性的类型，比如上面的接口Index中，添加一个name属性：

数值索引签名，语法：​​[IndexName: number]: Type​​，比如：

interface NumberIndex{
    [prop:number]:string;
}

可选属性和方法

一般接口中定义的属性和方法，都是必选的。那么在赋值的时候，缺少参数就会编译错误。如果有一些参数是可选参数，那在定义接口的时候，也需要设置对象的参数为可选，比如：

// 接口
interface Foo {
    name:string;
    age:number
}

const sum:Foo = {
    name:"908",
};

接口声明两个属性，在赋值的时候却只传入一个属性，这就会提示缺少属性age：

在接口中没有指明age属性为可选，那么它就是必选属性，添加可选属性或者方法，只需要在属性或者方法后面添加一个问号，比如：

// 接口
interface Foo {
    name:string;
    age?:number
}

接口继承

接口可以继承其他的对象类型，比如：

interface A {
    f(x: boolean): string;
}
interface Shape {
    name: string;
}

interface Circle extends Shape, A {
    age: number;
}

const aa:Circle={
    age:90,
    name:"908",
    f:()=>{
        return 'string'
    }
}