Interface vs Type in TypeScript

TypeScript is a robust language that adds static typing to JavaScript, bringing a new level of reliability and maintainability to code. By enabling type definitions, TypeScript enhances the development experience, making code easier to debug and read. Among its many features, TypeScript provides both interface and type constructs to define the shape of data—whether it's a variable, object, or class. While they share similarities, each has unique strengths, and knowing when to use one over the other can make your code even cleaner and more efficient.

Interface

Introduced in the earliest versions of TypeScript, interface was inspired by object-oriented programming (OOP) concepts. It allows you to define object shapes in a straightforward way and provides a first-class construct for creating reusable, extendable object types.

Basic Interface Example

interface Car {
    brand: string;
    color: string;
}

Interface Inheritance

One of the main strengths of interfaces is inheritance. An interface can extend other interfaces, making it easy to build on existing structures.

interface Person {
    name: string;
}

interface User extends Person {
    age: number;
}

const user: User = { name: 'Gerald', age: 30 };

Interface for Classes

Interfaces are also a great choice for defining the structure or "contract" of a class, specifying the methods and properties a class should have.

interface Printable {
    print: () => void;
}

class Cart implements Printable {
    print() {
        console.log('Item has been added.');
    }
}

Interface Declaration Merging

Interfaces can be merged—when multiple interfaces with the same name are declared in the same scope, they merge into one. This can be helpful, but overusing it can lead to complexity.

interface User {
    name: string;
}

interface User {
    age: number;
}

const user: User = { name: 'Gerald', age: 30 };

Note: Use declaration merging cautiously. Excessive merging can make interfaces hard to understand and debug due to unintended side effects.

Type

As an alternative to interfaces, TypeScript also provides the type keyword, which is more flexible and can represent a variety of types, not just objects. With type, you can define unions, intersections, and even alias primitive types.

Union Types with Type

For instance, type allows for union types, which is something interfaces cannot handle.

type Id = string | number;

Type Declaration Restrictions

Unlike interfaces, types do not support declaration merging. Attempting to redeclare a type will cause an error.

type User = {
    name: string;
};

// Error: Duplicate identifier 'User'
type User = {
    age: number;
}

Type Composition

type is also ideal for composing new types from existing ones, making it a powerful tool for defining complex data structures.

interface Car {
    brand: string;
    color: string;
}

When Should You Use Each?

• Use interface when defining the structure of objects and classes, as they offer better flexibility with inheritance and work seamlessly with TypeScript’s type-checking.
• Use type for unions, intersections, primitive type aliases, or when you need to create complex, reusable types.

Conclusion

Both interface and type bring valuable capabilities to TypeScript. By understanding the strengths of each, you can choose the right tool for every situation, making your code cleaner, more understandable, and easier to maintain. Embrace the power of TypeScript’s typing system, and enjoy the clarity and safety it brings to your projects!

The above is the detailed content of Interface vs Type in TypeScript. For more information, please follow other related articles on the PHP Chinese website!