TypeScript从精通到入门3:ts中接口的使用

TypeScript 的接口(Interface)是一种强大的类型系统特性,它允许我们定义对象的形状,并用于类型检查和代码补全。接口描述了对象应该具有的结构,但并不是实际的实现。这有助于我们创建更加健壮、易于维护的代码,并确保代码的一致性。

接口的基本用法

1. 定义接口

interface Person {
name: string;
age: number;
greet(): void;
}

在这个例子中,我们定义了一个名为 Person 的接口,它有三个成员:两个属性 name 和 age,以及一个方法 greet。

2. 实现接口

你可以通过创建一个对象或使用类来实现接口。但请注意,TypeScript 的接口并不像 Java 或 C# 中的接口那样,它不会提供任何运行时功能。它只是用于类型检查和代码补全。

使用对象字面量实现接口:

const person1: Person = {
name: 'Alice',
age: 30,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};

使用类实现接口

class PersonImpl implements Person {
name: string;
age: number;

constructor(name: string, age: number) {
this.name = name;
this.age = age;
}

greet() {
console.log(`Hello, my name is ${this.name}`);
}
}

const person2 = new PersonImpl('Bob', 25);

3. 可选属性和只读属性

在接口中,你可以使用 ? 来定义可选属性,这意味着实现该接口的对象可以不包含这个属性。另外,你可以使用 readonly 关键字来定义只读属性,这意味着这个属性只能在对象被创建时赋值,之后不能再修改。

interface OptionalPerson {
name: string;
age?: number; // 可选属性
readonly id: number; // 只读属性
}

4. 可索引类型接口

可索引接口通常用作对数组和对象进行约束(但是这个接口不常用)

interface StringArray {
[index: number]: string; // 索引类型
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

可索引接口也可以用来对一个属性接口进行只读属性以及额外对象的属性检验

// 该接口可以限制一个对象必须有color和width,还可以有其他的属性
interface Arr {
readonly color: string; // 只读属性,只能进行1次赋值,后面不能修改
width: number;
[propName: string]: any;
}

5. 接口继承

TypeScript 的接口可以继承其他接口,从而组合多个接口的属性。

interface Animal {
eat(): void;
}

interface Dog extends Animal {
bark(): void;
}

const myDog: Dog = {
eat() {
console.log('Dog is eating');
},
bark() {
console.log('Woof woof');
}
};

6. 混合类型

混合类型接口是讲多种类型接口混合从而合成一个集成多种条件限制的接口,说白了就是一个对象可以同时做为函数和对象使用,并带有额外的属性。

interface Counter {
(start: number): string;
interval: number;
reset(): void;
}

function getCounter(): Counter {
let counter = function (start: number) { };
counter.interval = 123;
counter.reset = function () { };
return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

通过接口,你可以更清晰地定义代码的结构和预期行为,提高代码的可读性和可维护性。同时,这也使得 TypeScript 成为一种强大的静态类型检查语言。

  • 8
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值