You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

TypeScript中Interface与Abstract Class的区别及代码验证疑问

TypeScript Interface vs Abstract Class: Key Differences

Great question! It’s totally normal to notice that interfaces and abstract classes both enforce constraints on classes, but they serve distinct purposes under the hood. Let’s break down their core differences using your code examples as a starting point.

1. Multiple Implementation vs Single Inheritance

  • A class can implement multiple interfaces to satisfy multiple contracts at once, but TypeScript enforces single inheritance for classes (meaning you can only extends one abstract class).

    Using your code as an example:

    interface IPerson { name: string; talk(): void; }
    interface IVIP { code: number; }
    
    // ✅ Valid: Class implements two interfaces
    class ManagerType2 implements IPerson, IVIP {
      name: string = "Alice";
      code: number = 1001;
      talk() { console.log("Hi there!"); }
    }
    
    abstract class Person { abstract name: string; abstract talk(): void; }
    abstract class VIP { abstract code: number; }
    
    // ❌ Invalid: Class can't extend multiple abstract classes
    // class ManagerType3 extends Person, VIP {}
    

2. Concrete Logic vs Pure Structure

  • Interfaces only define the shape/type of members—they can’t contain concrete method implementations or initialized properties (default methods are allowed but rarely used for core logic). They’re purely about defining a contract.

  • Abstract Classes can mix abstract (unimplemented) members with concrete methods and properties that share logic across subclasses.

    Example with a concrete method in an abstract class:

    abstract class Person {
      abstract name: string;
      abstract talk(): void;
    
      // Concrete method shared by all subclasses
      greet() {
        console.log(`Hello, I'm ${this.name}!`);
      }
    }
    
    class ManagerType1 extends Person {
      name: string = "Bob";
      talk() { console.log("Let's start the meeting."); }
    }
    
    const manager = new ManagerType1();
    manager.greet(); // Output: Hello, I'm Bob! ✅ Inherits concrete logic
    

3. Runtime Existence

  • Interfaces are compile-time only—they get erased entirely during compilation and don’t exist in the final JavaScript code. You can’t use typeof or instanceof with interfaces.

  • Abstract Classes compile to regular JavaScript classes (they just can’t be instantiated directly) and exist at runtime. You can use instanceof to check if an object inherits from the abstract class.

    const manager1 = new ManagerType1();
    console.log(manager1 instanceof Person); // true ✅
    console.log(manager1 instanceof IPerson); // ❌ Error: IPerson is not defined
    

4. Access Modifiers

  • Abstract Classes support public, private, and protected modifiers to restrict access to members, letting you control how subclasses and external code interact with the base class.

  • Interfaces only allow public members (it’s the default, and you can’t explicitly add other modifiers—TypeScript will throw an error if you try).

    Example with protected members in an abstract class:

    abstract class Person {
      protected abstract age: number; // Only accessible to subclasses
      abstract talk(): void;
    }
    
    class ManagerType1 extends Person {
      age: number = 32; // Subclass can implement protected member
      talk() { console.log("Hi!"); }
    }
    
    const m = new ManagerType1();
    console.log(m.age); // ❌ Error: 'age' is protected
    

5. Use Cases

  • Interfaces are ideal for defining contracts (like your IPerson and IVIP) or describing data shapes. Use them when you want unrelated classes to adhere to the same structure, or when you need to type objects that aren’t classes.
  • Abstract Classes shine when you have a group of related classes that share common logic. Use them to encapsulate reusable code and enforce a base structure for subclasses.

内容的提问来源于stack exchange,提问作者Shift 'n Tab

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.26 09:59:11