惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

V
Visual Studio Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
博客园 - 聂微东
博客园 - 【当耐特】
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
C
Check Point Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
美团技术团队
WordPress大学
WordPress大学
Last Week in AI
Last Week in AI
Y
Y Combinator Blog
IT之家
IT之家
T
Tailwind CSS Blog
月光博客
月光博客
Vercel News
Vercel News
V
V2EX
Engineering at Meta
Engineering at Meta
B
Blog
Stack Overflow Blog
Stack Overflow Blog
A
About on SuperTechFans
Hugging Face - Blog
Hugging Face - Blog
人人都是产品经理
人人都是产品经理
腾讯CDC
I
InfoQ

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
Understanding Mixins in TypeScript: Concept and Examples
Jeferson Eij · 2026-04-20 · via DEV Community

Jeferson Eiji

What Are Mixins in TypeScript?

Mixins in TypeScript provide a way to reuse code across multiple classes without using traditional inheritance. A mixin is a class or function containing properties or methods that can be added to other classes, offering flexible code sharing beyond single inheritance.

Why Use Mixins?

  • Avoid duplication: Share common methods across different classes
  • Flexible composition: Combine features from multiple sources
  • Workaround TypeScript limitations: TypeScript (and JavaScript) only support single class inheritance

How Mixins Work

Mixins are implemented by writing functions that take a base class and extend it with new functionality. TypeScript supports this using interfaces and higher-order functions.

Example: Creating a Simple Mixin

// A generic constructor type
 type Constructor<T = {}> = new (...args: any[]) => T;

// Mixin function
function Flyer<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    fly() {
      console.log('Flying!');
    }
  };
}

// Using the mixin
class Animal {
  move() {
    console.log('Moving!');
  }
}

// Apply the Flyer mixin to Animal
class Bird extends Flyer(Animal) {}

const sparrow = new Bird();
sparrow.move(); // Output: Moving!
sparrow.fly();  // Output: Flying!

Enter fullscreen mode Exit fullscreen mode

Key Points to Remember

  • Mixins allow combining behaviors from multiple sources, solving the single inheritance issue.
  • Use interface to declare what mixin methods will be available.
  • Always use constructor signatures for mixin functions.

Another Example: Multiple Mixins

function Swimmer<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    swim() {
      console.log('Swimming!');
    }
  };
}

class Fish extends Swimmer(Flyer(Animal)) {}

const goldfish = new Fish();
goldfish.move(); // Output: Moving!
goldfish.fly();  // Output: Flying!
goldfish.swim(); // Output: Swimming!

Enter fullscreen mode Exit fullscreen mode

Conclusion

Mixins are a powerful pattern in TypeScript for reusing functionality without complex inheritance chains. They help organize code more clearly and encourage composition over inheritance.