---
title: "Derive Decorator"
description: "The @derive decorator implements a trait mechanism borrowed from V4Fire, copying methods from one or more traits into a class for multiple inheritance."
metadata:
  - name: keywords
    content: "jodit derive, trait, decorator, multiple inheritance, v4fire, mixin"
---
# @derive

Inspired by the great [V4Fire framework](https://github.com/V4Fire), we decided to add a trait mechanism to the editor.
You can read more about the derive directive in the original [project](https://github.com/V4Fire/Client/tree/master/src/traits).

Here we will consider only an example of use.
The expansion of the object's fields is not due to inheritance, but due to the copying of functions from the so-called traits.

Let's describe some functionality that we would like to reuse in other classes.

```typescript
import type { IComponent, IDictionary } from 'jodit/types';

export abstract class SomeFuntionality {
  abstract mods: IDictionary;

  setMode(
    this: IComponent & SomeFuntionality,
    name: string,
    value: string
  ): void {
    this.mods[name] = value;
  }

  getMode(
    this: IComponent & SomeFuntionality,
    name: string
  ): CanUndef<string> {
    return this.mods[name];
  }
}
```

In classical OOP, we would use inheritance. But if we want to add this functionality to a class,
which has nothing to do with it, there will be problems.
Therefore, the trait mechanism was proposed in V4Fire, and Jodit borrowed it.

```typescript
import type { IComponent, IDictionary } from 'jodit/types';
import { Component } from 'jodit/core/component';
import { derive } from 'jodit/core/decorators';
import { SomeFuntionality } from './traits/some-functionality.ts';

export interface SomeComponent extends SomeFuntionality {}

@derive(SomeFuntionality)
export class SomeComponent extends Component {
  mods: IDictionary = {};
}

const component = new SomeComponent();
component.setMode('open', 'true');
```

TypeScript uses a mechanism to extend the interface of any class. And in runtime, they are added by the `derive` directive.

This is how multiple inheritance works. Those. A decorator can take multiple extensions.

```typescript
import type { IComponent, IDictionary } from 'jodit/types';
import { Component } from 'jodit/core/component';
import { derive } from 'jodit/core/decorators';
import { Mods, Dlgs, Elms } from 'jodit/core/traits';
import { SomeFuntionality } from './traits/some-functionality.ts';

export interface SomeComponent extends Mods, Dlgs, Elms, SomeFuntionality {}

@derive(Mods, Dlgs, Elms, SomeFuntionality)
export class SomeComponent extends Component {
  mods: IDictionary = {};
}

const component = new SomeComponent();
component.setMode('open', 'true'); // From SomeComponent
component.setMod('open', 'true'); // From Mods
component.alert('Hi'); // From Dlgs
component.getElm('header'); // From Elms
```


### derive()

**derive**(...`traits`): (`target`) => `void`

Defined in: [src/core/decorators/derive/derive.ts:15](https://github.com/xdan/jodit/blob/main/src/core/decorators/derive/derive.ts#L15)

#### Parameters

| Parameter | Type |
| ------ | ------ |
| ...`traits` | [`Function`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Function)[] |

#### Returns

(`target`) => `void`