ts接口介绍

本文详细介绍了 TypeScript 中接口的作用,包括对象型接口、函数类型接口、可索引类型接口和泛型接口的使用,展示了如何通过接口约束和规范代码,提高代码的可读性和维护性。通过实例解析了接口在约束对象、函数及数组等场景的应用,深入理解 TypeScript 类型系统的强大之处。

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

在typescript里,接口的作用是代码的一种约定和规范

一、对象型接口:对对象的约束

interface myInfo{
    name:string;
    age:number
}
function printName({name,age}:myInfo){
    console.log(name);
    console.log(age);
    return myInfo;
}

也可以使返回值为两个值

二、函数类型接口:对函数的约束

基础语法:

interface 接口名 {
    (参数名1: 参数值1, 参数名2: 参数值2): 返回值类型
}

例两个数相加

interface addNum={
    (a:number,b:number):number
}
const add: addNum = (a, b) => {
    return a + b;
}
add(1, 2)

三、可索引类型的接口:对数组的约束

例:

interface StringArray:{
    [index:number]:string
}

let myArray: StringArray;
myArray = ["zhang", "ben"];

let myStr: string = myArray[0];//用number索引数组得到字符串的返回值

四、泛型接口

//定义一个泛型接口
interface NameInterface<T>{
    getName:(name:string) => T
}

### TypeScript 接口接口定义与使用 #### 定义接口TypeScript 中,`interface` 是一种用于描述对象结构的关键工具。它可以指定对象应具备哪些属性及其对应的类型[^1]。 ```typescript interface Person { name: string; age: number; } ``` 上述代码片段展示了 `Person` 这个接口定义方式。该接口规定任何符合此类型的对象都必须拥有两个字段:一个是字符串类型的 `name` 和一个数字类型的 `age`。 #### 实现接口 一旦定义好了一个接口之后,就可以将其应用于变量声明上以确保数据的一致性和正确性[^4]: ```typescript let tom: Person = { name: 'Tom', age: 23, }; ``` 这里创建了一个名为 `tom` 的变量并赋予其具体值,同时指定了它的类型为之前定义好的 `Person` 接口。如果尝试给 `tom` 赋予不符合 `Person` 结构的数据,则会触发编译错误提示。 #### 扩展功能——方法、可选属性和索引签名 除了基本属性外,TypeScript接口还支持更复杂的功能,比如方法定义、可选属性以及只读属性等[^2]: ##### 方法接口 可以为接口增加函数成员表示某些行为需求: ```typescript interface Greetable { greet(): void; } class Greeter implements Greetable { public greet() { console.log('Hello!'); } } ``` 在这个例子中,`Greetable` 接口要求实现者提供一个无参数返回值为空的方法 `greet()` 。而类 `Greeter` 则满足这一条件并通过 `implements` 关键字表明自己实现了这个接口[^3]。 ##### 可选属性 有时并非所有属性都是必需的,在这种情况下可以通过加问号的方式标记它们为可选项: ```typescript interface OptionalProps { id?: number; } ``` 这样即使某个对象缺少了 `id` 字段也不会违反约定。 ##### 索引签名 当不确定确切会有多少或者什么样的键名存在时,可以用索引来表达灵活性: ```typescript interface StringArray { [index: number]: string; } ``` 这意味着只要求按照位置访问得到的结果一定是字符串形式的内容。 #### 继承与其他高级特性 单继承或多继承替代方案也是 TypeScript 接口的重要组成部分之一。例如下面展示的是简单的单一继承案例: ```typescript interface Animal { move(distanceInMeters: number): void; } interface Dog extends Animal { bark(): void; } const myDog: Dog = { move(distanceInMeters) { console.log(`Moving ${distanceInMeters}m.`); }, bark() { console.log('Woof! Woof!'); }, }; myDog.move(10); myDog.bark(); ``` 在这里可以看到 `Dog` 不仅继承自 `Animal` ,而且还额外添加了自己的独特能力 —— 发声动作 `bark()` 函数。 另外值得注意的是虽然传统意义上的多重继承不被直接支持,但是通过组合多个基础接口达到相同效果却是可行的做法。 --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值