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

推荐订阅源

月光博客
月光博客
人人都是产品经理
人人都是产品经理
Hugging Face - Blog
Hugging Face - Blog
有赞技术团队
有赞技术团队
阮一峰的网络日志
阮一峰的网络日志
罗磊的独立博客
博客园_首页
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
大猫的无限游戏
大猫的无限游戏
博客园 - 司徒正美
S
SegmentFault 最新的问题
Jina AI
Jina AI
美团技术团队
酷 壳 – CoolShell
酷 壳 – CoolShell
小众软件
小众软件
WordPress大学
WordPress大学
爱范儿
爱范儿
博客园 - Franky
量子位
V
V2EX
Apple Machine Learning Research
Apple Machine Learning Research
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
雷峰网
雷峰网

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.