首页 前端知识 Typescript的Interface的相关使用示例和进阶知识

Typescript的Interface的相关使用示例和进阶知识

2024-05-31 20:05:08 前端知识 前端哥 5 204 我要收藏

Typescript的Interface的相关使用示例和进阶知识

接口是Typescript中一种非常强大的特性,它用于定义对象的结构和行为。让我为你解释一下接口的基本概念和用法。

接口定义了一个规定,规定了对象应该具有的属性和方法。当一个对象符合接口的规定时,我们称该对象实现了该接口。

使用示例

让我们来看一个简单的例子:

interface IPerson {
  name: string;
  age: number;
  sayHello: () => void;
}

let person: IPerson = {
  name: "Alice",
  age: 25,
  sayHello: function () {
    console.log(`Hello, my name is ${this.name}. I'm ${this.age} years old.`);
  }
};

person.sayHello(); // 输出:Hello, my name is Alice. I'm 25 years old.

在这个例子中,我们定义了一个IPerson接口,它规定了对象应该具有nameage属性,以及一个sayHello方法。然后,我们创建了一个符合IPerson接口要求的person对象,并调用了它的sayHello方法。

接口也可以用来约束函数类型:

interface IAddFunction {
  (a: number, b: number): number;
}

let add: IAddFunction = function (a, b) {
  return a + b;
};

console.log(add(2, 3)); // 输出:5

 在这个例子中,我们定义了一个IAddFunction接口,它规定了函数应该接受两个参数并返回一个数字类型的结果。然后,我们创建了一个符合IAddFunction接口要求的add函数,并调用它计算两个数字的和。

接口继承

接口还可以进行继承,通过继承可以扩展接口的功能:

interface IShape {
  color: string;
}

interface ICircle extends IShape {
  radius: number;
}

let circle: ICircle = {
  color: "red",
  radius: 5
};

console.log(circle.color); // 输出:red
console.log(circle.radius); // 输出:5

在这个例子中,我们定义了一个IShape接口,它包含一个color属性。然后,我们定义了一个ICircle接口,它继承自IShape接口,并添加了一个radius属性。我们创建了一个符合ICircle接口要求的circle对象,并访问了它的colorradius属性。

接口还可以包含可选属性和只读属性。让我为你解释一下这些概念。

可选属性

可选属性使用?符号来标记,表示该属性可以存在也可以不存在。

interface IPerson {
  name: string;
  age?: number;
}

let person1: IPerson = {
  name: "Alice"
};

let person2: IPerson = {
  name: "Bob",
  age: 30
};

在这个例子中,我们定义了一个IPerson接口,它有一个必需的name属性和一个可选的age属性。我们可以创建一个只包含name属性的person1对象,也可以创建一个同时包含nameage属性的person2对象。

只读属性

只读属性使用readonly关键字来标记,表示该属性只能在创建对象时进行赋值,之后不可修改。

interface IPoint {
  readonly x: number;
  readonly y: number;
}

let p: IPoint = { x: 5, y: 10 };

console.log(p.x); // 输出:5

// 以下代码会报错
p.x = 7;

在这个例子中,我们定义了一个IPoint接口,它有两个只读属性xy。我们创建了一个p对象,并访问了它的x属性。由于x是只读属性,我们无法对其进行修改,所以尝试修改p.x的值会导致编译错误。 

函数类型

接口还可以用于定义函数类型:

interface IAddFunction {
  (a: number, b: number): number;
}

let add: IAddFunction = function (a, b) {
  return a + b;
};

console.log(add(2, 3)); // 输出:5

在这个例子中,我们定义了一个IAddFunction接口,它规定了一个函数类型,该函数接受两个参数并返回一个数字类型的结果。我们创建了一个符合IAddFunction接口要求的add函数,并调用它计算两个数字的和。 

接口进阶讲解

接下来,我们继续讲解Typescript的接口的可选属性、只读属性、字符串索引签名、类类型、继承接口、混合类型、接口继承类、可索引的类型、函数类型、额外的属性检查等知识

1. 可选属性(Optional Properties)

接口中的属性可以设置为可选的,即不是必需的。

interface IPerson {
  name: string;
  age?: number;
}

let person1: IPerson = {
  name: "Alice",
};

let person2: IPerson = {
  name: "Bob",
  age: 20,
};

在这个例子中,我们定义了一个IPerson接口,它有一个必需的name属性和一个可选的age属性。person1对象只包含name属性,而person2对象同时包含了nameage属性。

2. 只读属性(Readonly Properties)

接口中的属性可以设置为只读的,即不能修改其值。

interface IPoint {
  readonly x: number;
  readonly y: number;
}

let point: Point = {
  x: 10,
  y: 20,
};

point.x = 5; // 错误,无法修改只读属性

在这个例子中,我们定义了一个IPoint接口,它有两个只读属性xy。一旦初始化了一个IPoint对象,就无法修改其属性的值。

3. 字符串索引签名(String Index Signatures)

接口可以定义字符串索引签名,以支持通过字符串来索引对象的属性。

interface IDictionary {
  [key: string]: string;
}

let dict: IDictionary = {
  apple: "red",
  banana: "yellow",
};

console.log(dict.apple); // 输出:red
console.log(dict.banana); // 输出:yellow

 在这个例子中,我们定义了一个IDictionary接口,它使用字符串索引签名,表示可以通过字符串来索引对象的属性,并且值的类型是字符串。我们创建了一个符合IDictionary接口要求的dict对象,并通过字符串索引来访问其属性。

4. 类类型(Class Types)

接口可以描述类的构造函数和实例部分的形态。

interface IClock {
  new (hour: number, minute: number): IClockInterface;
}

interface IClockInterface {
  tick(): void;
}

class DigitalClock implements IClockInterface {
  constructor(hour: number, minute: number) {}

  tick() {
    console.log("Tick-tock");
  }
}

let digitalClock: Clock = DigitalClock;
let clock = new digitalClock(12, 0);
clock.tick(); // 输出:Tick-tock

在这个例子中,我们定义了一个IClock接口,它描述了一个构造函数和一个实例方法。然后,我们定义了一个DigitalClock类,实现了IClockInterface接口的tick方法。我们创建了一个符合IClock接口要求的digitalClock变量,并使用它创建了一个clock对象,并调用了它的tick方法。

5. 继承接口(Extending Interfaces)

接口可以通过继承其他接口来扩展自己的形状。

/************ 接口的继承示例 ************/
// 形状接口
interface IShape {
  color: string;
}
// 平方平面接口
interface ISquare extends IShape {
  sideLength: number;
}
// 实现示例
let square: ISquare = {
  color: "red",
  sideLength: 10,
};


/************ 接口的多重继承示例 ************/
// 遁地接口
interface IEscapeIntoEarth {
  escaping: () => void
}

// 飞天接口
interface IFlyToSky {
  flying: () => void
}

// 动作接口,可以继承一个父接口,也可以继承多个
interface IAction extends IFlyToSky, IEscapeIntoEarth {

}

// IAction接口继承自IEscapeIntoEarth, IFlyToSky, 意味着使用IAction类型, 需要对escaping和flying方法都进行实现
const action: IAction = {
  escaping() {
	console.log("正在遁地...")
  },
  flying() {
    console.log("正在飞天...")
  }
}

在这个例子中,我们定义了一个IShape接口,它有一个color属性。然后,我们定义了一个ISquare接口,它继承自IShape接口,并添加了一个sideLength属性。我们创建了一个符合ISquare接口要求的square对象。后续我们通过IAction接口多重继承了IFlyToSky、IEscapeIntoEarth接口,使用IAction接口时需要多个继承的接口的属性或方法进行实现。

6. 混合类型(Hybrid Types)

接口可以描述具有多种类型的对象,称为混合类型。

interface ICounter {
  (): number;
  count: number;
  reset(): void;
}

function createCounter(): ICounter {
  let count = 0;
  let counter = function () {
    return count++;
  } as Counter;
  counter.count = count;
  counter.reset = function () {
    count = 0;
    counter.count = count;
  };
  return counter;
}

let counter = createCounter();
console.log(counter()); // 输出:0
console.log(counter()); // 输出:1
counter.reset();
console.log(counter()); // 输出:0

在这个例子中,我们定义了一个ICounter接口,它既可以被调用为函数,也具有一个count属性,还包含了一个无参数、返回值为数字的函数类型。我们创建了一个createCounter函数,它返回一个符合ICounter接口要求的对象。该对象可以被调用,并且每次调用时会增加count属性的值。

7. 接口继承类(Interfaces Extending Classes)

接口可以继承自类,这意味着它会继承类的成员但不包括其实现。

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

interface IDog extends Animal {
  breed: string;
}

let dog: IDog = {
  name: "Bobby",
  breed: "Labrador",
};

在这个例子中,我们定义了一个Animal类,它有一个name属性。然后,我们定义了一个IDog接口,它继承自Animal类,并添加了一个breed属性。我们创建了一个符合IDog接口要求的dog对象。

8. 额外的属性检查(Excess Property Checks)

当使用字面量对象进行赋值时,TypeScript会进行额外的属性检查,以确保赋值对象的属性与目标类型的属性匹配。

interface ISquareConfig {
  color?: string;
  width?: number;
}

function createSquare(config: ISquareConfig): { color: string; area: number } {
  let defaultConfig: SquareConfig = { color: "red", width: 100 };
  return { ...defaultConfig, ...config };
}

let square = createSquare({ color: "blue", width: 200 });
console.log(square.color); // 输出:blue
console.log(square.width); // 输出:200

在这个例子中,我们定义了一个ISquareConfig接口,它描述了一个正方形的配置对象,其中包含了可选的colorwidth属性。我们使用createSquare函数创建一个正方形对象,传入一个具有colorwidth属性的对象字面量。TypeScript会进行额外的属性检查。

9. 函数类型(Function Types)

接口可以描述函数类型,包括函数的参数和返回值类型。

interface ICalculator {
  (a: number, b: number): number;
}

let add: ICalculator = function (a, b) {
  return a + b;
};

let subtract: ICalculator = function (a, b) {
  return a - b;
};

console.log(add(2, 3)); // 输出:5
console.log(subtract(5, 2)); // 输出:3

在这个例子中,我们定义了一个ICalculator接口,它描述了一个函数的形状,该函数接受两个参数并返回一个数字类型的结果。我们创建了两个符合ICalculator接口要求的函数addsubtract,并进行了调用。

10. 可索引的类型(Indexable Types)

接口可以描述具有索引签名的对象,这使我们可以通过索引来访问对象的属性。

interface IStringArray {
  [index: number]: string;
}

let fruits: IStringArray = ["apple", "banana", "orange"];

console.log(fruits[0]); // 输出:apple
console.log(fruits[1]); // 输出:banana
console.log(fruits[2]); // 输出:orange

在这个例子中,我们定义了一个IStringArray接口,它描述了一个索引为数字类型的字符串数组的形状。我们创建了一个符合IStringArray接口要求的fruits数组,并通过索引来访问它的元素。

11. 接口的类实现 (Class implements)

/*************** 基础类实现 ***************/
interface IEat {
  eating: () => void
}

// 类实现接口
class Animal implements IEat{
  eating() {
    console.log("Fish Eating")
  }
}


/*************** 多重继承实现 ***************/
interface IEat {
  eating: () => void
}

interface ISwim {
  swimming: () => void
}

// 类实现接口
class Animal implements IEat, ISwim{
  eating() {
    console.log("Fish Eating")
  }
  swimming() {
    console.log("Fish Swmming")
  }
}

一个类可以同时实现多个接口,但是不可以继承多个父类 

总结

接口是Typescript中非常有用的工具,它可以帮助我们在开发过程中进行类型检查和约束,提高代码的可读性和可维护性。 

Typescript系列教程

Typescript的基础类型及进阶教程

Typescript的变量声明及使用示例

Typescript的Interface的相关使用示例和进阶知识

Typescript关于联合类型的使用方式和示例教程

Typescript的交叉类型的具体使用方式和示例教程

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10299.html
标签
评论
发布的文章

npmjs官网(查询依赖包)

2024-06-07 00:06:56

npx使用及原理

2024-06-07 00:06:36

npm 包管理工具

2024-06-07 00:06:33

vue 思极地图开发

2024-06-07 00:06:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!