TypeScript接口和类型的区别小结

下面我将为您介绍关于“TypeScript接口和类型的区别”的详细攻略。

什么是TypeScript接口？

TypeScript接口是一种抽象结构，用于描述对象的形状。它们描述了对象具有什么属性，以及属性的类型。接口定义了一个协议（规范），对象实现该协议则视为符合该接口需求。例如：

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

上面的代码定义了一个Person接口，它有三个属性：name、age和sayHello()。其中，name属性类型为string，age属性类型为number，而sayHello()是一个没有参数和返回值的函数。

你可以定义一个对象，它符合Person接口的要求：

let person: Person = {
    name: 'Tom',
    age: 18,
    sayHello() {
        console.log('Hello, my name is ' + this.name);
    }
}

什么是TypeScript类型？

TypeScript中的类型是用来定义变量、函数参数等的约束条件。具体来说，它们用来描述应用程序执行过程中使用的数据的类型，例如：数字、字符串、布尔值等，以及自定义的对象、函数等。例如：

let num: number = 10;
let str: string = 'hello';
let bool: boolean = true;

上面的代码中，我们定义了三个变量，它们的类型分别为number、string和boolean。

TypeScript接口和类型的区别

区别一：接口可以描述对象或类，类型不能

我们可以使用接口来描述一个对象或者一个类的结构。例如：

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

一个实现了该接口的类：

class Student implements Person {
    name: string;
    age: number;
    sayHello() {
        console.log('Hello, my name is ' + this.name);
    }
    study() {
        console.log(this.name + ' is studying');
    }
}

而类型无法描述一个类的结构，只能用来约束普通变量的类型。

区别二：接口可以继承，类型不能

接口可以继承自其他的接口，用来扩展接口的属性和方法。例如：

interface Animal {
    eat(): void;
}

interface Person extends Animal{
    name: string;
    age: number;
    sayHello(): void;
}

而类型无法继承自其他类型。

示例说明

interface Car {
    brand: string;
    color: string;
    run(): void;
}

type CarType = {
    brand: string;
    color: string;
    run(): void;
}

class BMW implements Car {
    brand: string;
    color: string;
    run() {
        console.log(`${this.color} ${this.brand} is running`);
    }
}

上面的例子中，我们定义了一个Car接口和一个CarType类型，它们的结构是一样的。我们还定义了一个BMW类，它实现了Car接口，因为与Car接口的结构一致。而我们无法使用CarType类型来约束BMW类的结构。

另一个例子：

type Point = {
    x: number;
    y: number;
}

interface Shape {
    draw(): void;
}

interface Rect extends Shape{
    topLeft: Point;
    width: number;
    height: number;
}

class MyRect implements Rect {
    topLeft: Point;
    width: number;
    height: number;

    draw() {
        console.log('drawing a rectangle at (' + this.topLeft.x + ', ' + this.topLeft.y + ') with width ' + this.width + ' and height ' + this.height);
    }
}

上面的代码中，我们定义了一个Point类型和一个Shape接口。我们还定义了一个Rect接口，它继承自Shape接口，并添加了topLeft、width和height属性。最后，我们定义了一个MyRect类，它实现了Rect接口并实现了draw()方法。在MyRect类中，我们可以定义特定于矩形的属性，如width和height，以及特定于形状的属性，如draw()方法。