TS-接口

最新推荐文章于 2024-01-24 12:03:12 发布

皮的狠

最新推荐文章于 2024-01-24 12:03:12 发布

阅读量1.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： TS

本文链接：https://blog.youkuaiyun.com/qq_41709082/article/details/96482410

TS 专栏收录该内容

6 篇文章

订阅专栏

本文深入讲解了TypeScript中接口的概念及应用，包括如何定义接口、使用接口约束变量和函数，以及通过不同方式实现接口的方法。文章还探讨了匿名函数与具名函数在接口中的区别及其适用场景。

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

TS-接口

1.关键字 interface 用于定义接口
2.接口用于约束变量或者函数

interface A {
	name:string;
	age:number
}
//接口 A 表示  被 约束的 变量 或函数 必须 只能 拥有  string 类型 的 name 属性 以及 number 类型 的 age 属性（缺一不可）

若需要指定可以拥有其他属性或方法则可以使用索引签名

interface A {
	name:string;
	age:number;
	[propName:string]:any
}
//此时 实现 接口 A 的 函数 或者 变量  只需要  拥有 string 类型 name 属性 和 number 类型 age 属性 即可，还可以拥有 别的 任意属性 或方法

若需要含有函数

一.写法1     匿名函数
interface Last {
    (say:string,title:boolean):boolean;
}
//表示 必须   只  含有 或者 是  一个  接受 2个参数 一个 为 字符串 一个 为 布尔值  且 最终 返回 布尔值 的函数
//这种 写法 只能 用于 约束 函数

let a:Last = function(s:string,t:boolean){return boolean}
a.name = 123;   //  error        由于Last  接口 中 并没有 定义 name 属性 所以 变量 a不能 拥有 name 属性
//类 实现 这类 接口 时 将 无法 实现  因为  这接口 实现的 是一个 匿名函数 而 类 必须是 实现 指定 函数 名的 函数
class A implements Last {
	[任意名字](s:string,t:boolean):boolean{
		reutrn true
	}  // error 报错

}

二.写法2  

interface First {
	say(s:string,t:boolean):boolean;
}

//这种 写法  可以 约束   对象 和 类 

let b:First = function say(s:string,t:boolean):boolean { return true}      //error

let c:First = {say:function(s:string,t:boolean):boolean{return true}}   // success

class A implements Last {
	say(s:string,t:boolean):boolean{
		reutrn true
	}  // success
}