Angular中已有类，为何仍使用接口作为数据类型？

Great question—this is one of the most common "wait, why not?" moments when learning TypeScript, so let’s break down the reasoning clearly.

Core Difference: Interfaces Are Contracts, Classes Are Implementations #

First, let’s get the basics straight:

• An interface only defines a shape or contract for data. It tells TypeScript "any object labeled as this type must have these properties with these types"—it has no runtime code, no methods, no constructor.
• A class defines both a shape and concrete behavior (methods, constructor logic, state management). It’s a blueprint for creating objects that can do things, not just hold data.

Here’s a quick example to illustrate:

// Interface: Pure type definition (disappears in compiled JS)
interface Product {
  id: number;
  name: string;
  price: number;
}

// Class: Type + runtime implementation (stays in compiled JS)
class ProductClass {
  id: number;
  name: string;
  price: number;

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

  getFormattedPrice(): string {
    return `$${this.price.toFixed(2)}`;
  }
}

If your products array is just holding raw data (like objects fetched from an API, or stored in frontend state), you don’t need the extra baggage of a class. Interfaces give you all the type safety you need without forcing you to convert plain objects into class instances.

Interfaces Are More Flexible for Data Modeling #

TypeScript uses a structural type system (aka "duck typing")—meaning if an object has all the properties defined in an interface, TypeScript treats it as that type automatically. This is perfect for data coming from external sources (APIs, JSON files) because those are just plain objects, not class instances.

With interfaces, you can also:

• Extend other interfaces to build complex types
• Combine interfaces with intersection types (type Combined = Product & Discount)
• Describe function shapes or index signatures, not just objects

Classes, on the other hand, require you to explicitly create instances (via new ProductClass(...)) or use type assertions if you want to treat a plain object as a class type. That’s unnecessary overhead when you’re just enforcing data shape.

No Runtime Overhead #

Another key point: interfaces are completely erased when TypeScript compiles to JavaScript. They don’t add any code to your final bundle. Classes, however, compile to actual JavaScript constructor functions or ES6 classes, which adds extra bytes to your code—bytes you don’t need if you’re only using the class for type checking.

When Would You Use a Class? #

Don’t get me wrong—classes have their place! You’d want to use a class for your Product type if:

• You need instances to have methods (like calculating discounts, formatting data, or managing internal state)
• You want to use inheritance (e.g., DigitalProduct extends ProductClass)
• You need to use instanceof checks at runtime to identify objects

But for most cases where you’re just defining the shape of data in an array (like your products example), an interface is the simpler, lighter, and more appropriate choice.

内容的提问来源于stack exchange，提问作者billy_56