TypeScript 接口及其常见使用

Python User

已于 2023-08-04 22:25:47 修改

阅读量170

点赞数

CC 4.0 BY-SA版权

分类专栏： TypeScript 文章标签： typescript javascript 前端

于 2023-08-01 22:09:46 首次发布

本文链接：https://blog.csdn.net/weixin_44684357/article/details/132051322

TypeScript 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了TypeScript中的接口概念，包括如何作为对象类型进行属性约束，只读类型和可有可无类型的使用，以及接口继承和类实现接口的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是ts的接口？

作为对象的类型使用，限定或者约束该对象中的属性数据；

interface IPerson{
	name: string,
	age: number,
	sex: string,
}
let person: IPerson{
	name: 'xxxxx',
	age: 0,
	sex: 'man',
}

接口和对象中的属性必须一一对应，否则会报错

只读类型：readonly

interface IPerson{
	readonly name: string,
}
let person: IPerson{
	name: 'myName',
}
person.name = 'newName' // 报错，因为只读

可有可无类型：?

interface IPerson{
	name?: string, // 可有可无类型，当person对象无name属性的时候也不会报错
}
let person: IPerson{
	// 为空
}
person.name = 'newName' // ‘newName’

函数类型： (函数参数): 返回值

interface IFunction{
	(name: string, age: number): boolean // 括号里的数函数参数，后面为函数返回值
}
let newFunction: IFunction = function (name: string, age: number): boolean {
	// 括号里的数函数参数，后面为函数返回值	
	return age > 1
}
console.log(newFunction(('myName', 2)), // true

接口继承接口: extends

定义一个接口myHobby 可以继承其他接口的内容，使用extends

interface IRunning{
	run(): void
}
interface ISwimming{
	swimming(): any
}
interface myHobby extends IRunning, ISwimming {}

类class 类型：implements

类可以通过接口的方式，来定义当前这个类的类型；
使用implements 关键字来实现；

interface IRunning{
	run(): void
}
interface ISwimming{
	swimming(): any
}
interface myHobby extends IRunning, ISwimming {}

class MyClass implements myHobby {
	run(){
		console.log('我可以跑....')
	},
	swimming(){
		console.log('我可以游泳')
	}
}
let myObj = new MyClass()
myObj.run()
myObj.swimming()