typescript(五)--- typescript中的接口

7 篇文章 0 订阅
3 篇文章 0 订阅
本文深入讲解TypeScript中的接口概念,包括如何使用`interface`关键字定义接口,接口中的属性描述,如只读属性、可选属性,函数接口的使用,以及接口的继承。通过实例演示了接口如何规范代码结构,确保代码的一致性和可维护性。
摘要由CSDN通过智能技术生成

接口的作用就是为这些类型命名和为你的代码或第三方代码定义规矩,达成一致

接口关键词 interface 定义一个接口。

interface Home { // 定义接口,规定类型
    name: string,
    age: number,
}

let options: Home = { // 使用接口
    name: '小弥',
    age: 20,
}

console.log(options.name); // 小弥

接口里的属性

  • readonly (只读,不能做出修改 有点像es6的const)
interface Home {
    readonly name: string,
    age: number,
}

let options: Home = {
    name: '小弥',
    age: 20,
}

options.name = '小红'; // 这里会报错,因为name属性设置了readonly是不可以做修改的

可选值

有时候我们不一定要设置对象里的某个属性,接口里可以用 “?” 来表示一个属性是否是可选的。

interface Home {
    readonly name: string,
    age?: number, // 不加“?”会报错,ts默认是必须都传
}

let options: Home = {
    name: '小弥',
}

console.log(options.name); // 小弥

描述属性(可以控制接口里属性规定的写法)

interface Rect {
    height: number;
    width: number;
    [propName: string]: number // 意思是"propName"必须是string类型
}

函数接口 (可以通过接口来对函数做“规定”)

interface Home {
    (name:string,age:number):any;
}

let run: Home = function (name: string, age: number): string {
    return `我的名字叫${name},今年已经${age}岁啦~`;
}

console.log(run('小弥', 20));

接口的继承 (关键词 extends

interface Home {
    name: string,
    age?: number
}

interface Mint extends Home {
    data?: Array<string>,
}

let obj: Mint = {
    name: '小弥'
}

console.log(obj);

Ts中涉及到继承的都用 extends

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值