📜  在 TypeScript 中何时使用接口以及何时使用类?

📅  最后修改于: 2022-05-13 01:56:38.845000             🧑  作者: Mango

在 TypeScript 中何时使用接口以及何时使用类?

TypeScript 支持面向对象的编程特性,如类和接口等。类是对象的骨架。它封装了对象中使用的数据。接口就像 TypeScript 中类的类型。它用于类型检查。它只包含对象成员的声明。它有助于派生类。

何时在 TypeScript 中使用接口:

在创建对象并将对象作为参数传递的情况下,我们应该使用 TypeScript 中的接口来验证对象的结构。该接口仅在编译 JavaScript 代码时在 TypeScript 代码中可用,它的存在消失了它不会使我们的最终源代码更重。当我们想要进行类型检查但我们不希望我们的代码变得庞大时,我们应该使用接口。在这种情况下,我们应该在代码中使用接口。

句法:

// Declaring Interface
interface Interface_name {
    ...
} 

示例:下面的示例将说明 TypeScript 中接口的使用。

Javascript
interface Example {
    Name_should: string;
    Number_should: number;
}
  
class Class_Example implements Example {
  
    Name_should: string;
    Number_should: number;
    constructor(Name_should: string, 
    Number_should: number) {
        this.Name_should = Name_should;
        this.Number_should = Number_should;
    }
  
}
var k = new Class_Example("Interface", 1);
console.log(k);


Javascript
var Name = "Geeks1";
var Number1 = 33;
class Class_Example {
  
    Name: string;
    Number: number;
    constructor(Name: string, Number: number) {
        this.Name = Name;
        this.Number = Number1;
    }
  
  
}
var k = new Class_Example("Geeks2", 1);
  
console.log(k.Name);
console.log(Name);
console.log(k.Number);
console.log(Number1);


Javascript
class vehicle {
  
    Company_Name: string;
    Number: number;
    constructor(Company_Name: string, Number: number) {
        this.Company_Namclass vehicle {
  
            Company_Name: string;
            Number: number;
            constructor(Company_Name: string, Number: number) {
                this.Company_Name = Company_Name;
                this.Number = Number;
            }
        }
        class car extends vehicle {
            name: string;
            Number: number;
            wheel: number;
            fuel: string;
            constructor(name: string, Number: number,
                wheel: number, fuel: string) {
                super(name, Number);
                this.wheel = wheel;
                this.fuel = fuel;
            }
        }
        var k = new car("toyota", 9243, 4, "Geeks2");
        e = Company_Name;
        this.Number = Number;
    }
}
class car extends vehicle {
    name: string;
    Number: number;
    wheel: number;
    fuel: string;
    constructor(name: string, Number: number,
        wheel: number, fuel: string) {
        super(name, Number);
        this.wheel = wheel;
        this.fuel = fuel;
    }
}
var k = new car("toyota", 9243, 4, "Geeks2");


输出:

Class_Example { Name_should: 'Interface', Number_should: 1 }

我们已经了解了何时使用接口,现在让我们讨论何时在 TypeScript 中使用类:

何时在 TypeScript 中使用类:

案例 1:类作为对象工厂。工厂将一个对象或材料的所有相关数据和功能组合在一个地方,这样我们的工作代码和其他不相关工作的灵活性就不会相互作用并导致任何问题。在这种情况下当我们需要在复杂的代码中保持灵活性而不中断时,我们应该使用它,我们应该使用类。

句法:

// Declaring Classes
class Class_name {
    ...
}

示例:下面的示例将说明 TypeScript 中类的使用。

Javascript

var Name = "Geeks1";
var Number1 = 33;
class Class_Example {
  
    Name: string;
    Number: number;
    constructor(Name: string, Number: number) {
        this.Name = Name;
        this.Number = Number1;
    }
  
  
}
var k = new Class_Example("Geeks2", 1);
  
console.log(k.Name);
console.log(Name);
console.log(k.Number);
console.log(Number1);

输出:

Geeks2
Geeks1
1
33

案例 2:类提供了面向对象编程的特性所以它使我们的代码更易于使用、可维护和可扩展,所以在这种情况下我们应该在 TypeScript 中使用类。它们的类功能对于高效处理大型代码库很有用。所以当我们需要处理大代码并且想要类的这些功能时,我们应该使用类。例如,我们可以看到类继承的例子。

示例:下面的示例将说明 TypeScript 中类的使用。

Javascript

class vehicle {
  
    Company_Name: string;
    Number: number;
    constructor(Company_Name: string, Number: number) {
        this.Company_Namclass vehicle {
  
            Company_Name: string;
            Number: number;
            constructor(Company_Name: string, Number: number) {
                this.Company_Name = Company_Name;
                this.Number = Number;
            }
        }
        class car extends vehicle {
            name: string;
            Number: number;
            wheel: number;
            fuel: string;
            constructor(name: string, Number: number,
                wheel: number, fuel: string) {
                super(name, Number);
                this.wheel = wheel;
                this.fuel = fuel;
            }
        }
        var k = new car("toyota", 9243, 4, "Geeks2");
        e = Company_Name;
        this.Number = Number;
    }
}
class car extends vehicle {
    name: string;
    Number: number;
    wheel: number;
    fuel: string;
    constructor(name: string, Number: number,
        wheel: number, fuel: string) {
        super(name, Number);
        this.wheel = wheel;
        this.fuel = fuel;
    }
}
var k = new car("toyota", 9243, 4, "Geeks2");

输出:

car { 
    Company_Name: 'toyota', 
    Number: 9243, 
    wheel: 4, 
    fuel: 'Geeks2' 
}

类和接口的优势:

                                      Classes                                 Interface

Classes provide inheritance which enables classes to borrow property

of one class into another.

The interface also provides inheritance property. 
Classes support method overriding which helps in function redefining.It merges with the Interface with the same number.

Classes provide a static method that makes the function of classes to be used without declaration.

It is doesn’t increase the size of the source file because it is a virtual structure.