Typescript的接口

想回家种地的码农 lv.1

发布时间：2022-11-01 01:49:47 328

相关标签： # javascript# typescript# java# java

文章目录

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

接口声明

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

interface Props{
   name:string;
   age:number
}

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

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

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

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

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

方法签名，是声明函数类型的属性成员的简写，语法：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
}

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

interface Index{
    [prop:string]:number
}

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

Typescript的接口_javascript

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

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

可选属性和方法

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

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

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

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

Typescript的接口_typescript_02

在接口中没有指明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'
    }
}

文章来源： https://blog.51cto.com/u_12344418/5802232

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。