# Introduction

General information about what the angular package provides.

The documentation provides general information about **angular-package** features.

In a few sentences, angular-package supports the **development** process of [**angular**](https://angular.io/)-based applications in varied ways through the thoughtful, reusable, easy-to-use small pieces of code called packages.

Some of them are designed in a **business logic** way for **intuitive** exchange data between database and user interface and by having a mind in the **simplicity** of the javascript-typescript integration.

Some of the functionalities are based on **non-conventional** javascript usage resulting from the use of primitive wrapper objects to achieve specific-purpose immutable types with **intuitive** names and their **unique** features.

An **angular package** contains objects like range, preferences, user, settings to build an **intuitive user interface**, and on the next page, there is a list of them, even those currently unavailable.

**Donate**

Sass extension is **free** to use. If you enjoy it, please consider donating via [fiat](/donate/fiat), [revolut platform](https://business.revolut.com/revolutme/angularpackage) or [cryptocurrency](/donate/cryptocurrency) the [@angular-package](https://github.com/sponsors/angular-package) for further development. ♥

> Feel **free** to submit a pull request. Help is always appreciated.


# Packages

Below is the list of all **angular packages.** Some of them are **not** published yet. **Click** on the package name opens documentation on [GitBook](https://gitbook.com).

|                                                  |                                                                       |
| ------------------------------------------------ | --------------------------------------------------------------------- |
| callback                                         | Manages the **callback** function.                                    |
| change-detection                                 | Improves application **performance**.                                 |
| component-loader                                 | Handles dynamic loading components.                                   |
| core                                             | Core features.                                                        |
| [error](https://error.angular-package.dev)       | Manages an **error**.                                                 |
| name                                             | The **name** with prefix and suffix.                                  |
| preferences                                      | Preferences, settings, options, configuration and setup in steps.     |
| prism                                            | [**Prism**](https://prismjs.com/) highlighter module.                 |
| property                                         | Handles object properties.                                            |
| [range](https://range.angular-package.dev)       | The range between a **minimum** and **maximum**.                      |
| reactive                                         | Automatize the process of creating rxjs features.                     |
| [sass](https://docs.angular-package.dev/v/sass/) | Extension for [sass](https://sass-lang.com/) modules and new modules. |
| storage                                          | The **storage** of data under allowed names.                          |
| [tag](https://tag.angular-package.dev/)          | Any tag with optional attributes.                                     |
| testing                                          | Support for **testing** other packages.                               |
| [text](https://text.angular-package.dev)         | **Text** on the template with replaceable tags.                       |
| [type](https://type.angular-package.dev/)        | Common types, type guards, and type checkers.                         |
| ui                                               | User interface.                                                       |
| [wrapper](https://wrapper.angular-package.dev/)  | Wrap the text with the opening and closing chars.                     |


# MIT License

The MIT License (MIT)

Copyright (c) @angular-package

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


# Chat

## Discord

Feel free to ask any questions about the **angular package** project in a general chat room on the discord.

{% embed url="<https://discord.com/invite/rUCR2CW75G>" %}

## Gitter

Feel free to ask any questions about the **angular package** project in a dedicated chat room on the gitter [here](https://gitter.im/angularpackage/Lobby).

{% embed url="<https://gitter.im/angularpackage/Lobby>" %}
Gitter chat
{% endembed %}


# Email

## Email

[contact@angular-package.dev](#email)


# Phone

## Mobile phone

Poland, Poznań

+48 883322727


# Cryptocurrency

Become a sponsor to the **angular package** by sending the cryptocurrency:

## Bitcoin (BTC)

{% hint style="success" %}
My Public Address to Receive BTC

bc1qnf709336tfl57ta5mfkf4t9fndhx7agxvv9svn
{% endhint %}

<details>

<summary>Pay me BTC via Trust Wallet</summary>

<https://link.trustwallet.com/send?coin=0&address=bc1qnf709336tfl57ta5mfkf4t9fndhx7agxvv9svn>

</details>

## Ethereum (ETH)&#x20;

{% hint style="success" %}
My Public Address to Receive ETH

0xA0c22A2bc7E37C1d5992dFDFFeD5E6f9298E1b94
{% endhint %}

<details>

<summary>Pay me ETH via Trust Wallet</summary>

<https://link.trustwallet.com/send?coin=60&address=0xA0c22A2bc7E37C1d5992dFDFFeD5E6f9298E1b94>

</details>

## Smart Chain (BNB)

{% hint style="success" %}
My Public Address to Receive BNB

0xA0c22A2bc7E37C1d5992dFDFFeD5E6f9298E1b94
{% endhint %}

<details>

<summary>Pay me BNB via Trust Wallet</summary>

<https://link.trustwallet.com/send?coin=20000714&address=0xA0c22A2bc7E37C1d5992dFDFFeD5E6f9298E1b94>

</details>

## Tether USDT (BEP20)

{% hint style="success" %}
My Public Address to Receive USDT

0xA0c22A2bc7E37C1d5992dFDFFeD5E6f9298E1b94
{% endhint %}

<details>

<summary>Pay me USDT via Trust Wallet</summary>

<https://link.trustwallet.com/send?coin=20000714&address=0xA0c22A2bc7E37C1d5992dFDFFeD5E6f9298E1b94&token_id=0x55d398326f99059fF775485246999027B3197955>

</details>

## Stellar (XLM)

{% hint style="success" %}
My Public Address to Receive XLM

GAFFFB7H3LG42O6JA63FJDRK4PP4JCNEOPHLGLLFH625X2KFYQ4UYVM4
{% endhint %}

<details>

<summary>Pay me XLM via Trust Wallet</summary>

<https://link.trustwallet.com/send?coin=148&address=GAFFFB7H3LG42O6JA63FJDRK4PP4JCNEOPHLGLLFH625X2KFYQ4UYVM4>

</details>


# Fiat

## Revolut

{% embed url="<https://business.revolut.com/revolutme/angularpackage>" %}

## DonorBox

Become a sponsor to the **angular package** by using DonorBox sponsor [page](https://donorbox.org/become-a-sponsor-to-the-angular-package?default_interval=o).

{% embed url="<https://donorbox.org/become-a-sponsor-to-the-angular-package?default_interval=o>" %}

## GitHub

Become a sponsor to the **angular package** by using the **GitHub** sponsor [page](https://github.com/sponsors/angular-package).

{% embed url="<https://github.com/sponsors/angular-package>" %}

## Patreon

Become a sponsor to the **angular package** through angularpackage account on the Patreon [page](https://www.patreon.com/angularpackage).

{% embed url="<https://www.patreon.com/join/angularpackage/checkout?fan_landing=true&rid=0&view_as=public>" %}


# Introduction

General information about what the angular package provides.

The designing page describes small parts of the designing process functions, objects, classes, and more. Shows various ways of thinking, which means problems that arose during the process, and their possible solutions.

Of course, before starting, there is a need to know what will be designed and its basis.

### Idea

It's called an **idea**, and every **idea** brings problems. Finding solutions to those problems is a part of the process, which it's not possible until there is a **clear idea** of what the problem is. To have a **clear idea** means to make a thorough analysis, and to do it properly, general and specific-idea knowledge is required.

### Problem

The **problem**, better to say, the **challenge** is to write meaningful, clearly-understandable, easy-readable code in an **intuitive**, **minimal**, **logical**, **cohesive**, and **consistent** way. Writing code that considers many word definitions can be frustrating or difficult without a list of rules. Investing the time to create a few design **principles** saves time in the design process and results in a **thoughtful** final form.

### Principles

To make **thoughtful** design **principles** there is a need to make a **deeper** **insight** into many **things** around the code and into the **code**, achieving appropriate **integration** of those **things** with a code. It means to put **effort** to make much **analysis** of different things and make a proper final **diagnose**. One of the **things** is to choose the right words and **proper understanding** of the words used to produce the code.&#x20;

### Words

Designing process forces to know the definitions of some words and a proper understanding of them, which results in better insight and final form of objects. To make things easier on the next page are definitions of some words good to know.


# Definitions

The page **covers** some of the most **important words** that should be **considered** during the design process. The definitions of these words are taken from [Merriam-Webster](https://www.merriam-webster.com/) and the [Cambridge Dictionary](https://dictionary.cambridge.org/).&#x20;

* [Adjective](/designing/definitions/adjective-noun)
* [Cohesion](/designing/definitions/cohesion-noun)
* [Cohesive](/designing/definitions/cohesive-adjective)
* [Cohesiveness](/designing/definitions/cohesiveness-noun)
* [Complex](/designing/definitions/complex-adjective-noun)
* [Complexity](/designing/definitions/complexity-noun)
* [Consistency](/designing/definitions/consistency-noun)
* [Consistent](/designing/definitions/consistent-adjective)
* [Constantly](/designing/definitions/constantly-adverb)
* [Diagnosis](/designing/definitions/diagnosis-noun)
* [Functional](/designing/definitions/functional-adjective)
* [Functionality](/designing/definitions/functionality-noun)
* [Get](/designing/definitions/get-verb)
* [Has](/designing/definitions/have-verb)
* [Immutable](/designing/definitions/immutable-adjective)
* [Independent](/designing/definitions/independent)
* [Interdependence](/designing/definitions/interdependence)
* [Intuition](/designing/definitions/intuition-noun)
* [Intuitive](/designing/definitions/intuitive-adjective)
* [Intuitiveness](/designing/definitions/intuitiveness-noun)
* [Is](/designing/definitions/is-verb)
* [Logic](/designing/definitions/logic-noun)
* [Minimalism](/designing/definitions/minimalism-noun)
* [Mutable](/designing/definitions/mutable-adjective)
* [Noun](/designing/definitions/noun-noun)
* [Preposition](/designing/definitions/preposition-noun)
* [Purpose](/designing/definitions/purpose-noun)
* [Replace](/designing/definitions/replace-verb)
* [Set](/designing/definitions/set-verb)
* [Simplicity](/designing/definitions/simplicity-noun)
* [To](/designing/definitions/to-preposition)
* [Verb](/designing/definitions/verb-noun)

All the words above are **interdependent** in some ways. For example, complexity is correlated with simplicity in 100%. It means if an object's complexity is at 70%, then its simplicity is 30%.


# Adjective: noun

### Cambridge Dictionary

> *"a word that* [*describes*](https://dictionary.cambridge.org/dictionary/english/describe) *a* [*noun*](https://dictionary.cambridge.org/dictionary/english/noun) *or* [*pronoun*](https://dictionary.cambridge.org/dictionary/english/pronoun)*"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/adjective>" %}

### Merriam-Webster

> *"a word that describes a noun or a pronoun"*

{% embed url="<https://www.merriam-webster.com/dictionary/adjective>" %}


# Cohesion: noun

### Dictionary

> *"the act or state of* [*cohering*](https://www.dictionary.com/browse/cohere)*, uniting, or sticking together"*

{% embed url="<https://www.dictionary.com/browse/cohesion>" %}

### Cambridge Dictionary

> *"(of* [*objects*](https://dictionary.cambridge.org/dictionary/english/object)*) the* [*state*](https://dictionary.cambridge.org/dictionary/english/state) *of* [*sticking*](https://dictionary.cambridge.org/dictionary/english/stick) *together, or (of* [*people*](https://dictionary.cambridge.org/dictionary/english/people)*) being in* [*close*](https://dictionary.cambridge.org/dictionary/english/close) [*agreement*](https://dictionary.cambridge.org/dictionary/english/agreement) *and* [*working*](https://dictionary.cambridge.org/dictionary/english/working) *well together"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/cohesion>" %}

### Cohesiveness vs Cohesion

{% embed url="<https://wikidiff.com/cohesiveness/cohesion>" %}


# Cohesive: adjective

### Cambridge Dictionary

> *"*[*united*](https://dictionary.cambridge.org/dictionary/english/unite) *and* [*working*](https://dictionary.cambridge.org/dictionary/english/working) *together* [*effectively*](https://dictionary.cambridge.org/dictionary/english/effectively)*"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/cohesive>" %}

### Merriam-Webster

> *"closely united"*

{% embed url="<https://www.merriam-webster.com/dictionary/cohesive>" %}

### Cohesion vs Cohesive

{% embed url="<https://wikidiff.com/cohesion/cohesive>" %}


# Cohesiveness: noun

### Dictionary

> *"the quality of sticking together, or of causing things to stick together"*

{% embed url="<https://www.dictionary.com/browse/cohesiveness>" %}

### Cohesiveness vs Cohesion

{% embed url="<https://wikidiff.com/cohesiveness/cohesion>" %}


# Complex: adjective, noun

### Cambridge Dictionary

> *As* **adjective**&#x20;
>
> *"*[*involving*](https://dictionary.cambridge.org/dictionary/english/involve) *a lot of different but* [*related*](https://dictionary.cambridge.org/dictionary/english/related) [*parts*](https://dictionary.cambridge.org/dictionary/english/part)*"*
>
> *"*[*difficult*](https://dictionary.cambridge.org/dictionary/english/difficult) *to* [*understand*](https://dictionary.cambridge.org/dictionary/english/understand) *or* [*find*](https://dictionary.cambridge.org/dictionary/english/find) *an* [*answer*](https://dictionary.cambridge.org/dictionary/english/answer) *to because of having many different* [*parts*](https://dictionary.cambridge.org/dictionary/english/part)*"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/complex>" %}

### Dictionary

> As **adjective**
>
> *"composed of many interconnected parts; compound; composite"*

> As **noun**
>
> *"an intricate or complicated association or assemblage of related things, parts, units, etc."*

{% embed url="<https://www.dictionary.com/browse/complex>" %}

### Merriam-Webster

> As **adjective**
>
> *"hard to separate, analyze, or solve"*

> As **noun**
>
> *"a group of things that are connected in complicated ways"*

{% embed url="<https://www.merriam-webster.com/dictionary/complex>" %}

### Complexity vs Complex

{% embed url="<https://wikidiff.com/complexity/complex>" %}


# Complexity: noun

### Cambridge Dictionary

> *"the* [*state*](https://dictionary.cambridge.org/dictionary/english/state) *of having many* [*parts*](https://dictionary.cambridge.org/dictionary/english/part) *and being* [*difficult*](https://dictionary.cambridge.org/dictionary/english/difficult) *to* [*understand*](https://dictionary.cambridge.org/dictionary/english/understand) *or* [*find*](https://dictionary.cambridge.org/dictionary/english/find) *an* [*answer*](https://dictionary.cambridge.org/dictionary/english/answer) *to"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/complexity>" %}

### **Dictionary**

> ***"**&#x74;he state or quality of being* [*complex*](https://www.dictionary.com/browse/complex)*; intricac&#x79;**"***

{% embed url="<https://www.dictionary.com/browse/intricacy>" %}

### **Merriam-Webster**

> *"the quality or state of being complex"*

{% embed url="<https://www.merriam-webster.com/dictionary/complexity>" %}

### Simplicity vs Complexity

{% embed url="<https://wikidiff.com/simplicity/complexity>" %}

## Object complexity in:

* Consistency.
* Interdependence.
* Mutability.
* Intuitiveness of the name.
* Generic type variables:
  * Intuitiveness of the name.
  * Quantity.
  * Type.
* Properties:
  * Intuitiveness of the name.
  * Quantity.
  * Type.
* Methods:
  * Intuitiveness of the name.
  * Quantity.
  * Generic type variables:
    * Quantity.
    * Intuitiveness of the name.
  * Parameters:
    * Quantity.
    * Intuitiveness of the name.
    * Type.


# Consistency: noun

### Cambridge Words

> *"the* [*quality*](https://dictionary.cambridge.org/dictionary/english/quality) *of always* [*behaving*](https://dictionary.cambridge.org/dictionary/english/behave) *or* [*performing*](https://dictionary.cambridge.org/dictionary/english/perform) *in a* [*similar*](https://dictionary.cambridge.org/dictionary/english/similar) *way, or of always* [*happening*](https://dictionary.cambridge.org/dictionary/english/happening) *in a* [*similar*](https://dictionary.cambridge.org/dictionary/english/similar) *way"*
>
> *"the* [*state*](https://dictionary.cambridge.org/dictionary/english/state) *or* [*condition*](https://dictionary.cambridge.org/dictionary/english/condition) *of always* [*happening*](https://dictionary.cambridge.org/dictionary/english/happening) *or* [*behaving*](https://dictionary.cambridge.org/dictionary/english/behave) *in the same way"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/consistency>" %}

### Merriam-Webster

> *"the quality or fact of having parts that agree with each other"*
>
> *"agreement or harmony of parts or features to one another or a whole"*

{% embed url="<https://www.merriam-webster.com/dictionary/consistency>" %}

### Consistent vs Consistency

{% embed url="<https://wikidiff.com/consistent/consistency>" %}


# Consistent: adjective

### Merriam-Webster

> *"always acting or behaving in the same way"*

{% embed url="<https://www.merriam-webster.com/dictionary/consistent>" %}

> *"always* [*behaving*](https://dictionary.cambridge.org/dictionary/english/behave) *or* [*happening*](https://dictionary.cambridge.org/dictionary/english/happening) *in a* [*similar*](https://dictionary.cambridge.org/dictionary/english/similar)*,* [*especially*](https://dictionary.cambridge.org/dictionary/english/especially) [*positive*](https://dictionary.cambridge.org/dictionary/english/positive)*, way"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/consistent>" %}

To act or behave in the same way means to have the list of the same principles, and some of the principles are contained in definitions of words.

### Consistent vs Consistency

{% embed url="<https://wikidiff.com/consistent/consistency>" %}

### Cohesive vs Consistent

{% embed url="<https://wikidiff.com/cohesive/consistent>" %}


# Constantly: adverb

### Cambridge Dictionary

> *"all the* [*time*](https://dictionary.cambridge.org/dictionary/english/time) *or often"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/constantly>" %}

### Merriam-Webster

> *"without variation, deviation, or change"*
>
> *"with regular occurrence"*

{% embed url="<https://www.merriam-webster.com/dictionary/constantly>" %}


# Diagnosis: noun

### Cambridge Dictionary

> *"a* [*judgment*](https://dictionary.cambridge.org/dictionary/english/judgment) *about what a* [*particular*](https://dictionary.cambridge.org/dictionary/english/particular) [*illness*](https://dictionary.cambridge.org/dictionary/english/illness) *or* [*problem*](https://dictionary.cambridge.org/dictionary/english/problem) *is, made after* [*examining*](https://dictionary.cambridge.org/dictionary/english/examine) *it"*
>
> *"the making of a* [*judgment*](https://dictionary.cambridge.org/dictionary/english/judgment) *about the* [*exact*](https://dictionary.cambridge.org/dictionary/english/exact) [*character*](https://dictionary.cambridge.org/dictionary/english/character) *of a* [*disease*](https://dictionary.cambridge.org/dictionary/english/disease) *or other* [*problem*](https://dictionary.cambridge.org/dictionary/english/problem)*,* [*esp*](https://dictionary.cambridge.org/dictionary/english/esp)*. after an* [*examination*](https://dictionary.cambridge.org/dictionary/english/examination)*, or such a* [*judgment*](https://dictionary.cambridge.org/dictionary/english/judgment)*"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/diagnosis>" %}

### Merriam-Webster

> *"the act of identifying a disease, illness, or problem by examining someone or something"*
>
> *"a statement or conclusion that describes the reason for a disease, illness, or problem"*

{% embed url="<https://www.merriam-webster.com/dictionary/diagnosis>" %}


# Functional: adjective

### Cambridge Dictionary

> *"*[*designed*](https://dictionary.cambridge.org/dictionary/english/design) *to be* [*practical*](https://dictionary.cambridge.org/dictionary/english/practical) *and* [*useful*](https://dictionary.cambridge.org/dictionary/english/useful) [*rather*](https://dictionary.cambridge.org/dictionary/english/rather) *than* [*attractive*](https://dictionary.cambridge.org/dictionary/english/attractive)*"*
>
> *"(of a* [*machine*](https://dictionary.cambridge.org/dictionary/english/machine)*,* [*system*](https://dictionary.cambridge.org/dictionary/english/system)*, etc.)* [*working*](https://dictionary.cambridge.org/dictionary/english/working) *in the* [*usual*](https://dictionary.cambridge.org/dictionary/english/usual) *way"*
>
> *"*[*working*](https://dictionary.cambridge.org/dictionary/english/working) *in the* [*expected*](https://dictionary.cambridge.org/dictionary/english/expected) *or* [*necessary*](https://dictionary.cambridge.org/dictionary/english/necessary) *way"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/functional>" %}

### Functionality vs Functional

{% embed url="<https://wikidiff.com/functionality/functional>" %}


# Functionality: noun

### Cambridge Words

> *"the* [*quality*](https://dictionary.cambridge.org/dictionary/english/quality) *of being* [*useful*](https://dictionary.cambridge.org/dictionary/english/useful)*,* [*practical*](https://dictionary.cambridge.org/dictionary/english/practical)*, and* [*right*](https://dictionary.cambridge.org/dictionary/english/right) *for the* [*purpose*](https://dictionary.cambridge.org/dictionary/english/purpose) *for which something was made"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/functionality>" %}

### Merriam-Webster

> *"the quality or state of being* [*functional*](https://www.merriam-webster.com/dictionary/functional)*"*

{% embed url="<https://www.merriam-webster.com/dictionary/functionality>" %}

### Functionality vs Functional

{% embed url="<https://wikidiff.com/functionality/functional>" %}


# Get: verb

### Cambridge Words

> *"to* [*receive*](https://dictionary.cambridge.org/dictionary/english/receive) *or be given something"*
>
> *"to* [*obtain*](https://dictionary.cambridge.org/dictionary/english/obtain)*,* [*buy*](https://dictionary.cambridge.org/dictionary/english/buy)*, or* [*earn*](https://dictionary.cambridge.org/dictionary/english/earn) *something"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/get>" %}

### Merriam-Webster

> *"to gain possession of"*
>
> *"to obtain by concession or entreaty"*

{% embed url="<https://www.merriam-webster.com/dictionary/get>" %}


# Have: verb

### Merriam-Webster

> *"to hold or maintain as a possession, privilege, or entitlement"*
>
> *"to hold, include, or contain as a part or whole"*
>
> *"to stand in a certain relationship to"*

{% embed url="<https://www.merriam-webster.com/dictionary/have>" %}


# Immutable: adjective

### Cambridge Dictionary

> *"not* [*changing*](https://dictionary.cambridge.org/dictionary/english/changing)*, or* [*unable*](https://dictionary.cambridge.org/dictionary/english/unable) *to be* [*changed*](https://dictionary.cambridge.org/dictionary/english/changed)*"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/immutable>" %}

### Merriam-Webster

> *"not capable of or susceptible to change"*

{% embed url="<https://www.merriam-webster.com/dictionary/immutable>" %}

### Mozilla

> *"An immutable object is one whose content cannot be changed."*

{% embed url="<https://developer.mozilla.org/en-US/docs/Glossary/Immutable>" %}


# Independent

### Merriam-Webster


# Interdependence

### Merriam-Webster


# Intuition: noun

### Cambridge Dictionary

> *"(*[*knowledge*](https://dictionary.cambridge.org/dictionary/english/knowledge) *from) an* [*ability*](https://dictionary.cambridge.org/dictionary/english/ability) *to* [*understand*](https://dictionary.cambridge.org/dictionary/english/understand) *or* [*know*](https://dictionary.cambridge.org/dictionary/english/know) *something* [*immediately*](https://dictionary.cambridge.org/dictionary/english/immediately) [*based*](https://dictionary.cambridge.org/dictionary/english/based) *on* [*your*](https://dictionary.cambridge.org/dictionary/english/your) [*feelings*](https://dictionary.cambridge.org/dictionary/english/feeling) [*rather*](https://dictionary.cambridge.org/dictionary/english/rather) *than* [*facts*](https://dictionary.cambridge.org/dictionary/english/fact)*"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/intuition>" %}

### Merriam-Webster

> *"* *something that is known or understood without proof or evidence"*
>
> *"a natural ability or power that makes it possible to know something without any proof or evidence"*
>
> *"a feeling that guides a person to act a certain way without fully understanding why"*&#x20;

{% embed url="<https://www.merriam-webster.com/dictionary/intuition>" %}


# Intuitive: adjective

### Merriam-Webster

> *"having the ability to know or understand things without any proof or evidence"*

{% embed url="<https://www.merriam-webster.com/dictionary/intuitive>" %}


# Intuitiveness: noun

### Cambridge Words

> ***"**&#x74;he* [*quality*](https://dictionary.cambridge.org/dictionary/english/quality) *of being* [*easy*](https://dictionary.cambridge.org/dictionary/english/easy) *and* [*natural*](https://dictionary.cambridge.org/dictionary/english/natural) *to* [*learn*](https://dictionary.cambridge.org/dictionary/english/learn)*, use, or* [*understand*](https://dictionary.cambridge.org/dictionary/english/understand)*"*
>
> ***"**&#x74;he* [*ability*](https://dictionary.cambridge.org/dictionary/english/ability) *to* [*know*](https://dictionary.cambridge.org/dictionary/english/know) *or* [*understand*](https://dictionary.cambridge.org/dictionary/english/understand) *something because of* [*feelings*](https://dictionary.cambridge.org/dictionary/english/feeling) [*rather*](https://dictionary.cambridge.org/dictionary/english/rather) *than* [*facts*](https://dictionary.cambridge.org/dictionary/english/fact) *or* [*proof*](https://dictionary.cambridge.org/dictionary/english/proof)*"*&#x20;

{% embed url="<https://dictionary.cambridge.org/dictionary/english/intuitiveness>" %}


# Is: verb

{% embed url="<https://writingexplained.org/is-is-a-verb>" %}


# Logic: noun

### Cambridge Words

> *"a* [*particular*](https://dictionary.cambridge.org/dictionary/english/particular) *way of* [*thinking*](https://dictionary.cambridge.org/dictionary/english/thinking)*,* [*especially*](https://dictionary.cambridge.org/dictionary/english/especially) *one that is* [*reasonable*](https://dictionary.cambridge.org/dictionary/english/reasonable) *and* [*based*](https://dictionary.cambridge.org/dictionary/english/based) *on good* [*judgment*](https://dictionary.cambridge.org/dictionary/english/judgment)*"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/logic>" %}

### Merriam-Webster

> *"* *a proper or reasonable way of thinking about or understanding something"*

{% embed url="<https://www.merriam-webster.com/dictionary/logic>" %}


# Minimalism: noun

### Cambridge Words

> *"a* [*style*](https://dictionary.cambridge.org/dictionary/english/style) *in* [*art*](https://dictionary.cambridge.org/dictionary/english/art)*,* [*design*](https://dictionary.cambridge.org/dictionary/english/design)*, and* [*theatre*](https://dictionary.cambridge.org/dictionary/english/theatre) *that uses the* [*smallest*](https://dictionary.cambridge.org/dictionary/english/small) [*range*](https://dictionary.cambridge.org/dictionary/english/range) *of* [*materials*](https://dictionary.cambridge.org/dictionary/english/material) *and* [*colours*](https://dictionary.cambridge.org/dictionary/english/colour) [*possible*](https://dictionary.cambridge.org/dictionary/english/possible)*, and only very* [*simple*](https://dictionary.cambridge.org/dictionary/english/simple) [*shapes*](https://dictionary.cambridge.org/dictionary/english/shape) *or* [*forms*](https://dictionary.cambridge.org/dictionary/english/form)*"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/minimalism>" %}

### Merriam-Webster

> *"a style or technique (as in music, literature, or design) that is characterized by extreme spareness and simplicity"*

{% embed url="<https://www.merriam-webster.com/dictionary/minimalism>" %}


# Mutable: adjective

### Cambridge Dictionary

> *"*[*able*](https://dictionary.cambridge.org/dictionary/english/able) *or* [*likely*](https://dictionary.cambridge.org/dictionary/english/likely) *to* [*change*](https://dictionary.cambridge.org/dictionary/english/change)*"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/mutable>" %}

### Merriam-Webster

> *"capable of change or of being changed"*

{% embed url="<https://www.merriam-webster.com/dictionary/mutable>" %}

### Mozilla

> *"Mutable is a type of variable that can be changed. In* [*JavaScript*](https://developer.mozilla.org/en-US/docs/Glossary/JavaScript)*, only* [*objects*](https://developer.mozilla.org/en-US/docs/Glossary/Object) *and* [*arrays*](https://developer.mozilla.org/en-US/docs/Glossary/array) *are mutable, not* [*primitive values*](https://developer.mozilla.org/en-US/docs/Glossary/Primitive)*."*

{% embed url="<https://developer.mozilla.org/en-US/docs/Glossary/Mutable>" %}

### Mutable vs Immutable

{% embed url="<https://wikidiff.com/mutable/immutable>" %}


# Noun: noun

### Cambridge Dictionary

> *"a word that refers to a* [*person*](https://dictionary.cambridge.org/dictionary/english/person)*,* [*place*](https://dictionary.cambridge.org/dictionary/english/place)*, thing,* [*event*](https://dictionary.cambridge.org/dictionary/english/event)*,* [*substance*](https://dictionary.cambridge.org/dictionary/english/substance)*, or* [*quality*](https://dictionary.cambridge.org/dictionary/english/quality)*"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/noun>" %}

### Merriam-Webster

> *"a word that is the name of something (such as a person, animal, place, thing, quality, idea, or action) and is typically used in a sentence as subject or object of a verb or as object of a preposition"*

{% embed url="<https://www.merriam-webster.com/dictionary/noun>" %}

{% embed url="<https://www.dictionary.com/browse/noun>" %}


# Phrase: noun, verb

### Cambridge Dictionary

> As **noun**
>
> *"a* [*group*](https://dictionary.cambridge.org/dictionary/english/group) *of words that is* [*part*](https://dictionary.cambridge.org/dictionary/english/part) *of,* [*rather*](https://dictionary.cambridge.org/dictionary/english/rather) *than the* [*whole*](https://dictionary.cambridge.org/dictionary/english/whole) *of, a* [*sentence*](https://dictionary.cambridge.org/dictionary/english/sentence)*"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/phrase>" %}

### Merriam-Webster

> As **verb**
>
> *"to express in words or in appropriate or telling terms"*
>
> *"to designate by a descriptive word or phrase"*

> As **noun**
>
> *"a characteristic manner or style of expression"*
>
> *"a word or group of words forming a syntactic constituent with a single grammatical function"*

{% embed url="<https://www.merriam-webster.com/dictionary/phrase>" %}


# Prefix: noun, verb

### Cambridge Dictionary

> As **noun**
>
> *"a* [*letter*](https://dictionary.cambridge.org/dictionary/english/letter) *or* [*group*](https://dictionary.cambridge.org/dictionary/english/group) *of* [*letters*](https://dictionary.cambridge.org/dictionary/english/capital) [*added*](https://dictionary.cambridge.org/dictionary/english/add) *to the* [*beginning*](https://dictionary.cambridge.org/dictionary/english/beginning) *of a word to make a new word"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/prefix>" %}

### Merriam-Webster

> As **verb**
>
> *"to add a letter, number, or symbol at the beginning of a word or number"*

> As **noun**
>
> *"an affix attached to the beginning of a word, base, or phrase and serving to produce a derivative word or an inflectional form"*

{% embed url="<https://www.merriam-webster.com/dictionary/prefix>" %}


# Preposition: noun

### Cambridge Dictionary

> *"in* [*grammar*](https://dictionary.cambridge.org/dictionary/english/grammar)*, a word that is used before a* [*noun*](https://dictionary.cambridge.org/dictionary/english/noun)*, a* [*noun*](https://dictionary.cambridge.org/dictionary/english/noun) *phrase, or a* [*pronoun*](https://dictionary.cambridge.org/dictionary/english/pronoun)*,* [*connecting*](https://dictionary.cambridge.org/dictionary/english/connecting) *it to another word"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/preposition>" %}

### Merriam-Webster

> *"a word or group of words that is used with a noun, pronoun, or noun phrase to show direction, location, or time, or to introduce an object"*

{% embed url="<https://www.merriam-webster.com/dictionary/preposition>" %}


# Purpose: noun

### Dictionary

> *"the reason for which something exists or is done, made, used, etc."*

{% embed url="<https://www.dictionary.com/browse/purpose>" %}

### Cambridge Words

> *"why you do something or why something* [*exists*](https://dictionary.cambridge.org/dictionary/english/exist)*"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/purpose>" %}

### Merriam-Webster

> *"the reason why something is done or used"*
>
> *"the aim or intention of something"*
>
> *"the aim or goal of a person"*
>
> *"the feeling of being determined to do or achieve something"*

{% embed url="<https://www.merriam-webster.com/dictionary/purpose>" %}


# Replace: verb

### Dictionary

> *"to assume the former role, position, or function of; substitute for (a person or thing)"*
>
> *"to provide a substitute or equivalent in the* [*place*](https://www.dictionary.com/browse/place) *of"*

{% embed url="<https://www.dictionary.com/browse/replace>" %}

### Cambridge Words

> *"to take the* [*place*](https://dictionary.cambridge.org/dictionary/english/place) *of something, or to put something or someone in the* [*place*](https://dictionary.cambridge.org/dictionary/english/place) *of something or someone* [*else*](https://dictionary.cambridge.org/dictionary/english/else)*"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/replace>" %}

### Merriam-Webster

> *"to put something new in the place of"*
>
> *"to take the place of especially as a substitute or successor"*

{% embed url="<https://www.merriam-webster.com/dictionary/replace>" %}


# Set: verb

### Dictonary

> *"to put (something or someone) in a particular place"*
>
> *"to put or apply"*

{% embed url="<https://www.dictionary.com/browse/set>" %}

### Cambridge Words

> *"to put something in a* [*particular*](https://dictionary.cambridge.org/dictionary/english/particular) [*place*](https://dictionary.cambridge.org/dictionary/english/place) *or* [*position*](https://dictionary.cambridge.org/dictionary/english/position)*"*
>
> *"to* [*cause*](https://dictionary.cambridge.org/dictionary/english/cause) *something or someone to be in the* [*stated*](https://dictionary.cambridge.org/dictionary/english/state) [*condition*](https://dictionary.cambridge.org/dictionary/english/condition) *or* [*situation*](https://dictionary.cambridge.org/dictionary/english/situation)*"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/set>" %}

### Merriam-Webster

{% embed url="<https://www.merriam-webster.com/dictionary/set>" %}


# Simplicity: noun

### Cambridge Dictionary

> *"the* [*fact*](https://dictionary.cambridge.org/dictionary/english/fact) *that something is* [*easy*](https://dictionary.cambridge.org/dictionary/english/easy) *to* [*understand*](https://dictionary.cambridge.org/dictionary/english/understand) *or do"*
>
> *"the* [*quality*](https://dictionary.cambridge.org/dictionary/english/quality) *of being* [*easy*](https://dictionary.cambridge.org/dictionary/english/easy) *to* [*understand*](https://dictionary.cambridge.org/dictionary/english/understand) *or do"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/simplicity>" %}

### Merriam-Webster

> *"the state of being* [*simple*](https://www.merriam-webster.com/dictionary/simple)*, uncomplicated, or uncompounded"*

{% embed url="<https://www.merriam-webster.com/dictionary/simplicity>" %}

### Simplicity vs Complexity

{% embed url="<https://wikidiff.com/simplicity/complexity>" %}


# Suffix: noun, verb

### Cambridge Dictionary

> As **noun**
>
> *"a* [*letter*](https://dictionary.cambridge.org/dictionary/english/letter) *or* [*group*](https://dictionary.cambridge.org/dictionary/english/group) *of* [*letters*](https://dictionary.cambridge.org/dictionary/english/capital) [*added*](https://dictionary.cambridge.org/dictionary/english/add) *at the end of a word to make a new word"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/suffix>" %}

### Merriam-Webster

> As **noun**
>
> *"a letter or a group of letters that is added to the end of a word to change its meaning or to form a different word"*
>
> *"an affix occurring at the end of a word, base, or phrase"*

> As **verb**
>
> ***"**&#x74;o attach as a suffi&#x78;**"***

{% embed url="<https://www.merriam-webster.com/dictionary/preposition>" %}


# Text: noun, verb

### Cambridge Dictionary

> As **noun**
>
> *"the written words in a* [*book*](https://dictionary.cambridge.org/dictionary/english/book)*,* [*magazine*](https://dictionary.cambridge.org/dictionary/english/magazine)*, etc., not the* [*pictures*](https://dictionary.cambridge.org/dictionary/english/picture)*"*

> As **verb**
>
> ***"**&#x74;o* [*send*](https://dictionary.cambridge.org/dictionary/english/send) *someone a text* [*message*](https://dictionary.cambridge.org/dictionary/english/message) *by* [*phone*](https://dictionary.cambridge.org/dictionary/english/phone)***"***
>
> ***"**&#x74;o* [*send*](https://dictionary.cambridge.org/dictionary/english/send) *a text* [*message*](https://dictionary.cambridge.org/dictionary/english/message)*"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/text>" %}

### Merriam-Webster

> As **verb**
>
> *"to send a text message from one cell phone to another"*
>
> *"to communicate by text messaging"*

> As **noun**
>
> *"the original words and form of a written or printed work"*
>
> *"a work containing such text"*
>
> *"something (such as a story or movie) considered as an object to be examined, explicated, or deconstructed"*

{% embed url="<https://www.merriam-webster.com/dictionary/text>" %}


# To: preposition

### Dictionary

{% embed url="<https://www.dictionary.com/browse/to>" %}

### Cambridge Dictionary

> *"used before a* [*verb*](https://dictionary.cambridge.org/dictionary/english/verb) *to show that it is in the* [*infinitive*](https://dictionary.cambridge.org/dictionary/english/infinitive)*"*
>
> *"used after some* [*verbs*](https://dictionary.cambridge.org/dictionary/english/verb)*,* [*especially*](https://dictionary.cambridge.org/dictionary/english/especially) *when the* [*action*](https://dictionary.cambridge.org/dictionary/english/action) [*described*](https://dictionary.cambridge.org/dictionary/english/describe) *in the* [*infinitive*](https://dictionary.cambridge.org/dictionary/english/infinitive) *will* [*happen*](https://dictionary.cambridge.org/dictionary/english/happen) [*later*](https://dictionary.cambridge.org/dictionary/english/later)*"*
>
> *"used after many* [*verbs*](https://dictionary.cambridge.org/dictionary/english/verb) *of* [*agreeing*](https://dictionary.cambridge.org/dictionary/english/agree)*,* [*needing*](https://dictionary.cambridge.org/dictionary/english/need)*, and* [*wanting*](https://dictionary.cambridge.org/dictionary/english/wanting)*"*
>
> *"used* [*instead*](https://dictionary.cambridge.org/dictionary/english/instead) *of* [*repeating*](https://dictionary.cambridge.org/dictionary/english/repeat) *a* [*verb*](https://dictionary.cambridge.org/dictionary/english/verb) [*clause*](https://dictionary.cambridge.org/dictionary/english/clause)*"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/to>" %}

### Merriam-Webster

> *"used to indicate that the following verb is in the infinitive form"*
>
> *"often used by itself in place of an infinitive verb when the verb is understood"*
>
> *"used to indicate the place, person, or thing that someone or something moves toward"*
>
> *"used to indicate the place where someone participates in a particular activity"*

{% embed url="<https://www.merriam-webster.com/dictionary/to>" %}


# Verb: noun

### Cambridge Dictionary

> *"a word or phrase that* [*describes*](https://dictionary.cambridge.org/dictionary/english/describe) *an* [*action*](https://dictionary.cambridge.org/dictionary/english/action)*,* [*condition*](https://dictionary.cambridge.org/dictionary/english/condition)*, or* [*experience*](https://dictionary.cambridge.org/dictionary/english/experience)*"*

{% embed url="<https://dictionary.cambridge.org/dictionary/english/verb>" %}

### Merriam-Webster

> *"a word (such as jump, think, happen, or exist) that is usually one of the main parts of a sentence and that expresses an action, an occurrence, or a state of being"*

{% embed url="<https://www.merriam-webster.com/dictionary/verb>" %}


# String Wrapper Objects

## The basics

1. The object name **must** be [**intuitive**](/designing/definitions/intuitive-adjective).
2. The object **functionalities** must be [**intuitive**](/designing/definitions/intuitive-adjective) and **reflect** its **name**.
3. The object **should** contain only **crucial** [**functionalities**](/designing/definitions/functionality-noun) to achieve **ease**-**extensibility**.
4. **Method names** **must** be [**consistent**](/designing/definitions/consistent-adjective) and [**intuitive**](/designing/definitions/intuitive-adjective).

## String Wrapper Object

### The primitive value

1. A **primitive** value is **divided** into private properties of **generic type variables,** which are **part** of it.&#x20;
2. Constructor **parameters** types are **generic type variables** to **preserve** the **exact** **type.**
3. A **primitive** value type is **built** of generic type variables on the template literal, which results in the **exact return type** rather than just a `string`.
4. The **part** of the **primitive value is accessible** by the use of **`get`** accessors.
5. The **parts** of the **primitive value** are:
   1. **stored** in the **private** **hashed** **properties,**
   2. **accessible** through the `get` accessors,
   3. **immutable**, cause the use of the `get` accessor.


# String Wrapper Objects

This section covers a small part of the designing process. Determines how to properly combine some definitions with the usage and naming the methods in objects.

### Purpose

The purpose is to achieve [**intuitiveness**](/designing/definitions/intuitiveness-noun), [**logic**](/designing/definitions/logic-noun), [**cohesiveness**](/designing/definitions/cohesiveness-noun), [**minimalism**](/designing/definitions/minimalism-noun), [**immutability**](/designing/definitions/immutable-adjective), and [**consistency**](/designing/definitions/consistency-noun) in the final form of the objects. So, the question is, what do these words mean in object design, how to apply them properly, and why exactly these words? The following pages bring some answers.

### Immutability

The first decision is to use [primitive wrapper objects](https://developer.mozilla.org/en-US/docs/Glossary/Primitive#primitive_wrapper_objects_in_javascript) because the [immutable](/designing/definitions/immutable-adjective) nature(out of the box) of their primitive value results in partial **immutability** achievement and use them as [functional](/designing/definitions/functional-adjective) types.

There is a need to understand how methods are **being used** and **may** be used, especially in [primitive wrapper objects](https://developer.mozilla.org/en-US/docs/Glossary/Primitive#primitive_wrapper_objects_in_javascript).&#x20;


# Methods usage analysis

The [`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/String) primitive wrapper object is selected to research how some of its methods perform on the instance to understand [**intuitiveness**](/designing/definitions/intuitiveness-noun) and [**consistency**](/designing/definitions/consistency-noun) in native objects. Below are possible ways methods work on an instance broken down into nine approaches, and each contains a list of words picked from examples for a better understanding of the naming methodology and further analysis.

### Primitive value part

The text contains the keyword '***part of the primitive value***', and the following example clarifies its meaning.&#x20;

```typescript
// Define a new `Text` class.
class Text extends string {
  constructor(
    public prefix: string, // Part of the primitive value.
    public text: string,  // Part of the primitive value.
    public suffix: string // Part of the primitive value.
  ) {
    super(`${prefix}${text}${suffix}`); // The primitive value.
  }
}

// Returns <span>
new Text('<', 'span', '>').valueOf();
```

The primitive value consists of `prefix`, `text`, and `suffix` properties, and each of them is a **part** of the **primitive value**.

## Approaches

### One

{% hint style="info" %}
The method **without** **parameters** gets the **primitive value** and returns a **primitive value**.
{% endhint %}

There are two [`valueOf()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/valueOf) and [`toString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toString) methods that match the description.

```typescript
// Define a new `String` object.
const text = new String('text');

// Returns 'text';
text.valueOf();

// Returns 'text';
text.toString();
```

#### Words

* `value` ([noun](/designing/definitions/noun-noun))
* `to` ([preposition](/designing/definitions/preposition-noun))
* `Of` ([preposition](/designing/definitions/preposition-noun))
* `String` ([noun](/designing/definitions/noun-noun))

### Two

{% hint style="info" %}
The method **without** **parameters** gets the **primitive value** and performs an action on it based on the **intuitive** method name, and **returns** the **changed primitive value**.
{% endhint %}

There are among others [`big()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/big), [`blink()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/blink), [`bold()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/bold), [`fixed()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fixed), [`italics()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/italics), [`small()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/small), [`strike()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/strike), `sub()`, `sup()`, [`toLocaleLowerCase()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase), [`toLocaleUpperCase()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase), [`toUpperCase()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase), [`trimEnd()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd), `trimLeft()`, `trimRight()`, [`trimStart()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart) methods.

For example, the deprecated [`bold()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/bold) method gets the primitive value of a `text` string object and returns a modified `string` tagged by the Html `<b>` tag.

```typescript
// Define a new `String` object.
const text = new String('text');

// Returns <b>text</b> of `string`.
text.bold();
```

#### Words

* `to` ([noun](/designing/definitions/noun-noun))
* `Upper` ([adjective](/designing/definitions/adjective-noun))
* `Case` ([noun](/designing/definitions/noun-noun))
* `trim` ([noun](/designing/definitions/noun-noun))
* `Left` ([noun](/designing/definitions/noun-noun))
* `Right` ([noun](/designing/definitions/noun-noun))

### Three

{% hint style="info" %}
The method **with** **parameters** gets the **primitive value** and performs an action on it based on the **intuitive** method name with the **use** of its **parameters** and **returns** the **changed primitive value**.
{% endhint %}

For example, the [`replace()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) method gets the primitive value of the `text` string object and returns a modified `string` according to the given parameters.

```typescript
// Define a new `String` object.
const text = new String('text');

// Returns 'tExt' of `string`.
text.replace('e', 'E');

// Returns 'ex' of `string`.
text.substr(1, 2);

// Returns 'texttext'
text.repeat(2);
```

#### Words

* `repeat` ([verb](/designing/definitions/verb-noun))
* `replace` ([verb](https://app.gitbook.com/s/egwDY3Lznv3ifnxKVeRI/c/QmdAEHTvODKntFFpwMqq/definitions/verb))
* `substr` ([noun](/designing/definitions/noun-noun)?)

### Four

{% hint style="info" %}
The method **without** **parameters** gets **part** of the **primitive value** and **returns it**.
{% endhint %}

Let's define the `Text` object and extend it with the `String` to achieve this approach. The method `getPrefix()` returns part of the primitive value `prefix`, and the `getText()` method returns part of the primitive value `text`.

```typescript
// Create a new `Text` object.
class Text extends String {
  constructor(public text: string, public prefix?: string) {
    super(`${prefix}${text}`);
  }
  public getPrefix(): string {
    return this.prefix;
  }
  public getText(): string {
    return this.text;
  }
}

// Define a text with prefix.
const text = new Text('my text', '<<');

// Returns Text {'<<my text', text: 'my text', prefix: '<<'}.
text;

// Returns <<.
text.getPrefix();

// Returns my text.
text.getText();
```

#### Words

* `get` ([verb](/designing/definitions/verb-noun))
* `Prefix` ([noun](/designing/definitions/noun-noun))
* `Text` ([noun](/designing/definitions/noun-noun))

### Five

{% hint style="info" %}
The method **without parameters** checks the **existence** of the **part** of the **primitive value** in the object and **returns** the **result**.
{% endhint %}

Let's define the `Text` object and extend it with the `String` to achieve this approach. The `hasPrefix()` method checks whether the `Text` object has an optional prefix, and the method `hasText()` seems useless because the `text` it's required, but not really.

```typescript
// Create a new `Text` object.
class Text extends String {
  constructor(public text: string, public prefix?: string) {
    super(`${prefix ? prefix : ''}${text}`);
  }
  public hasPrefix(): boolean {
    return this.prefix !== undefined ;
  }
  public hasText(): boolean {
    return this.text !== undefined;
  }
}

// Define a text with prefix.
const text = new Text('my text', '<<');

// Returns Text {'<<my text', text: 'my text', prefix: '<<'}.
text;

// Returns true.
text.hasPrefix();

// Returns true. (noun) (noun)
text.hasText();
```

#### Words

* `has` ([verb](/designing/definitions/verb-noun))
* `Text` ([noun](/designing/definitions/noun-noun))
* `Prefix` ([noun](/designing/definitions/noun-noun))

### Six

{% hint style="info" %}
The method **with parameters** checks the **existence** of the **part** of the **primitive value** in the object and **returns** the **result**.
{% endhint %}

```typescript
// Create a new `Text` object.
class Text extends String {
  constructor(public text: string, public prefix?: string) {
    super(`${prefix ? prefix : ''}${text}`);
  }
  public hasPrefix(prefix: string): boolean {
    return this.prefix !== undefined && this.prefix === prefix;
  }
  public hasText(text: string): boolean {
    return this.text !== undefined && this.text === text;
  }
}

// Define a text with prefix.
const text = new Text('my text', '<<');

// Returns Text {'<<my text', text: 'my text', prefix: '<<'}.
text;

// Returns true.
text.hasPrefix('<<');

// Returns true.
text.hasText('my text');
```

#### Words

* `has` ([verb](/designing/definitions/verb-noun))
* `Prefix` ([noun](/designing/definitions/noun-noun))
* `Text` ([noun](/designing/definitions/noun-noun))

### Seven

{% hint style="info" %}
The method **without parameters** checks the **existence** of the **part** of the **primitive value** in the **part** of **the primitive** and **returns** the **result**.
{% endhint %}

Let's define the `Text` object and extend it with the `String` to achieve this approach. The `textHasPrefix()` method checks whether the `text` includes the `prefix` of the primitive value. The same does `hasTextPrefix()` method.

```typescript
// Create a new `Text` object.
class Text extends String {
  constructor(public text: string, public prefix?: string) {
    super(`${prefix}${text}`);
  }
  public textHasPrefix(): boolean {
    return typeof this.prefix === 'string' && this.text.includes(this.prefix);
  }
  public hasTextPrefix(): boolean {
    return typeof this.prefix === 'string' && this.text.includes(this.prefix);
  }
}

// Define a text with prefix.
const text = new Text('my text', '<<');

// Returns Text {'<<my text', text: 'my text', prefix: '<<'}.
text;

// Returns false.
text.textHasPrefix();

// Returns false. Method is not intuitive.
text.hasTextPrefix();
```

The example shows some possibilities of naming the methods and potential conflict with intuitiveness.

#### Words

* `text` ([noun](/designing/definitions/noun-noun))
* `Has` ([verb](/designing/definitions/verb-noun))
* `Prefix` ([noun](/designing/definitions/noun-noun))

### Eight

{% hint style="info" %}
The method **with** **parameters** gets the **parts** of the **primitive value** to perform action appropriate to the **intuitive** **method name** on **given** **method** **parameter(s)**.
{% endhint %}

Let's define the `Replacer` object to explain. The `replaceInText()` method gets the parts of the object to perform replacing on a given text. The example does not refer directly to the [`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/String) method, but a custom method showing a possibility of different usage of the `replace()` method.

```typescript
// Define a new `String` object.
const text = new String('text');

// Create a new `Replacer` object.
class Replacer extends String {
  constructor(public searchValue: string, public replaceValue: string) {
    super(`${searchValue}=${replaceValue}`);
  }
  public replaceInText(text: string | String): string {
    return text.replace(this.searchValue, this.replaceValue);
  }
  public replaceTextIn(text: string | String): string {
    return text.replace(this.searchValue, this.replaceValue);
  }
  public inText(text: string | String): string {
    return text.replace(this.searchValue, this.replaceValue);
  }
}

// Define a replacer.
const replacer = new Replacer('e', 'E');

// Returns tExt of `string`.
replacer.replaceInText(text);

// Returns tExt of `string`.
replacer.replaceTextIn(text);

// Returns tExt of `string`.
replacer.inText(text);
```

The last example of the `inText()` method indicates the relation between the object and method name because the object's name suggests action. The same we can do with the [first](#approach-1) approach above.

```typescript
// Imagine the class bold contains <b></b> and uses it to bold any text.
const bold = new bold();

// Returns <b>bolded</b> of `string`.
bold.text('bolded');

// Or to bold multiple texts.
// Returns ['<b>bolded</b>', '<b>also bolded</b>']
bold.text(['bolded', 'also bolded']);
```

#### Words

* `replace` ([verb](/designing/definitions/verb-noun))
* `In` ([preposition](/designing/definitions/preposition-noun))
* `Text` ([noun](/designing/definitions/noun-noun))

### Nine

{% hint style="info" %}
The method **without parameters** converts the **part** of the **primitive value** into another form, for example, object or array.
{% endhint %}

```typescript
// Create a new `Text` object.
class Text extends String {
  constructor(public text: string, public prefix?: string) {
    super(`${prefix ? prefix : ''}${text}`);
  }
  public toArray(): [ string | undefined, string ] {
    return [this.prefix, this.text ];
  }
  public toObject(): { [index: string]: string } {
    return {
      0: `${this.prefix}${this.text}`
    };
  }
}

// Define a text with prefix.
const text = new Text('my text', '<<');

// Returns Text {'<<my text', text: 'my text', prefix: '<<'}.
text;

// Returns ['<<', 'my text']
text.toArray();

// Returns {0: '<<my text'}.
text.toObject();
```

**Words**

* `to` ([verb](/designing/definitions/verb-noun))
* `Object` ([noun](/designing/definitions/noun-noun))
* `Array` ([noun](/designing/definitions/noun-noun))

## Conclusion

The **main goal** is to properly **differentiate** method names that work on the primitive value from those using the primitive value on the given method's parameters.

Misuse of words with improper order in the method name results in a different meaning and can lead to non-intuitiveness and inconsistency in the method usage and naming. To avoid such problems it is necessary to have a **deeper** understanding of the words **consistent** and **intuitive**.


# Relevant questions

The general definition of the words [**intuitive**](/designing/definitions/intuitive-adjective) and [**consistent**](/designing/definitions/consistent-adjective) is explained in the definition section, and it seems clear. There is a need to combine these two words with a method and answer relevant questions to understand the combination of the method's [intuitiveness](/designing/definitions/intuitiveness-noun) and [consistency](/designing/definitions/consistency-noun).

During reading the following questions, your mind should form new thoughts of different perspectives.

1. **What does it mean the method name is** [**intuitive**](/designing/definitions/intuitive-adjective)**?**\
   The method name is intuitive when its name is understandable at first sight and cohesive to functionality.<br>
2. **What does it mean the method name is** [**consistent**](/designing/definitions/consistent-adjective)**?**\
   The method name is consistent when coded in generally known naming conventions intuitively and cohesively to its functionality.<br>
3. **What does it mean the method is** [**intuitive**](/designing/definitions/intuitive-adjective)**?**\
   The method is intuitive when its functionality is consistent and cohesive to its name.<br>
4. **What does it mean the method is** [**consistent**](/designing/definitions/consistent-adjective)**?**\
   The method is consistent when it behaves in the same intuitive-functional way cohesive to its name. It means always performing the same action like it sets or gets something in different objects despite some differences.

These are simple explanations because intuitive and consistent words are interdependent, giving different results from different perspectives of the insight.

Let's do some **investigation** having in a mind explanation above.


# Investigation

The investigation concerns method naming and involves the names 'wrap' and 'wrapper' and already existing objects of the same name. Before starting an investigation, the [`Wrap`](https://text.angular-package.dev/wrapper/wrap) and [`Wrapper`](https://docs.angular-package.dev/v/text-v1.x/wrapper/wrapper) objects need to be brought closer for their minimal understanding.

## Wrap

The [`Wrap`](https://text.angular-package.dev/wrapper/wrap) object represents the immutable text wrapped by the opening and closing chars, and it is designed to preserve the names of the opening, text, and closing.

### **Definition**

> As a **noun** - ***"**&#x6D;aterial used for* [*wrapping*](https://www.merriam-webster.com/dictionary/wrapping)*"* - Merriam-Webster
>
> As a **noun** - *"*[*paper*](https://dictionary.cambridge.org/dictionary/english/paper)*,* [*cloth*](https://dictionary.cambridge.org/dictionary/english/cloth)*, or other* [*material*](https://dictionary.cambridge.org/dictionary/english/material) *that is used to* [*cover*](https://dictionary.cambridge.org/dictionary/english/cover) *something"* - Cambridge Dictionary

The wrap is the **thing** that **something** is wrapped in. **Something**, in this case, is the **text**, and the **thing** is the opening and closing characters.

> As a **verb** - *"to put* [*paper*](https://dictionary.cambridge.org/dictionary/english/paper)*,* [*cloth*](https://dictionary.cambridge.org/dictionary/english/cloth)*, or other* [*material*](https://dictionary.cambridge.org/dictionary/english/material) *around something"* - Cambridge Dictionary

Wrap **something** around another **thing**. **Something**, in this case, is the opening and closing characters, and the **thing** is the **text**.

### Object

The constructor of the [`Wrap`](https://text.angular-package.dev/wrapper/wrap) object initializes by providing a required `opening`, `closing`, and optional `text` to wrap. All the values are a part of the primitive value of this object and are stored separately in private values `#opening`, `#closing`, and `#text`. Access to these properties is by `get` accessors `opening`, `closing` and `text`, so even the parts of the primitive value are immutable.

{% hint style="info" %}
The text is being wrapped only by initialization.
{% endhint %}

```typescript

export class Wrap<
  Opening extends string = string,
  Text extends string = ``,
  Closing extends string = string
> extends String {
  ...

  constructor(opening: Opening, closing: Closing, text: Text = '' as Text) {
    super(`${opening}${text}${closing}`);
    this.#closing = String(closing) as Closing;
    this.#text = String(text) as Text;
    this.#opening = String(opening) as Opening;
  }
    
  ...
}
```

## Wrapper

The [`Wrapper`](https://text.angular-package.dev/wrapper/wrapper) is an extension of the [`Wrap`](https://text.angular-package.dev/wrapper/wrap) object means it represents the immutable wrap of the opening and closing with the additional ability to use it to wrap text.

### Definition

> **noun** - *"a* [*piece*](https://dictionary.cambridge.org/dictionary/english/piece) *of* [*paper*](https://dictionary.cambridge.org/dictionary/english/paper)*,* [*plastic*](https://dictionary.cambridge.org/dictionary/english/plastic)*, or other* [*material*](https://dictionary.cambridge.org/dictionary/english/material) *used to* [*cover*](https://dictionary.cambridge.org/dictionary/english/cover) *a* [*product*](https://dictionary.cambridge.org/dictionary/english/product)*"* - Cambridge Dictionary
>
> **noun** - *"that in which something is* [*wrapped*](https://www.merriam-webster.com/dictionary/wrapped)*"* - Merriam-Webster
>
> **noun** - *"one that* [*wraps*](https://www.merriam-webster.com/dictionary/wraps)*"* - Merriam-Webster

It can be understood as **one** or a **machine** that holds the `wrap` to wrap any text by using it. One or a machine is just an object.

### Object

The constructor of the [`Wrapper`](https://docs.angular-package.dev/v/text-v1.x/wrapper/wrapper) object initializes by providing a required `opening`, `closing`, and optional `text` to wrap.

```typescript

export class Wrapper<
  Opening extends string = string,
  Text extends string = '',
  Closing extends string = string
> extends Wrap<Opening, Text, Closing> {
  ...

  // Wrapper constructor.
  constructor(opening: Opening, closing: Closing, text?: Text) {
    super(opening, closing, text);
  }

  ...
}
```

Wrapper's initialization.

```typescript
// Let's initialize the `Wrapper`.
const spanWrapper = new Wrapper('<', '>', 'span');

// Primitive value of the `Wrapper` is <span>.
spanWrapper.valueOf();
```

The examples from previous pages explain how the methods can work on the instance, but the catch is in the `wrap()` method used in two different objects. What does this method do?

### Wrap method in the `Wrapper` object

The `wrap(text: string)` method of the `Wrapper` object with the `text` parameter uses the `<` and `>` of the `Wrapper` instance to wrap the given `text`.

```typescript
// Returns <text> of type "<text>".
new Wrapper('<', '>').wrap('text'); 
```

### Wrap method in the `Text` object

The `Text` object is extended by the `String`, and its primitive value is given text. The `wrap(opening: string, closing: string)` method of `Text` with parameters `opening` and `closing` uses them to wrap the primitive value of the `Text` instance.

```typescript
// Returns <text>.
new Text('text').wrap('<', '>');
```

### **Method usage d**ifferences and similarit**i**es

* The **wrap** word **means the same** in both `Text` and `Wrapper` objects - it wraps something.
* The methods return **the same result.**
* The methods have **different parameters** depending on the object.
* The methods **perform the wrap differently** because they perform on different objects with different parameters, but it is still **the same action** of the 'wrap'.
  * The method `wrap()` of the `Text` instance wraps the text of a `Text` instance with given `opening` and `closing` characters in the method.
  * The method `wrap()` of the `Wrapper` instance wraps the given method's text with the opening and closing characters of the `Wrapper` instance.
* There are two functionalities in the same method name.

## Insight

There seems to be no sense to insight the method by a single attribute like consistent or intuitive because they are interdependent, and their meaning is different depending on perspectives. Let's do this because different perspectives should emerge during the read.

**Does the method name is** [**intuitive**](/designing/definitions/intuitive-adjective)**?**

The method means the same in both \`Text\` and \`Wrapper\` objects because they perform the same 'wrap' action. It should be enough to indicate 'wrap' as an **intuitive** method name regardless of the object.

**Does the method name is** [**consistent**](/designing/definitions/consistent-adjective)**?**

The method name is **consistent** because of encoded in generally known naming conventions.

**Does the method is** [**intuitive**](/designing/definitions/intuitive-adjective)**?**

The importance of interdependence forces to include at least [functionality](/designing/definitions/functionality-noun) and [consistency](/designing/definitions/consistency-noun) with [intuitiveness](/designing/definitions/intuitiveness-noun).

The method is intuitive because its [functionality](/designing/definitions/functionality-noun) behaves cohesively and [constantly](/designing/definitions/constantly-adverb) to the method name giving the same result, but can be accused as not intuitive because it's called with different parameters depending on the object, which means their functionalities are different despite the same result.

However, when we look at the method as part of a specific object, it seems **intuitive**. If a method is of the `Text` object, we **intuitively** know that we need to provide opening and closing parameters to the `wrap()` method, and if it's of `Wrapper` we know that we need to provide text.&#x20;

If the object name is **not ambiguous**, its functionality too, **intuitive** usage of the `wrap()` method is still possible because we can look at parameters to recognize what type of the wrap method it is.

**Does the method is** [**consistent**](/designing/definitions/consistent-adjective)**?**

The method is **consistent** because the result of its functionality of wrap does the same in both objects.

The method can be accused as **inconsistent** because it's called with different parameters depending on the object, which means their functionalities are **divergent** despite the same result.

However, when we look at the method as part of a specific object, it seems to be **consistent**. We **consistently** know that the method of the `Text` object always has the same parameters, which are different from the `Wrapper` object.

## Conclusion

It is worth checking only the method name, not including the object and its functionality, because then it's possible to achieve constant intuitive method names, at first sight, indicating its meaning. The need is also to have the same parameters. They act similar to a function. Similar because methods pick the data from an instance.

There are **two** **types** of methods, **first**, changes the primitive value of a specified object with or without parameters, and **second**, uses the primitive value to change a given method's parameter.

There are **two functionalities**, and the object should not have both functionalities in one method cause of parameters conflict or even with additional parameters because of losing its simplicity. To achieve consistency and intuitiveness, we need to separate both functionalities using different method names, which can be `wrap()` and `wrapText()` of the exact meaning. It should be noted that the additional method increases the object's complexity.

Crucial is to have an intuitive naming. The `wrap` refers that the text to be wrapped is in the instance. The `wrapText` indicates that the text to be wrapped needs to be provided in the method parameter.&#x20;

Let's analyze naming the methods to see it's not simple.


# Method names analysis

{% hint style="info" %}
It is worth checking only the method name, not including the object and its functionality, because then it's possible to achieve constant intuitive method names, at first sight, indicating its meaning. The need is also to have the same parameters.
{% endhint %}

This page covers building the method names using the approaches of the page '[methods usage analysis](/designing/design-processes/string-wrapper-objects/methods-usage-analysis)'. Method names consist of selected words, and among others, there are **verbs**, **prepositions**, and **nouns** in a specific **order**, where can be found [intuitiveness](/designing/definitions/intuitiveness-noun) and [functionality](/designing/definitions/functionality-noun). The methods perform actions, and the first step is to create a small list of them.

## Possible actions

There are possible actions that can be performed on an instance, and the following list contains a few general words that are used to build method name structures below.

* ~~exec~~ ([**noun**](/designing/definitions/noun-noun))
* get ([**verb**](/designing/definitions/verb-noun))\
  Indicates a direction **pick-out**.<br>
* has ([**verb**](/designing/definitions/verb-noun)) (Indicating possibility)\
  Indicates a direction **pick-check-out**.<br>
* is (a state of being [verb](/designing/definitions/verb-noun))\
  Indicates a direction **pick-check-out**.<br>
* replace ([**verb**](/designing/definitions/verb-noun))\
  Indicates a direction **pick-change-out**.<br>
* set ([**verb**](/designing/definitions/verb-noun))\
  Indicates a direction **pick-change-in**.<br>
* to ([**preposition**](/designing/definitions/preposition-noun))\
  Indicates a direction **pick-(change)-out**.<br>
* wrap ([**verb**](/designing/definitions/verb-noun) or [**noun**](/designing/definitions/noun-noun))\
  Indicates a direction **pick-change-out**.

## **Approaches**

The nine following approaches show possible name structures that clarify the method naming methodology. The method name structure is built from a few simple brackets, with the description and type, like in the following example.&#x20;

\[ action: **verb | noun** ]\[ what: **noun | verb** ]\(\[ parameter: **noun** ])

### **One**

{% hint style="info" %}
The method **without** **parameters** gets the **primitive value** and returns a **primitive value**.
{% endhint %}

#### **`get`**<mark style="color:orange;">`()`</mark>

\[ get: **verb** ]\()

```typescript
new Wrap('<', '>', 'span').get(); // Returns <span>
```

#### **`getPrimitive`**<mark style="color:orange;">`()`</mark>

\[ get: **verb** ]\[ Primitive: **noun** ]\()

```typescript
new Wrap('<', '>', 'span').getPrimitive(); // Returns <span>
```

#### `getWrap`<mark style="color:orange;">`()`</mark>

\[ get: **verb** ]\[ Wrap: **noun** ]\()

```typescript
new Wrap('<', '>', 'span').getWrap(); // Returns <span>
```

#### `toPrimitive`<mark style="color:orange;">`()`</mark>

\[ to: **preposition** ]\[ Primitive: **noun** ]\()

```typescript
new Wrap('<', '>', 'span').toPrimitive(); // Returns <span>
```

#### `toString`<mark style="color:orange;">`()`</mark>

\[ to: **preposition** ]\[ String: **noun** ]\()

```typescript
new Wrap('<', '>').toString(); // Returns <>
```

#### `valueOf`<mark style="color:orange;">`()`</mark>

\[ value: **noun** ]\[ Of: **preposition** ]\()

```typescript
new Wrap('<', '>').valueOf(); // Returns <>
```

#### Conclusion

The simple method names with prefixes like a **verb**, **preposition**, or even **noun** return the primitive value of a specified object.

Especially the [`valueOf()`](#valueof) method name indicates that the **noun** `value` is like a property picked with the following action performed on it. This way of thinking where the method name first word denotes getting the property is helpful in [approach eight](#eight) and [approach three](#three).

* The actions assigned to this approach are **`get`** and **`to`** indicate getting the primitive value.
* The action **`get`** without the following word indicates the return of the primitive value.

### **Two**

{% hint style="info" %}
The method **without** **parameters** gets the **primitive value** and performs an action on it based on the **intuitive** method name, and **returns** the **changed primitive value**.
{% endhint %}

#### **`big`**<mark style="color:orange;">`()`</mark>

\[ big: **verb** ]\()

```typescript
new String('text').big() // Returns <big>text</big>
new Wrap('<', '>').big(); // Returns <big><></big>
```

#### `bold`<mark style="color:orange;">`()`</mark>

\[ bold: **verb** ]\()

```typescript
new String('text').bold(); // Returns <b>text</b>
new Wrap('<', '>', 'span').bold(); // Returns <b><span></b>
```

#### **Conclusion**

These methods are native methods of the [`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/String) object, and their meaning is to transform the primitive value to the bold or big. No words in their names are informing about how they behave. They could have added prepositions, for example, '[**to**](/designing/definitions/to-preposition)' to get `toBig()` or `toBold()`, but are they necessary? However, these methods are denoted as deprecated.

It seems better to have a [**verb**](/designing/definitions/verb-noun) instead of a [**noun**](/designing/definitions/noun-noun) in the method name of one word because nouns are reserved names for properties or accessors.

* One of the exceptions is the '**wrap**' word cause it's a **verb** and **noun**.

### Three

{% hint style="info" %}
The method **with** **parameters** gets the **primitive value** and performs an action on it based on the **intuitive** method name with the **use** of its **parameters** and **returns** the **changed primitive value**.
{% endhint %}

#### **`replace`**<mark style="color:orange;">**`(`**</mark>**`searchValue: string, replaceValue: string`**<mark style="color:orange;">`)`</mark>

\[ replace: **verb** ]\(\[ searchValue: **noun** ], \[ replaceValue: **noun** ])

```typescript
new String('text').replace('e', 'E'); // Returns tExt
new Wrapper('<', '>', 'span').replace('a', 'A'); // Returns <spAn>
```

#### `wrap`<mark style="color:orange;">**`(`**</mark>`opening: string, closing: string`<mark style="color:orange;">`)`</mark>

\[ wrap: **verb** ]\(\[ opening: **noun** ], \[ closing: **noun** ])

```typescript
new Wrapper('<', '>', 'span').wrap('{', '}'); // Returns {<span>}
new Wrapper('', '', 'span').wrap('{', '}'); // Returns {span}
```

#### `wrapText`<mark style="color:orange;">`(`</mark>`opening: string, closing: string`<mark style="color:orange;">`)`</mark>

\[ wrap: **verb** ]\[ Text: **noun** ]\(\[ opening: **noun** ], \[ closing: **noun** ])

```typescript
new Wrapper('<', '>', 'span').wrapText('{', '}'); // Returns <{span}>
```

#### `wrapOpening`<mark style="color:orange;">`(`</mark>`opening: string, closing: string`<mark style="color:orange;">`)`</mark>

\[ wrap: **verb** ]\[ Opening: **noun** ]\(\[ opening: **noun** ], \[ closing: **noun** ])

```typescript
new Wrapper('<', '>', 'span').wrapOpening('{', '}'); // Returns {<}span>
new Wrapper('', '>', 'span').wrapOpening('{', '}'); // Returns {}span>
```

What should be returned in this method, the primitive value with changed opening or wrapped opening? The following method could be an answer.

#### `openingWrap`<mark style="color:orange;">`(`</mark>`opening: string, closing: string`<mark style="color:orange;">`)`</mark>

\[ opening: **noun** ]\[ Wrap: **verb** ]\(\[ opening: **noun** ], \[ closing: **noun** ])

```typescript
// Returns {<}span> or {<}
new Wrapper('<', '>', 'span').openingWrap('{', '}'); // Returns {<}
```

The action(**verb**, **preposition**) following the object indicates performing this action on the primitive value. The **noun** indicates getting the property to perform on it. The result of this method should be a wrapped opening `{>}`.

#### `replaceOpening`<mark style="color:orange;">`(`</mark>`opening: string`<mark style="color:orange;">`)`</mark>

\[ replace: **verb** ]\[ Opening: **noun** ]\(\[ opening: **noun** ])

```typescript
new Wrapper('<', '>', 'span').replaceOpening('{'); // Returns {span>
new Wrapper('<', '', 'span').replaceOpening('{'); // Returns {span>
new Wrapper('<', '>', 'span').replaceOpening('{{{'); // Returns {{{span>
```

#### `replaceClosing`<mark style="color:orange;">`(`</mark>`closing: string`<mark style="color:orange;">`)`</mark>

\[ replace: **verb** ]\[ Closing: **noun** ]\(\[ closing: **noun** ])

```typescript
new Wrapper('<', '>', 'span').replaceClosing('}'); // Returns <span}
new Wrapper('<', '', 'span').replaceClosing('}'); // Returns <span}
new Wrapper('<', '>', 'span').replaceClosing('}}}'); // Returns <span}}}
```

#### `replaceText`<mark style="color:orange;">`(`</mark>`text: string`<mark style="color:orange;">`)`</mark>

\[ replace: **verb** ]\[ Text: **noun** ]\(\[ text: **noun** ])

```typescript
new Wrapper('{', '}', 'span').replaceText('div'); // Returns {div}
```

**Conclusion**

* The actions assigned to this approach are **`replace`**, **`wrap`**.
* If the object is followed by a **verb** the method changes the primitive value or its parts and returns the changed primitive value.
* If the object is followed by a **noun** the method changes the primitive value part and returns it.
* Following **intuitiveness** of native method [`replace()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) the `wrap` method should return the primitive value of the `Wrapper` after replacing.

### Four

{% hint style="info" %}
The method **without** **parameters** gets **part** of the **primitive value** and **returns it**.
{% endhint %}

Previous [approach three](#three) teaches that a **noun** **after** the **verb**, for example, [`replaceText()`](#replacetext-text-string) returns the primitive value, not part of it. The following examples behave differently cause they return part of the primitive value, having the same method name structure.

#### `getOpening`<mark style="color:orange;">`()`</mark>

\[ get: **verb** ]\[ Opening: **noun** ]\()

```typescript
new Wrapper('<', '>', 'span').getOpening(); // Returns <
new Wrapper('', '>', 'span').getOpening(); // Returns empty string
```

#### `getClosing`<mark style="color:orange;">`()`</mark>

\[ get: **verb** ]\[ Closing: **noun** ]\()

```typescript
new Wrapper('<', '>', 'span').getClosing(); // Returns >
new Wrapper('<', '', 'span').getClosing(); // Returns empty string
```

#### `getText`<mark style="color:orange;">`()`</mark>

\[ get: **verb** ]\[ Text: **noun** ]\()

```typescript
new Wrapper('<', '>', 'span').getText(); // Returns span
new Wrapper('<', '>', '').getText(); // Returns empty string
new Wrapper('<', '>').getText(); // Returns empty string
```

#### Conclusion

These method names refer to **primitive value parts** and return them. We would say the action of **`get`** returns **part** of the primitive value, but the examples of [approach one](#one) make it ambiguous.&#x20;

* The action assigned to this approach is **`get`**.
* The action **`get`** following the object name with the following **noun** indicates return value is a part of the **primitive value**.
* Including the [approach one](#one) action **`get`** does not indicate the return value, but the following **noun** does. The action **`get`** without the following word indicates the return of the primitive value.

### Five

{% hint style="info" %}
The method **without parameters** checks the **existence** of the **part** of the **primitive value** in the object and **returns** the **result**.
{% endhint %}

#### `hasOpening`<mark style="color:orange;">`()`</mark>

\[ has: **verb** ]\[ Opening: **noun** ]\()

```typescript
new Wrap('<', '>', 'span').hasOpening(); // Returns true
new Wrap('', '>', 'span').hasOpening(); // Returns false
```

#### `hasClosing`<mark style="color:orange;">`()`</mark>

\[ has: **verb** ]\[ Closing: **noun** ]\()

```typescript
new Wrapper('<', '>', 'span').hasClosing(); // Returns true
new Wrapper('<', '', 'span').hasClosing(); // Returns false
```

#### `hasText`<mark style="color:orange;">`()`</mark>

\[ has: **verb** ]\[ Text: **noun** ]\()

```typescript
new Wrapper('<', '>', 'span').hasText(); // Returns true
new Wrapper('<', '>', '').hasText(); // Returns false
new Wrapper('<', '>').hasText(); // Returns false
```

#### `isWrapped`<mark style="color:orange;">`()`</mark>

\[ is: **verb** ]\[ Wrapped: **noun** ]\()

```typescript
new Wrapper('<', '>', 'span').isWrapped(); // Returns true
```

#### <mark style="color:red;">`openingHas()`</mark>

\[ opening: **noun** ]\[ Has: **verb** ]\()

```typescript
new Wrap('<', '>', 'span').openingHas();
```

The method name without a **noun** after the **verb** **`has`** seems useless.

#### Conclusion

The method names seem to be obvious, instead of the last one. If the words are swapped their meaning is changed. The [`openingHas()`](#openinghas) method indicates the opening has something, and that something should be provided as the method's parameter.

* The actions assigned to this approach are **`has`**, **`is`**.
* When a **verb** follows the object and a **noun** follows the **verb**, the method checks the **part** of the primitive value.
* When a **noun** following the object refers to the **primitive value part**, the following verb indicates perform on it.

### Six

{% hint style="info" %}
The method **with parameters** checks the **existence** of the **part** of the **primitive value** in the object and **returns** the **result**.
{% endhint %}

#### `hasOpening`<mark style="color:orange;">`(`</mark>`opening: string`<mark style="color:orange;">`)`</mark>

\[ has: **verb** ]\[ Opening: **noun** ]\(\[ opening: **noun** ])

```typescript
new Wrap('<', '>', 'span').hasOpening('<'); // Returns true
new Wrap('<', '>', 'span').hasOpening('{'); // Returns false
new Wrap('', '>', 'span').hasOpening('<'); // Returns false
```

#### `hasClosing`<mark style="color:orange;">`(`</mark>`closing: string`<mark style="color:orange;">`)`</mark>

\[ has: **verb** ]\[ Closing: **noun** ]\(\[ closing: **noun** ])

```typescript
new Wrapper('<', '>', 'span').hasClosing('>'); // Returns true
new Wrapper('<', '>', 'span').hasClosing('{'); // Returns false
new Wrapper('<', '', 'span').hasClosing('>'); // Returns false
```

#### `hasText`<mark style="color:orange;">`(`</mark>`text: string`<mark style="color:orange;">`)`</mark>

\[ has: **verb** ]\[ Text: **noun** ]\(\[ text: **noun** ])

```typescript
new Wrapper('<', '>', 'span').hasText('span'); // Returns true
new Wrapper('<', '>', 'span').hasText('div'); // Returns false
new Wrapper('<', '>', '').hasText(''); // Returns false
new Wrapper('<', '>').hasText(''); // Returns false
```

#### `isWrapped`<mark style="color:orange;">`(`</mark>`opening: string, closing: string`<mark style="color:orange;">`)`</mark>

\[ is: **verb** ]\[ Wrapped: **noun** ]\(\[ opening: **noun**, closing: **noun** ])

```typescript
new Wrapper('<', '>', 'span').isWrapped('<', '>'); // Returns true
new Wrapper('<', '>', 'span').isWrapped('{', '>'); // Returns false
new Wrapper('<', '>', 'span').isWrapped('<', '}'); // Returns false
new Wrapper('<', '>', '').isWrapped('<', '>'); // Returns true
```

#### Conclusion

* The actions assigned to this approach are **`has`**, **`is`**.

### Seven

{% hint style="info" %}
The method **without parameters** checks the **existence** of the **part** of the **primitive value** in the **part** of **the primitive** and **returns** the **result**.
{% endhint %}

#### `textHasOpening`<mark style="color:orange;">`()`</mark>

\[ text: **noun** ]\[ Has: **verb** ]\[ Opening: **noun** ]\()

```typescript
new Wrap('<', '>', 'span').textHasOpening(); // Returns false
new Wrap('<', '>', '<span').textHasOpening(); // Returns true
new Wrap('<', '>', '<span').textHasOpening(); // Returns true
```

The method checks whether the `span` text has the opening `<`.

#### `textHasClosing`<mark style="color:orange;">`()`</mark>

\[ text: **noun** ]\[ Has: **verb** ]\[ Closing: **noun** ]\()

```typescript
new Wrapper('<', '>', 'span').textHasClosing(); // Returns false
```

The method checks whether the `span` text has the closing `>`. Let's add a parameter to the method.

#### `textHasOpening(opening: string)`

\[ text: **noun** ]\[ Has: **verb** ]\[ Opening: **noun** ]\(\[ opening: **noun** ])

```typescript
new Wrap('<', '>', 'span').textHasOpening('<'); // Returns false
new Wrap('<', '>', '<span').textHasOpening('<'); // Returns true
```

The method gets the text and checks whether it contains the given opening chars.

#### `isTextWrapped`<mark style="color:orange;">`(`</mark>`opening: string, closing: string`<mark style="color:orange;">`)`</mark>

\[ is: **verb** ]\[ Text: **noun** ]\[ Wrapped: **noun** ]\(\[ opening: **noun**, closing: **noun** ])

```typescript
new Wrapper('<', '>', '<span>').isTextWrapped('<', '>'); // Returns true
new Wrapper('<', '>', '{span}').isTextWrapped('{', '}'); // Returns true
new Wrapper('<', '>', 'span').isTextWrapped('<', '>'); // Returns false
new Wrapper('<', '>', '').isTextWrapped('<', '>'); // Returns false
new Wrapper('<', '>').isTextWrapped('<', '>'); // Returns false
```

The method checks whether the `span` text has the opening `<` and closing `>`.

#### Conclusion

The use of such methods is questionable. A **noun** following the object indicates the obtaining action similar to the [`openingWrap()`](#openingwrap-opening-string-closing-string) method.

* The actions assigned to this approach are **`has`**, **`is`**.
* If the object is followed by a **noun** the method changes the primitive value **part** and returns it.

### Eight

{% hint style="info" %}
The method **with** **parameters** gets the **parts** of the **primitive value** to perform action appropriate to the **intuitive** **method name** on **given** **method** **parameter(s)**.
{% endhint %}

An interesting thing about this approach is, it seems the same as approach '[three](#three)' above. It also changes the primitive value, but not exactly, because its idea is to use part of the primitive value to change the given method's parameter.

For example, let's try to wrap the text given in the method's parameter with the opening and closing of the `Wrapper` object.

#### `wrapText`<mark style="color:orange;">`(`</mark>`text: string`<mark style="color:orange;">`)`</mark>

\[ wrap: **verb** ]\[ Text: **noun** ]<mark style="color:orange;">**(**</mark>\[ text: **noun** ]<mark style="color:orange;">**)**</mark>

```typescript
// The text is wrapped and returns wrapped text.
new Wrapper('{', '}', 'span').wrapText('div'); // Returns {div}
```

The [`wrap()`](#wrap-opening-string-closing-string) method from [approach three](#three) indicates that the object followed by action [intuitively](/designing/definitions/intuitive-adjective) means the use method's parameters to wrap the primitive value. Because this approach's way of thinking and conflicted parameters with the [`wrapText()`](#wraptext-opening-string-closing-string) method from approach [three](#three), the [`wrapText()`](#wraptext-text-string) method is not intuitive.

We could think the method wraps the text `span` with the provided opening `div`, as in approach '[three](#three)' example above. However, this forces to achieve that the `div` text is wrapped by the opening `{` and closing `}` resulting `{div}`. The method name should indicate its functionality.

The method works like a [`replace()`](#replace-searchvalue-string-replacevalue-string) with the exact meaning of a specific replace in name, and it should return a changed primitive value, like the [`replaceText()`](#replacetext-text-string) method.

Even by swapping the words, the method name is still not intuitive. Cause of thinking that the text `span` is picked from the object, and the action `Wrap` is performed on it.

#### `textWrap`<mark style="color:orange;">`(`</mark>`text: string`<mark style="color:orange;">`)`</mark>

\[ text: **noun** ]\[ Wrap: **verb** ]<mark style="color:orange;">**(**</mark>\[ text: **noun** ]<mark style="color:orange;">**)**</mark>

```typescript
// Returns divspan or {div}
new Wrapper('{', '}', 'span').textWrap('div'); // Returns {div}
```

The question is how to properly differentiate method names to achieve intuitiveness and consistency in method naming for both approaches. The method's name should indicate the use of opening and closing chars to wrap the text given in the method's parameter.

The meaningful solution is the use of **`in`** and **`on`** prepositions, then the methods meaning should indicate use of primitive value **parts**.&#x20;

For example, adding at the end of the `replaceOpening` name the `In` preposition results in the `replaceOpeningIn` method name. The name suggests replacing the opening in something, and the something is the given text.

#### `replaceOpeningIn`<mark style="color:orange;">`(`</mark>`text: string`<mark style="color:orange;">`)`</mark>

\[ replace: **verb** ]\[ Opening: **noun** ]\[ In: **preposition** ]\(\[ text: **noun** ])

```typescript
new Wrapper('{', '}', 'span').replaceOpeningIn('{div}', '<'); // Returns <div}
```

Use the **`On`** preposition after the verb **`Wrap`** should intuitively indicate wrap on something outside.&#x20;

#### `wrapOn(text: string)`

\[ wrap: **noun** ]\[ On: **preposition** ]\(\[ text: **noun** ])

```typescript
new Wrapper('<', '>', 'span').wrapOn('div'); // Returns
```

Crucial question is what the [`wrapOn()`](#wrapon-text-string) method should return, the `Wrap` instance or the primitive value. Because the `Wrapper` contains all the needed properties it seems no sense to return the `Wrap` instance and better to return the primitive value.

#### `isClosingIn`<mark style="color:orange;">`(`</mark>`text: string`<mark style="color:orange;">`)`</mark>

\[ is: **verb** ]\[ Closing: **noun** ]\[ In: **preposition** ]\(\[ text: **noun** ])

```typescript
new Wrapper('{', '}', 'span').isClosingIn('{div}'); // Returns true
new Wrapper('{', '>', 'span').isClosingIn('{div}'); // Returns false
new Wrapper('{', '', 'span').isClosingIn('{div'); // Returns false
```

The method checks whether the given text has the closing of the `Wrapper` instance. It's possible to get part of the primitive value first, and then perform an action on it in the direction specified by the `In` preposition with the name `closingIsIn`.

#### `closingIsIn`<mark style="color:orange;">`(`</mark>`text: string`<mark style="color:orange;">`)`</mark>

\[ closing: **noun** ]\[ Is: **verb** ]\[ In: **preposition** ]\(\[ text: **noun** ])

```typescript
new Wrapper('{', '}', 'span').closingIsIn('{div}'); // Returns true
new Wrapper('{', '>', 'span').closingIsIn('{div}'); // Returns false
new Wrapper('{', '', 'span').closingIsIn('{div'); // Returns false
```

The method checks whether the picked closing of the `Wrapper` instance is in the given text.

#### Conclusion

* Prepositions indicate directions.
* **Intuitively** an action without a noun following the object indicates the change on the primitive value, but the following noun indicates the pick of the primitive value part for possible perform change.
* There is a constant value in the `Wrapper` object, and the difference is in the method's parameters. The `Wrapper` can wrap multiple texts or wrap the part of the primitive value text with multiple opening and closing chars.

### Nine

{% hint style="info" %}
The method **without parameters** converts the **part** of the **primitive value** into another form, for example, object or array.
{% endhint %}

#### `toArray`<mark style="color:orange;">`()`</mark>

\[ to: **preposition** ]\[ Array: **noun** ]\()

```typescript
new Wrapper('<', '>', 'span').toArray(); // Returns ['<', 'span', '>']
```

#### `toWrap`<mark style="color:orange;">`()`</mark>

\[ to: **preposition** ]\[ Wrap: **noun** ]\()

```typescript
new Wrapper('<', '>', 'span').toArray(); // Returns Wrap {'<span>'}
```

## Conclusion

Analysis of possible structures above gives answers that can help prepare some method names useful in the `Wrap` and `Wrapper` objects.

I see it also as a material for creating general principles of designing primitive wrapper objects for angular-package.


# Wrap {}

The idea behind the `Wrap` is to have an object that creates a tag of string type, not a specific type like Html, or BBCode but any tag of a string with preserved exact type. Looking first at the Html tag we see that it consists of one character, a word, and one character. Based on the Html tag and by using the primitive wrapper objects, the `Wrap` object is going to be designed.

The `Wrap` string object constructor has two required parameters and one optional, resulting in three private(hashed) properties and [`get`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) accessors intuitively of the same names. The required parameters are required because they are a crucial part of the wrapping, and without them, there is no such thing as a wrap.

The constructor parameters names are the **opening** characters, **closing** characters, and optional **text** wrapped by them, which make up the primitive value of the `Wrap` object.&#x20;

#### Constructor's parameters

`opening:`<mark style="color:green;">`Opening`</mark>

`closing:`<mark style="color:green;">`Closing`</mark>

`text:`<mark style="color:green;">`Text`</mark>` ``= ''`

#### `Wrap` private properties

`#opening:`<mark style="color:green;">`Opening`</mark>

`#closing:`<mark style="color:green;">`Closing`</mark>

`#text?:`<mark style="color:green;">`Text`</mark>

#### Accessors

`get opening():`<mark style="color:green;">`Opening`</mark> refers to `#opening:`<mark style="color:green;">`Opening`</mark>

`get closing():`<mark style="color:green;">`Closing`</mark> refers to `#closing:`<mark style="color:green;">`Closing`</mark>

`get text():`<mark style="color:green;">`Text`</mark> refers to `#text:`<mark style="color:green;">`Text`</mark>

#### Primitive value

`${opening}${text}${closing}`

Getting the primitive value of the `Wrap` object is possible with native `valueOf()` and `toString()` methods. Because of their accessibility in any string, there is no need to add more.

Let's do some analysis to approve the chosen words of the constructor parameters.


# Analysis

Examine other naming possibilities

The selected names appear [**intuitive**](/designing/definitions/intuitive-adjective), simple, and understandable, but they have alternatives. The following analysis using the Html tag `<span>` as an example should clarify the choice.

## <<mark style="background-color:orange;">span</mark>>

### Alternatives

The possible words describe the **`span`**.

<mark style="color:red;">**✕**</mark> `body`

<mark style="color:red;">**✕**</mark> `content`

<mark style="color:red;">**✕**</mark> `name`

<mark style="color:red;">**✕**</mark> `phrase`

<mark style="color:red;">**✕**</mark> `sentence`

<mark style="color:green;">**✓**</mark> `text`

<mark style="color:red;">**✕**</mark> `word`

### Comparison of possibilities

<mark style="color:red;">**✕**</mark> Wrap **body**.

<mark style="color:red;">**✕**</mark> Wrap **content**.

<mark style="color:red;">**✕**</mark> Wrap **name**.

<mark style="color:red;">**✕**</mark> Wrap **phrase**.

<mark style="color:red;">**✕**</mark> Wrap **sentence**.

<mark style="color:green;">**✓**</mark> Wrap **text**.

<mark style="color:red;">**✕**</mark> Wrap **word**.

### Word

`text`

### Reasons

I selected to wrap the **text** because it's not only the word, [phrase](/designing/definitions/phrase-noun-verb), or sentence, but sentences and we can find a feature called 'word wrap'. On the other hand, wrap **text** may suggest wrapping words in the text. The text after the wrapping is also the content of the `Wrap`. There is a wrap that can be opened or closed.

> *"Phrases can consist of a single word or a complete sentence."* - Wikipedia

## <mark style="background-color:orange;"><</mark>span>

### Alternatives

The possible words describe the `<`.

<mark style="color:green;">**✓**</mark> `opening`

<mark style="color:red;">**✕**</mark> `openingChar`

<mark style="color:red;">**✕**</mark> `openingChars`

<mark style="color:red;">**✕**</mark> `openingCharacters`

<mark style="color:red;">**✕**</mark> `startingChars`

<mark style="color:red;">**✕**</mark> `prefix`

### Comparison of possibilities

<mark style="color:red;">**✕**</mark>**&#x20;beginning** of the Wrap.

<mark style="color:green;">**✓**</mark> **opening** of the Wrap.

<mark style="color:red;">**✕**</mark>**&#x20;starting** of the Wrap.

<mark style="color:red;">**✕**</mark>**&#x20;beginning** chars of the Wrap.

<mark style="color:green;">**✓**</mark> **opening** chars of the Wrap.

<mark style="color:red;">**✕**</mark>**&#x20;starting** chars of the Wrap.

<mark style="color:green;">**✓**</mark> Text **opening**<mark style="color:green;">.</mark>

<mark style="color:green;">**✓**</mark> Text **opening** chars.

<mark style="color:green;">**✓**</mark> Wrap **opening**.

<mark style="color:green;">**✓**</mark> Wrap **opening** char.

<mark style="color:green;">**✓**</mark> Wrap **opening** chars.

<mark style="color:green;">**✓**</mark> Wrap **opening** characters.

<mark style="color:red;">**✕**</mark> Wrap **prefix**.

<mark style="color:red;">**✕**</mark> Wrap **starting** characters.

### Word

`opening`

### Reasons

A decision is made, the word '**opening**' is selected to describe the char '`<`' before the '`span`' because it's a general word and seems more intuitive than the 'starting' or even 'prefix' word. For example, let's read more about the prefix.

#### Prefix definitions

> As **noun**
>
> *"a* [*letter*](https://dictionary.cambridge.org/dictionary/english/letter) *or* [*group*](https://dictionary.cambridge.org/dictionary/english/group) *of* [*letters*](https://dictionary.cambridge.org/dictionary/english/capital) [*added*](https://dictionary.cambridge.org/dictionary/english/add) *to the* [*beginning*](https://dictionary.cambridge.org/dictionary/english/beginning) *of a word to make a new word"*&#x20;
>
> Cambridge Dictionary

> As **noun**
>
> *"an affix attached to the beginning of a word, base, or phrase and serving to produce a derivative word or an inflectional form"*
>
> Merriam-Webster

Prefix **refers** more to the **word** than the **text** that's why the choice '**opening**' seems safe. Crucial is to have in mind, a different tag can consist of more than one char e.g. {{variable}}.

## \<span<mark style="background-color:orange;">></mark>

### Alternatives

The possible words describe the **`>`**.

<mark style="color:green;">**✓**</mark> `closing`

<mark style="color:green;">**✓**</mark> `closingChar`

<mark style="color:green;">**✓**</mark> `closingChars`

<mark style="color:green;">**✓**</mark> `closingCharacters`

<mark style="color:red;">**✕**</mark> `endingChar`

<mark style="color:red;">**✕**</mark> `endingChars`

<mark style="color:red;">**✕**</mark> `endingCharacters`

<mark style="color:red;">**✕**</mark> `suffix`

### Comparison of possibilities

<mark style="color:green;">**✓**</mark> Text **closing**<mark style="color:green;">.</mark>

<mark style="color:green;">**✓**</mark> Text **closing** chars.

<mark style="color:green;">**✓**</mark> Wrap **closing**.

<mark style="color:green;">**✓**</mark> Wrap **closing** char.

<mark style="color:green;">**✓**</mark> Wrap **closing** chars.

<mark style="color:green;">**✓**</mark> Wrap **closing** characters.

<mark style="color:red;">**✕**</mark> Wrap **ending** chars.

<mark style="color:red;">**✕**</mark> Wrap **ending** characters.

<mark style="color:red;">**✕**</mark> Wrap **suffix**.

### Word

`closing`

### Reasons

The choice is **straightforward** because the choice of the '**opening**' word forces us to use the '**closing**' word.

## Legend

<mark style="color:red;">**✕**</mark> - Rejected\ <mark style="color:green;">**✓**</mark> - Confirmed


# Accessors

The final names for the  'get' accessors of the Wrap object

## Public `get` accessors

### `get closing():`<mark style="color:green;">`Closing`</mark>

### `get opening():`<mark style="color:green;">`Opening`</mark>

### `get text():`<mark style="color:green;">`Text`</mark>


# Properties

The final names of Wrap object private properties

## Private

### `#closing:`<mark style="color:green;">`Closing`</mark>

### `#opening:`<mark style="color:green;">`Opening`</mark>

### `#text:`<mark style="color:green;">`Text`</mark>


# Methods

The final names for the methods of the 'Wrap' instance

The final proposal for method names of the `Wrap` instance. The methods having some explanation can be clicked.

## Instance method names

| Name                                                                | Description                                              |
| ------------------------------------------------------------------- | -------------------------------------------------------- |
| get()                                                               | Gets the primitive value.                                |
| getClosing()                                                        | Gets the closing chars.                                  |
| getOpening()                                                        | Gets the opening chars.                                  |
| getText()                                                           | Gets the text.                                           |
| hasClosing()                                                        | Checks whether the object has the closing.               |
| [hasOpening()](/designing/design-processes/wrap/methods/hasopening) | Checks whether the object has the opening.               |
| hasText()                                                           | Checks whether the object has the text.                  |
| [isWrapped()](/designing/design-processes/wrap/methods/iswrapped)   | Checks whether object has the opening and closing chars. |
| replaceClosing()                                                    | Returns the primitive value with replaced closing chars. |
| replaceOpening()                                                    | Returns the primitive value with replaced opening chars. |
| replaceText()                                                       | Returns the primitive value with replaced text.          |
| toString()                                                          | Returns the primitive value.                             |
| valueOf()                                                           | Returns the primitive value.                             |


# hasOpening()

### `hasOpening(opening?: string);`

The method checks whether the primitive value of the `Wrap` object has an `opening` or a given `opening`. The question is, what does it mean the `Wrap` object has an `opening`?

```typescript
public hasOpening(opening?: string): boolean {
  return isStringType(this.text)
    ? isStringType(opening)
      ? isStringLength(opening, { min: 1 }) &&
        this.toString().slice(0, opening.length) === opening
      : isStringLength(this.opening, { min: 1 }) &&
        this.toString().slice(0, this.opening.length) === this.opening
    : false;
}
```

### Meaning

**Intuitively**, it should mean, if the `opening` parameter was not defined in the constructor, it causes the `get` accessor `opening` to be `undefined`, but it's **not** working this way.

The **existence** of the `hasOpening()` method seems to make **no sense** because the `opening` and `closing` parameters are **required**. There is also **no sense** in setting the `opening` and `closing` parameters to **optional** because the `Wrap` object's functionality is to wrap the `text` with them on initialize or by a method. Even if they are not optional they can be set as an empty `string`, and what's more, the `String` object performs conversion to a [`primitive string`](https://developer.mozilla.org/en-US/docs/Glossary/String).

It seems a good solution is to treat an empty `string` as `undefined`. The object's functionality is extended with wrapping by the `opening`, `closing`, or neither. However, the main functionality to wrap the `text` is ambiguous because wrap consists of the opening and closing characters and intuitively can wrap the text only with both.&#x20;

If **both** the given `opening` and `closing` characters are **empty strings**, the text is **not wrapped**. In other words, it is **wrapped** using **empty strings**.

The **definition** of '**Wrapped**' should be: the `text` is wrapped when the `opening` and `closing` characters wrap around the given, not empty `text`.&#x20;

```typescript
// The method checks whether the wrapper has opening.
new Wrapper(
    '[', // Opening
    ']'  // Closing
).hasOpening(); // Returns true.

// Returns true unless an empty string is treated like false.
new Wrapper('', ']').hasOpening(); // Should be false.

```

What's left to be discussed is the method's `opening` **optional** parameter, and it's used only to compare with the opening given in the constructor. One thing is in mind that the generic type variable indicates the exact type of the provided `opening` parameter, causing the method's existence useless. Setting the variable as a `string` makes it meaningful.

### Intuitiveness and consistency

The method name indicates the object has an opening, so it's intuitive even with the provided parameter, and its functionality is cohesive to the method's name. The verb **`has`** is a prefix in the method name indicating what the primitive value contains.

### Conclusion

The empty `string` of the `opening` parameter in the constructor means the object has not the `opening`.

The method checks whether the `opening` of the `Wrap` instance has a **minimum length** of **1**. Returns `true` when equal or above **1**, and `false` when below **1**.

The same applies to the `hasClosing()` method, so it's useless to examine this case, and as the following method, I chose the `isWrapped()`, which uses `hasOpening()` and `hasClosing()`.


# isWrapped()

### `isWrapped(opening, closing)`

The method checks whether the primitive value of the `Wrap` object has an opening and closing chars or the given opening and closing chars. The method parameter's default values are those from constructor initialization and, they are used in performed [`hasOpening()`](/designing/design-processes/wrap/methods/hasopening) and `hasClosing()` methods, so It's obvious how it behaves.

If the `text` parameter is an empty `string` following the reasoning of the `hasOpening()` and `hasClosing()`, the method returns `false` in any case.

```typescript
// Examples without the text.
// Return `false` because there is no text to wrap.
new Wrapper('{{{', '}}}').isWrapped();

// Return `false` because there is no text to wrap.
new Wrapper('{{{', '}}}', '').isWrapped());

// Return `false` because there is no text to wrap.
new Wrapper('', '}}}').isWrapped();

// Return `false` because there is no text to wrap.
new Wrapper('{{{', '').isWrapped();

```

Examples with the provided `text`.

```typescript
// Examples with the text.
// Returns `true`.
new Wrapper('{{{', '}}}', 'wrap me').isWrapped();

// Returns `false` because the opening chars is an empty `string`.
new Wrapper('', '}}}', 'wrap me').isWrapped();

// Returns `false` because the closing chars is an empty `string`.
new Wrapper('{{{', '', 'wrap me').isWrapped();

```

Let's provide some parameters to the method. The default value of parameters is assigned from an instance.

```typescript

// Examples with the text.
// Returns `true`.
new Wrapper('{{{', '}}}', 'wrap me').isWrapped('{{{', '}}}');

// Returns `true` because even if the `opening` is undefined, the default
// value of an instance is used.
new Wrapper('{{{', '}}}', 'wrap me').isWrapped(undefined, '}}}');

// Returns `true` because even if the `closing` is undefined, the default
// value of an instance is used.
new Wrapper('{{{', '}}}', 'wrap me').isWrapped('{{{', undefined);

```

The method parameters are different from the `Wrap` instance.

```typescript

// Returns `false` because different wrap.
new Wrapper('{{{', '}}}', 'wrap me').isWrapped('<<<', '>>>');

// Returns `false` because different wrap.
new Wrapper('{{{', '}}}', 'wrap me').isWrapped(undefined, '>>>');

// Returns `false` because different wrap.
new Wrapper('{{{', '}}}', 'wrap me').isWrapped('<<<', undefined);

```

### Conclusion

The method checks whether the `opening`, `closing`, and the `text` of the `Wrap` instance have a **minimum length** of **1**. Returns `true` when equal or above **1**, and `false` when below **1**.


# Wrapper

The final proposal for method names of the `Wrap` instance. The methods having some explanation can be clicked.

## Instance method names

| Name               | Description                                                                                                           |
| ------------------ | --------------------------------------------------------------------------------------------------------------------- |
| isClosingIn()      | Checks if the provided `text` has the closing of specified `Wrapper` object at the end of the text.                   |
| isOpeningIn()      | Checks if the provided `text` has the opening of the specified `Wrapper` object at the beginning of the text.         |
| replaceClosingIn() | Replaces the closing chars of the `Wrapper` object in the text with a given replacement value.                        |
| replaceOpeningIn() | Replaces the opening chars of the `Wrapper` object in the text with a given replacement value.                        |
| removeWrapIn()     | Returns the text without the opening and closing of the wrapper.                                                      |
| textWrap()         | The method returns the `Wrap` consisting of the text of the `Wrapper` object and the given opening and closing chars. |
| textUnwrap()       | The method returns the text of the `Wrapper` object without the opening and closing chars.                            |
| toWrap()           | Returns the `Wrap` instance consists of the text, opening and closing chars of the `Wrapper` object.                  |
| unwrap()           | Returns the text without the opening and closing chars.                                                               |
| wrap()             | The method wraps the primitive value of a specified `Wrapper` object.                                                 |
| wrapOn()           | Wraps the specific text with the wrap, the opening, and closing of the `Wrapper` object.                              |


# String Wrapper Object

Under the hood of some packages are [primitive wrapper objects](https://developer.mozilla.org/en-US/docs/Glossary/Primitive#primitive_wrapper_objects_in_javascript), and below is a list containing some **pros** of using them and of important design benefits.

* [**Immutable**](https://developer.mozilla.org/en-US/docs/Glossary/Immutable) primitive value of [primitive wrapper objects](https://developer.mozilla.org/en-US/docs/Glossary/Primitive#primitive_wrapper_objects_in_javascript).
* A [**primitive**](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) value is divided into private properties of [generic type variables](https://www.typescriptlang.org/docs/handbook/2/generics.html).&#x20;
* A [**primitive**](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) value type is built of generic type variables on the [template literal](https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html), which results in the **exact return type** rather than just a `string`.
* The **ability** to get part of the primitive value of the exact return type.
* Specific functionality objects with generic type variables(which preserves exact type) act as **precise** types.
* The most **important** functionalities for a **specific** name.
* General and [**intuitive**](broken://pages/sAhGRGkmJuNAOeR8RQ1X#intuitive) object names.

All this above is in a **minimal**, **simple** to use, and **ease-extendable** form of objects.

<details>

<summary>Immutability</summary>

[**Immutable**](https://developer.mozilla.org/en-US/docs/Glossary/Immutable) primitive value of [primitive wrapper objects](https://developer.mozilla.org/en-US/docs/Glossary/Primitive#primitive_wrapper_objects_in_javascript).

Some methods return converted primitive value to a form of an [immutable](https://developer.mozilla.org/en-US/docs/Glossary/Immutable) object or array.

Use the [`get`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) accessors to return parts of the [primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) value of a specified object.

</details>

<details>

<summary>Partial primitive value with the exact return type</summary>

A [**primitive**](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) value is divided into private properties of [generic type variables](https://www.typescriptlang.org/docs/handbook/2/generics.html). &#x20;

A [**primitive**](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) value type is built of generic type variables on the [template literal](https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html), which results in the **exact return type** rather than just a `string`.

The **ability** to get part of the primitive value of the exact return type.

</details>

<details>

<summary>Object as types</summary>

Specific in functionality objects with generic type variables(which preserves type), act as **precise** types.

Objects have changed a [`Symbol.toStringTag`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) to **unique immutable** names.

Type of the objects can be detected by the [`Object.prototype.toString.call()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call). because of its **uniqueness** and **immutability**.&#x20;

There is `typeOf()` function of `angular-package/type` to detect these objects type.

</details>

<details>

<summary>Functionality <strong>follows</strong> the type</summary>

The most **important** functionalities, dedicated to a **specific** name.

Objects have functionalities that use their parts of [immutable](https://developer.mozilla.org/en-US/docs/Glossary/Immutable) primitive values.

</details>

<details>

<summary>Intuitiveness</summary>

General and [**intuitive**](broken://pages/sAhGRGkmJuNAOeR8RQ1X#intuitive) object names.

[Intuitive](broken://pages/sAhGRGkmJuNAOeR8RQ1X#intuitive) names of generic type variables.

[Intuitive](broken://pages/sAhGRGkmJuNAOeR8RQ1X#intuitive) accessor and property names.

[Intuitive](broken://pages/sAhGRGkmJuNAOeR8RQ1X#intuitive) method names.

</details>

<details>

<summary>Minimalism and simplicity</summary>

**Minimal**, **simple** to use and an **ease-extendable** objects.

</details>


# Explanation

### Partial primitive value with the exact return type

This example explains what **partial primitive value** and the **exact return type** means in the [`Wrap`](broken://pages/vlRmumtdkPHxEUrU51WO) `string` object.

```typescript
// Example usage.
import { Wrap } from '@angular-package/text';

// Define tag [quote].
const quoteTag = new Wrap(
  // quoteTag.opening;
  `[`,
  // quoteTag.closing;
  `]`,
  // quoteTag.content;
  'quote'
);

// The opening is of a generic type variable Opening in this case it's [.
quoteTag.opening;

// The closing is of a generic type variable Closing in this case it's ].
quoteTag.closing;

// The content is of a generic type variable Content in this case it's quote.
quoteTag.content;

```

To create primitive value of [`Wrap`](broken://pages/vlRmumtdkPHxEUrU51WO) object there is the need to provide three parameters in order `opening`, `closing`, and optional `content`. They are stored in separate private properties which are accessible with the help of accessors, and because of this, access to **parts of the primitive value** is achieved. More, each parameter is of a generic type variable that detects the type of given value, and because of this, the **exact return type** of **primitive value** and its **parts** is achieved.

#### Immutability

All the parts that make up the primitive value of the [`Wrap`](broken://pages/vlRmumtdkPHxEUrU51WO) object are **immutable** because they are accessible only by the `get` accessors. There is no possibility to change any part of the primitive value of the `quoteTag` object and any try to change e.g. `opening` results in the error message "*Cannot assign to 'opening' because it is a read-only property*".&#x20;

```typescript

// Cannot assign to 'opening' because it is a read-only property
// and the opening is of a generic type variable Opening in this case it's `[`.
quoteTag.opening = ; 

```

### Object as types

There is possibility to check whether the object is the `wrapper` with the help of `typeOf()` function. The name of `bbCodeWrapper` object cannot be changed in the example below.

```typescript
// Example usage.
import { Wrapper } from '@angular-package/text';
import { typeOf } from '@angular-package/type';

class CustomWrap {
  bbCode: Wrapper<`[`, `]`> = new Wrapper(`[`, `]`);
  html: Wrapper<'<', '>'> = new Wrapper(`<`, `>`);
}

// Returns [quote] of type "[quote]".
new CustomWrap().bbCode.wrap('quote');

// Returns <span> of type "<span>".
new CustomWrap().html.wrap('span');

// Checks the object type. Returns 'wrapper'.
const bbCodeWrapper = new Wrapper('[', ']');

// Returns 'wrapper'.
typeOf(bbCodeWrapper);

// Symbol.toStringTag is immutable. Can't be changed.
// Uncaught TypeError: Cannot set property Symbol(Symbol.toStringTag) of [object Object] which has only a getter
Object.assign(bbCodeWrapper, {
  [Symbol.toStringTag]: 'custom'
});

```


# @ Contact

A possible way to contact.

### Email

[contact@angular-package.dev](#email)

### Discord

Feel free to ask any questions about the **angular package** project in a general chat room on the discord.

{% embed url="<https://discord.com/channels/925168966098386944/925168966098386948>" %}
Discord general
{% endembed %}

### Gitter

Feel free to ask any questions about the **angular package** project in a dedicated chat room on the gitter [here](https://gitter.im/angularpackage/Lobby).

{% embed url="<https://gitter.im/angularpackage/Lobby>" %}
Gitter chat
{% endembed %}


# ฿ Donate

## Fiat

### DonorBox

Become a sponsor to the **angular package** by using DonorBox sponsor [page](https://donorbox.org/become-a-sponsor-to-the-angular-package?default_interval=o).

{% embed url="<https://donorbox.org/become-a-sponsor-to-the-angular-package?default_interval=o>" %}

### GitHub

Become a sponsor to the **angular package** by using the **GitHub** sponsor [page](https://github.com/sponsors/angular-package).

{% embed url="<https://github.com/sponsors/angular-package>" %}

### Patreon

Become a sponsor to the **angular package** through my private sciborrudnicki account on the Patreon [page](https://www.patreon.com/sciborrudnicki).

{% embed url="<https://www.patreon.com/sciborrudnicki>" %}

## Cryptocurrency

Become a sponsor to the **angular package** by sending the cryptocurrency:

### Bitcoin (BTC Native Segwit)

{% hint style="success" %}
My Public Address to Receive BTC

bc1qnf709336tfl57ta5mfkf4t9fndhx7agxvv9svn
{% endhint %}

Pay me via Trust Wallet: <https://link.trustwallet.com/send?coin=0&address=bc1qnf709336tfl57ta5mfkf4t9fndhx7agxvv9svn>

### Ethereum (ETH)&#x20;

{% hint style="success" %}
My Public Address to Receive ETH

0xA0c22A2bc7E37C1d5992dFDFFeD5E6f9298E1b94
{% endhint %}

Pay me via Trust Wallet: <https://link.trustwallet.com/send?coin=60&address=0xA0c22A2bc7E37C1d5992dFDFFeD5E6f9298E1b94>

### Smart Chain (BNB)

{% hint style="success" %}
My Public Address to Receive BNB

0xA0c22A2bc7E37C1d5992dFDFFeD5E6f9298E1b94
{% endhint %}

Pay me via Trust Wallet: <https://link.trustwallet.com/send?coin=20000714&address=0xA0c22A2bc7E37C1d5992dFDFFeD5E6f9298E1b94>

### Tether USDT (BEP20)

{% hint style="success" %}
My Public Address to Receive USDT

0xA0c22A2bc7E37C1d5992dFDFFeD5E6f9298E1b94
{% endhint %}

Pay me via Trust Wallet: <https://link.trustwallet.com/send?coin=20000714&address=0xA0c22A2bc7E37C1d5992dFDFFeD5E6f9298E1b94&token_id=0x55d398326f99059fF775485246999027B3197955>

### Stellar (XLM)

{% hint style="success" %}
My Public Address to Receive XLM

GAFFFB7H3LG42O6JA63FJDRK4PP4JCNEOPHLGLLFH625X2KFYQ4UYVM4
{% endhint %}

Pay me via Trust Wallet: <https://link.trustwallet.com/send?coin=148&address=GAFFFB7H3LG42O6JA63FJDRK4PP4JCNEOPHLGLLFH625X2KFYQ4UYVM4><br>


# Introduction

@angular-package/error

## angular-package/error

The error package contains a typical, range, type, and validation error object extended by the javascript error. Their message is built from the required problem, solution to a problem, and unique identification number on the error message template. Individual errors have additional message parameters corresponding to the functionality. Range error has an additional minimum and maximum range that causes an error to be thrown or not thrown, and type error the type.

The package contains prepared objects to manage the errors of the same type and multiple identification numbers, and their purpose is to set and throw errors under the given identification.

Let's see what are the benefits.


# ❤ Benefits

<details>

<summary>Problem and its solution</summary>

<mark style="color:green;">**✓**</mark> The error message is **divided** into the **problem** and its **solution**.

<mark style="color:green;">**✓**</mark> An error has the **problem**.

<mark style="color:green;">**✓**</mark> An error has a **solution** to the described problem.

<mark style="color:green;">**✓**</mark> There is no error without a **potential solution**.

</details>

<details>

<summary>Unique identification</summary>

<mark style="color:green;">**✓**</mark> An error can have **unique identification** of generic type variable.

<mark style="color:green;">**✓**</mark>**&#x20;Unique identification** numbers enforce the **systematization** of application errors.

<mark style="color:green;">**✓**</mark> Enforcement of systematization produces **thoughtful application**.

</details>

<details>

<summary>Template</summary>

<mark style="color:green;">**✓**</mark> Template with **replaceable variable** tags `{problem}` `{fix}` `{id}` `{min}` `{max}` `{type}` `{link}`.

<mark style="color:green;">**✓**</mark> Each error can be thrown with a **different** template.

</details>

<details>

<summary>Range error</summary>

<mark style="color:green;">**✓**</mark> An error contains additional parameters to indicate the minimum and maximum range that causes an error to be or not to be thrown.

</details>

<details>

<summary>Type error</summary>

<mark style="color:green;">**✓**</mark> An error contains an additional parameter to indicate the type that causes an error to be or not to be thrown.

</details>

<details>

<summary>Custom error</summary>

<mark style="color:green;">**✓**</mark> Create custom errors that feature: message divided into problem and fix, unique identification, and the template by extending the abstract object.

</details>

<details>

<summary>Storage to manage errors</summary>

<mark style="color:green;">**✓**</mark> The objects to **manage** errors of the same type of multiple unique identification numbers.

<mark style="color:green;">**✓**</mark>**&#x20;Set** the error at a selected number from the group of unique identification numbers.

<mark style="color:green;">**✓**</mark>**&#x20;Throw** an error with a selected number from the group of unique identification numbers.

<mark style="color:green;">**✓**</mark>**&#x20;Get** a single error of a selected number from the group of unique identification numbers.

<mark style="color:green;">**✓**</mark>**&#x20;Get** all set errors.

</details>


# General concepts

Explanation of common terms for all packages.

### ⚠

The warning sign indicates the element is **not** **available**.

### ★

The element starred as most **useful**.

### **Checks**

It's to **check** the provided value to be the same as **expected**.

### Type guard (constrain)

Constrains the parameter type to not let input unexpected value in the code editor.

### **Guard**

It's a **combination** of both above, **constrains** the type of the parameter in the **code editor**, and checks its provided argument.

### **Defines**

Returns defined value from a method of an object.

Defines new value in an object and returns a defined value.

### **Gets**

Returns a value from an object.

### **Sets**

Adds or updates an element with a specified key and a value to an object and returns an object.

### Intuitive

Having the ability to know or understand things without any proof or evidence. E.g. some of the accessor names indicate directly its role.

### General

Relating to the main or major parts of something rather than the details. E.g. some of the accessor names don't indicate the specific role in the object.

{% embed url="<https://docs.angular-package.dev/v/designing/definitions>" %}
More definitions
{% endembed %}


# Skeleton

The package was generated by the [library skeleton](https://github.com/angular-package/skeleton) which was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.0.0.&#x20;

Copy package to the `packages/error` folder of the [library skeleton](https://github.com/angular-package/skeleton) then run the commands below.

### Code scaffolding

Run `ng generate component component-name --project error` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project error`.

> Note: Don't forget to add `--project error` or else it will be added to the default project in your `angular.json` file.

### Build

Run `ng build error` to build the project. The build artifacts will be stored in the `dist/error` directory.

### **Publishing**

After building your library with `ng build error`, go to the dist folder `cd dist/error` and run `npm publish`.

### **Running unit tests**

Before the test can be performed install [`@angular-package/testing`](https://github.com/angular-package/testing) and [`@angular-package/type`](https://type.angular-package.dev/) with command:&#x20;

```bash
npm i @angular-package/testing @angular-package/type --no-save
```

Run `ng test error` to execute the unit tests via [Karma](https://karma-runner.github.io).

### Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.


# Installation

The package can be installed into your project via [NPM](https://www.npmjs.com/), or [yarn](https://yarnpkg.com/getting-started/install).

{% tabs %}
{% tab title="npm" %}

```bash
npm install @angular-package/error --save
```

{% endtab %}

{% tab title="yarn" %}

```
yarn add @angular-package/error
```

{% endtab %}
{% endtabs %}


# Public API

@angular-package/error

Public features that can be imported.

```typescript
import {
  // Class.
  CommonError,
  CommonErrors,
  Error,
  Errors,
  RangeError,
  RangeErrors,
  TypeError,
  TypeErrors,
  ValidationError,
  ValidationErrors
} from '@angular-package/error';
```

### `CommonError`

The [`CommonError`](/error/commonerror/overview) abstract object to throw an [identified](/error/getting-started/basic-concepts#identification) error with a [solution](/error/getting-started/basic-concepts#fix) to the described [problem](/error/getting-started/basic-concepts#problem), additional [type](/error/getting-started/basic-concepts#type), and [range](/error/getting-started/basic-concepts#range) built on the [template](/error/getting-started/basic-concepts#template).

### `CommonErrors`

The [`CommonErrors`](/error/commonerrors/overview) object represents the storage of errors with [unique identification](/error/getting-started/basic-concepts#unique-identification) numbers.

### `Error`

The [`Error`](/error/error/overview) object is an extension of the [`CommonError`](/error/commonerror/overview) class and is thrown when a runtime error occurs with a [message](https://app.gitbook.com/s/23iV8ygEQUrhqw7I3D8g/~/changes/lXvTfsmAkHoNRKsQjxlq/commonerror/accessors/get-message) built from a [solution](https://app.gitbook.com/s/23iV8ygEQUrhqw7I3D8g/~/changes/lXvTfsmAkHoNRKsQjxlq/commonerror/accessors/get-fix) to the described [problem](https://app.gitbook.com/s/23iV8ygEQUrhqw7I3D8g/~/changes/lXvTfsmAkHoNRKsQjxlq/commonerror/accessors/get-problem) but with additional identification, on the [template](https://app.gitbook.com/s/23iV8ygEQUrhqw7I3D8g/~/changes/lXvTfsmAkHoNRKsQjxlq/commonerror/accessors/get-template).

### `Errors`

The [`Errors`](/error/errors/overview) is an extension of the [`CommonErrors`](/error/commonerrors/overview) object that represents multiple identification numbers under which the errors of the [`Error`](/error/error/overview) type are prepared to throw.

### `RangeError`

The [`RangeError`](/error/rangeerror/overview) object is an extension of the [`CommonError`](/error/commonerror/overview) class and is thrown when a value is not in the set or range of allowed values with the message built from the described problem and its solution, optional explicit identification and minimum/maximum range on the given or stored template.

### `RangeErrors`

The [`RangeErrors`](/error/rangeerrors/overview) is an extension of the [`CommonErrors`](/error/commonerrors/overview) object that represents multiple identification numbers under which the errors of the [`RangeError`](/error/rangeerror/overview) type are prepared to throw.

### `TypeError`

The [`TypeError`](/error/typeerror/overview) object is an extension of the [`CommonError`](/error/commonerror/overview) class and is thrown when an operation could not be performed, typically(but not exclusively) when a value is not of the expected type, with the [message](/error/commonerror/accessors/get-message) built from the described problem and its solution, optional an explicit identification and type, on the given or stored template.

### `TypeErrors`

The [`TypeErrors`](/error/typeerrors/overview) is an extension of the [`CommonErrors`](/error/commonerrors/overview) object that represents multiple identification numbers under which the errors of the [`TypeError`](/error/typeerror/overview) type are prepared to throw.

### `ValidationError`

The [`ValidationError`](/error/validationerror/overview) object is an extension of the [`CommonError`](/error/commonerror/overview) class and is thrown when an operation could not be performed despite proper type(but not exclusively) with the [message](/error/commonerror/accessors/get-message) built from the described problem and its solution, along with additional identification on the given or stored template.

### `ValidationErrors`

The [`ValidationErrors`](/error/validationerrors/overview) is an extension of the [`CommonErrors`](/error/commonerrors/overview) object that represents multiple identification numbers under which the errors of the [`ValidationError`](/error/validationerror/overview) type are prepared to throw.


# Basic concepts

The error package basic concepts

### Fix

A potential solution to the described [problem](#problem).

### Link

A link that refers to the potential solution of the problem.

### Message

The error message that is built from the required problem, fix and optional range, type on the template.

### Problem

The problem that causes an error to be thrown.

### Range

The minimum and maximum range that causes the [`RangeError`](/error/rangeerror/overview) to be or not to be thrown.

### Template

A template for the message error with replaceable variable tags.

### Type

The type that causes the [`TypeError`](/error/typeerror/overview) to be or not to be thrown.

### Unique identification

The unique identification of the error help finds a solution. It's based on a generic type variable to get the exact type.


# Overview

The \`CommonError\` abstract object to throw an identified error with a solution to the described problem

## `CommonError {}`

The `CommonError` abstract object to throw an [identified](/error/getting-started/basic-concepts#identification) error with a [solution](/error/getting-started/basic-concepts#fix) to the described [problem](/error/getting-started/basic-concepts#problem), additional [type](/error/getting-started/basic-concepts#type), and [range](/error/getting-started/basic-concepts#range) built on the [template](/error/getting-started/basic-concepts#template).

{% embed url="<https://github.com/angular-package/error/blob/main/src/lib/common-error.class.ts>" %}
`common-error.class.ts`
{% endembed %}

### Accessors

|                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                   |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>public get</strong> <a href="/pages/59loEPLx3eMsMq3XEWAP"><strong>fix()</strong></a><strong>:</strong> <mark style="color:green;">string</mark><br>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get"><code>get</code></a> accessor obtains a possible <a href="/pages/6Nle1uMltWSb2uh6hgTQ#fix">solution</a> to the described <a href="/pages/LxHtOb8sW6C9DrVZpyJ2">problem</a> by returning the <a href="/pages/bM02xNqvdJvIfZJuzFc6"><code>#fix</code></a> property of a specified object</p>                                                                                                                               |                                                                                                                                                                                                                                                                                                                                                                                   |
| <p><strong>public get</strong> <a href="/pages/vXJtO6FJrof8aEObMAcU"><strong>id()</strong></a><strong>:</strong> <mark style="color:green;">Id</mark>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | <mark style="color:green;">undefined</mark><br>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get"><code>get</code></a> accessor gets the error <a href="/pages/6Nle1uMltWSb2uh6hgTQ#identification">identification</a> by returning the <a href="/pages/sM1pw7PS84C8cmqys4wZ"><code>#id</code></a> property of a specified object.</p> |
| <p><strong>public get</strong> <a href="/pages/GQRdEFvOHDqfnGJ51NkB"><strong>link()</strong></a><strong>:</strong> <mark style="color:green;">string</mark>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | <mark style="color:green;">undefined</mark><br>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get"><code>get</code></a> accessor gets the link(to read more about the thrown error) by returning the <a href="/pages/T7CzWe5vgWUYvAmOLUPa"><code>#link</code></a> property of a specified object.</p>                                   |
| <p><strong>public get</strong> <a href="/pages/UAsNmVmOuYGxNypELFFh"><strong>message()</strong></a><strong>:</strong> <mark style="color:green;">string</mark><br>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get"><code>get</code></a> accessor gets the error <a href="/pages/6Nle1uMltWSb2uh6hgTQ#message">message</a> by returning the parent <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/message"><code>message</code></a> property of the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error"><code>Error</code></a> object.</p> |                                                                                                                                                                                                                                                                                                                                                                                   |
| <p><strong>public get</strong> <a href="/pages/LxHtOb8sW6C9DrVZpyJ2"><strong>problem()</strong></a><strong>:</strong> <mark style="color:green;">string</mark><br>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get"><code>get</code></a> accessor gets the <a href="/pages/6Nle1uMltWSb2uh6hgTQ#problem">problem</a> by returning the <a href="/pages/ni1YTHvL07t1jeocuGux"><code>#problem</code></a> property of a specified object.</p>                                                                                                                                                                                                |                                                                                                                                                                                                                                                                                                                                                                                   |
| <p><strong>public get</strong> <a href="/pages/GF0yfhKsp9WzRTAHqFDt"><strong>template()</strong></a><strong>:</strong> <mark style="color:green;">string</mark><br>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get"><code>get</code></a> accessor gets the <a href="/pages/6Nle1uMltWSb2uh6hgTQ#template">template</a> of the error message by returning the <a href="/pages/VT4SwlV0NwAnpvm5q6hg"><code>#template</code></a> property of a specified object.</p>                                                                                                                                                                       |                                                                                                                                                                                                                                                                                                                                                                                   |

### Properties

|                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>public static</strong> <a href="/pages/akE6vknq8khSYhbok2vb"><strong>template</strong></a><strong>:</strong> <mark style="color:green;">string</mark><br>A template of the error message of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>string</code></a> type with the replaceable <a href="/pages/BbVb9Mj2Y9veAqrtKz61#problem"><code>{problem}</code></a>, <a href="/pages/BbVb9Mj2Y9veAqrtKz61#fix"><code>{fix}</code></a> and optional <a href="/pages/BbVb9Mj2Y9veAqrtKz61#id"><code>{id}</code></a>, <code>{link}</code>, <a href="/pages/BbVb9Mj2Y9veAqrtKz61#max"><code>{max}</code></a>, <a href="/pages/BbVb9Mj2Y9veAqrtKz61#min"><code>{min}</code></a>, <a href="/pages/BbVb9Mj2Y9veAqrtKz61#type"><code>{type}</code></a> tags.</p>                                                                  |
| <p><a href="/pages/bM02xNqvdJvIfZJuzFc6"><strong>#fix</strong></a><strong>:</strong> <mark style="color:green;">string</mark><br>A privately stored possible solution to the described <a href="/pages/6Nle1uMltWSb2uh6hgTQ#problem">problem</a> of a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>string</code></a> type.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| <p><a href="/pages/sM1pw7PS84C8cmqys4wZ"><strong>#id?</strong></a><strong>:</strong> <mark style="color:green;">Id</mark><br>A privately stored unique <a href="/pages/6Nle1uMltWSb2uh6hgTQ#identification">identification</a> of the described <a href="/pages/6Nle1uMltWSb2uh6hgTQ#problem">problem</a> of generic type variable <a href="/pages/PY4nixy9omXSectfeNl5#wrap-opening"><code>Id</code></a>.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| <p><a href="/pages/T7CzWe5vgWUYvAmOLUPa"><strong>#link?</strong></a><strong>:</strong> <mark style="color:green;">string</mark><br>The optional privately stored link of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>string</code></a> type redirects to read more about the thrown error.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| <p><a href="/pages/ni1YTHvL07t1jeocuGux"><strong>#problem</strong></a><strong>:</strong> <mark style="color:green;">string</mark><br>A privately stored <a href="/pages/6Nle1uMltWSb2uh6hgTQ#problem">problem</a> of a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>string</code></a> type.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| <p><a href="/pages/VT4SwlV0NwAnpvm5q6hg"><strong>#template</strong></a><strong>:</strong> <mark style="color:green;">string</mark><br>A <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string-type</a> privately stored <a href="/pages/6Nle1uMltWSb2uh6hgTQ#template">template</a> of the error <a href="/pages/6Nle1uMltWSb2uh6hgTQ#message">message</a> that contains replaceable required <a href="/pages/BbVb9Mj2Y9veAqrtKz61#fix"><code>{fix}</code></a>, <a href="/pages/BbVb9Mj2Y9veAqrtKz61#problem"><code>{problem}</code></a> and optional <a href="/pages/BbVb9Mj2Y9veAqrtKz61#id"><code>{id}</code></a>, <a href="/pages/BbVb9Mj2Y9veAqrtKz61#max"><code>{max}</code></a>, <a href="/pages/BbVb9Mj2Y9veAqrtKz61#min"><code>{min}</code></a>, <a href="/pages/BbVb9Mj2Y9veAqrtKz61#type"><code>{type}</code></a> tags.</p> |

### Methods

|                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p><strong>protected static</strong> <a href="/pages/KhI7uCqLCibWKkF1fp1b"><strong>defineMessage()</strong></a><strong>:</strong> <mark style="color:green;">string</mark><br>The static "<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals">tag</a>" method builds from the given <a href="/pages/KhI7uCqLCibWKkF1fp1b#...values-any"><code>values</code></a> the error message of a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>string</code></a> type on the template.</p> |
| <p><strong>protected static</strong> <a href="/pages/EVnsL3y0PxCd21o8K9N0"><strong>isError()</strong></a><strong>: value is</strong> <mark style="color:green;">CommonError</mark><<mark style="color:green;">Id</mark>><br>Checks whether the <a href="/pages/EVnsL3y0PxCd21o8K9N0#value-any"><code>value</code></a> of any type is a <code>this</code> instance of any or the given <a href="/pages/EVnsL3y0PxCd21o8K9N0#id-id">identification</a>.</p>                                                                                                                            |


# Generic type variables

The \`CommonError\` object generic type variables

## `CommonError<`<mark style="color:green;background-color:green;">`Id`</mark>`>`

#### <mark style="color:green;">`Id`</mark>`extends`[<mark style="color:green;">`string`</mark>](https://www.typescriptlang.org/docs/handbook/basic-types.html#string)

​A generic type variable constrained by the [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), by default of the value **captured** from the provided [`id`](/error/commonerror/constructor#id-id) indicates the identification type of a new [`CommonError`](/error/commonerror/overview) instance.

{% code title="common-error.class.ts" %}

```typescript
abstract class CommonError<
  Id extends string // <--- Declare generic type variable Id.
> extends Error {
  ...
  constructor(
    problem: string,
    fix: string,
    id?: Id, // <--- Capture generic type variable Id.
    template = CommonError.template,
    additional?: { link?: string; max?: number; min?: number; type?: string }
  ) { ... }
  ...
}
```

{% endcode %}


# Constructor

The \`CommonError\` object constructor

## `CommonError()`

Creates an error instance with the [message](/error/commonerror/accessors/get-message) built from the given [problem](#problem-string), its [solution](#fix-string), optional [type](#additional-link-string-min-number-max-number-type-string), [range](#additional-link-string-min-number-max-number-type-string), an explicit [identification](#id-id) on the supplied or stored [template](#template-string-commonerror.template).

{% code title="common-error.class.ts" %}

```typescript
constructor(
  problem: string,
  fix: string,
  id?: Id,
  template = CommonError.template,
  additional?: { link?: string; max?: number; min?: number; type?: string }
) {
  super(
    CommonError.defineMessage`${problem}${fix}${id}${template}${additional}`
  );
  this.#fix = fix;
  this.#id = id;
  this.#link = additional?.link;
  this.#problem = problem;
  this.#template = template;
}
```

{% endcode %}

### Parameters

#### `problem:`[<mark style="color:green;">`string`</mark>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)

Description of the problem of a [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) type.

#### `fix:`[<mark style="color:green;">`string`</mark>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)

A solution to the given [`problem`](#problem-string) of a [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) type.

#### `id?:`[<mark style="color:green;">`Id`</mark>](/error/commonerror/generic-type-variables#wrap-opening)

Optional unique [identification](/error/getting-started/basic-concepts#identification) to the given [`problem`](#problem-string) of generic type variable [`Id`](/error/commonerror/generic-type-variables#commonerror-less-than-id-greater-than).

#### `template:`[<mark style="color:green;">`string`</mark>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)`=`<mark style="color:green;">`CommonError`</mark>`.template`

A template of error message with the replaceable [`{problem}`](#problem), [`{fix}`](#fix) and optional [`{id}`](#id), `{link}`, [`{max}`](#max), [`{min}`](#min) and [`{type}`](#type) tags.

{% hint style="info" %}
By default, the value is equal to the static property [`template`](/error/commonerror/properties/static-template).
{% endhint %}

#### `additional: {link?:`[<mark style="color:green;">`string`</mark>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)`; min?:`[<mark style="color:green;">`number`</mark>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)`; max?:`[<mark style="color:green;">`number`</mark>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)`; type?:`[<mark style="color:green;">`string`</mark>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)`}`

An optional [`object`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) consists of optional `link`, `min`, `max`, and `type` properties to define the error [`message`](/error/commonerror/accessors/get-message).&#x20;

`link` - The link to read more about the thrown error replaceable on the given [`template`](#template-string-commonerror.template) as [`{link}`](/error/commonerror/properties/static-template#link) tag.\
`max`   - The maximum number replaceable on the given [`template`](#template-string-commonerror.template) as [`{max}`](/error/commonerror/properties/static-template#max) tag.\
`min`   - The minimum number is replaceable on the given [`template`](#template-string-commonerror.template) as [`{min}`](/error/commonerror/properties/static-template#min) tag.\
`type` - The type indicates the expected type that isn't throwing an error or the not expected type that is throwing an error replaceable on the given [`template`](#template-string-commonerror.template) as the [`{type}`](/error/commonerror/properties/static-template#type) tag.

## Example usage

### Basic usage

Example with the given required `problem` and `fix`.

```typescript
// Example usage.
import { CommonError } from '@angular-package/error';

// Create `TestError` to extend.
class TestError<Id extends string> extends CommonError<Id> {}

// Uncaught Error: Problem: problem => Fix: fix
throw new TestError(
  'problem',
  'fix'
);
```

### `id`

Example with the given `id`.

```typescript
// Example usage.
import { CommonError } from '@angular-package/error';

// Create `TestError` to extend.
class TestError<Id extends string> extends CommonError<Id> {}

// Uncaught Error: Problem(AE:427): problem => Fix: fix
throw new TestError(
  'problem',
  'fix',
  '(AE:427)' // <--- Parameter `id`.
);
```

### `id`, `template`

Example with the given `id` and `template`.

```typescript
// Example usage.
import { CommonError } from '@angular-package/error';

// Create `TestError` to extend.
class TestError<Id extends string> extends CommonError<Id> {}

// Uncaught Error: problem(AE:427). fix
throw new TestError(
  'problem',
  'fix',
  'AE:427', // <--- Parameter `id`
  '{problem}({id}). {fix}' // <--- Parameter `template`
);
```

### `id`, `template`, `additional{ min }`

Example with the given `id`, `template` and property `min` of `additional`.

```typescript
// Example usage.
import { CommonError } from '@angular-package/error';

// Create `TestError` to extend.
class TestError<Id extends string> extends CommonError<Id> {}

// Uncaught Error: (AE:427)Age must be above 9. Provide age more than 9
throw new TestError(
  'Age must be above ', // Problem
  'Provide age more than ', // Fix
  'AE:427', // Identification
  '({id}){problem}{min}. {fix}{min}', // Template
  { min: 9 } // Additional
);
```

### `id`, `template`, `additional{ min, max }`&#x20;

Example with the given `id`, `template` and property `min` and `max` of `additional`.

```typescript
// Example usage.
import { CommonError } from '@angular-package/error';

// Create `TestError` to extend.
class TestError<Id extends string> extends CommonError<Id> {}

// Uncaught Error: (AE:427)The `age` parameter is 45. Provided `age` must be between 9 and 12
throw new TestError(
  'The `age` parameter is 45.', // Problem
  'Provided `age` must be', // Fix
  'AE:427', // Identification
  '({id}){problem} {fix} between {min} and {max}', // Template
  { min: 9, max: 12 } // Additional
);
```

### `id`, `template`, `additional{ min, max, type }`&#x20;

Example with the given `id`, `template`, property `min`, `max` and `type` of `additional`.

```typescript
// Example usage.
import { CommonError } from '@angular-package/error';

// Create `TestError` to extend.
class TestError<Id extends string> extends CommonError<Id> {}

// Uncaught Error: (AE:427)The `age` parameter is not a number. Provided `age` must be a  number between 9 and 12.
throw new TestError(
  'The `age` parameter is not a', // Problem
  'Provided `age` must be a ', // Fix
  'AE:427', // Identification
  '({id}){problem} {type}. {fix} {type} between {min} and {max}.', // Template
  { min: 9, max: 12, type: 'number' } // Additional
);
```


# Accessors

The \`CommonError\` object accessors

|                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                   |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>public get</strong> <a href="/pages/59loEPLx3eMsMq3XEWAP"><strong>fix()</strong></a><strong>:</strong> <mark style="color:green;">string</mark><br>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get"><code>get</code></a> accessor obtains a possible <a href="/pages/6Nle1uMltWSb2uh6hgTQ#fix">solution</a> to the described <a href="/pages/LxHtOb8sW6C9DrVZpyJ2">problem</a> by returning the <a href="/pages/bM02xNqvdJvIfZJuzFc6"><code>#fix</code></a> property of a specified object</p>                                                                                                                               |                                                                                                                                                                                                                                                                                                                                                                                   |
| <p><strong>public get</strong> <a href="/pages/vXJtO6FJrof8aEObMAcU"><strong>id()</strong></a><strong>:</strong> <mark style="color:green;">Id</mark>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | <mark style="color:green;">undefined</mark><br>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get"><code>get</code></a> accessor gets the error <a href="/pages/6Nle1uMltWSb2uh6hgTQ#identification">identification</a> by returning the <a href="/pages/sM1pw7PS84C8cmqys4wZ"><code>#id</code></a> property of a specified object.</p> |
| <p><strong>public get</strong> <a href="/pages/GQRdEFvOHDqfnGJ51NkB"><strong>link()</strong></a><strong>:</strong> <mark style="color:green;">string</mark>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | <mark style="color:green;">undefined</mark><br>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get"><code>get</code></a> accessor gets the link(to read more about the thrown error) by returning the <a href="/pages/T7CzWe5vgWUYvAmOLUPa"><code>#link</code></a> property of a specified object.</p>                                   |
| <p><strong>public get</strong> <a href="/pages/UAsNmVmOuYGxNypELFFh"><strong>message()</strong></a><strong>:</strong> <mark style="color:green;">string</mark><br>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get"><code>get</code></a> accessor gets the error <a href="/pages/6Nle1uMltWSb2uh6hgTQ#message">message</a> by returning the parent <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/message"><code>message</code></a> property of the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error"><code>Error</code></a> object.</p> |                                                                                                                                                                                                                                                                                                                                                                                   |
| <p><strong>public get</strong> <a href="/pages/LxHtOb8sW6C9DrVZpyJ2"><strong>problem()</strong></a><strong>:</strong> <mark style="color:green;">string</mark><br>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get"><code>get</code></a> accessor gets the <a href="/pages/6Nle1uMltWSb2uh6hgTQ#problem">problem</a> by returning the <a href="/pages/ni1YTHvL07t1jeocuGux"><code>#problem</code></a> property of a specified object.</p>                                                                                                                                                                                                |                                                                                                                                                                                                                                                                                                                                                                                   |
| <p><strong>public get</strong> <a href="/pages/GF0yfhKsp9WzRTAHqFDt"><strong>template()</strong></a><strong>:</strong> <mark style="color:green;">string</mark><br>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get"><code>get</code></a> accessor gets the <a href="/pages/6Nle1uMltWSb2uh6hgTQ#template">template</a> of the error message by returning the <a href="/pages/VT4SwlV0NwAnpvm5q6hg"><code>#template</code></a> property of a specified object.</p>                                                                                                                                                                       |                                                                                                                                                                                                                                                                                                                                                                                   |


# get fix()

The get accessor obtains a possible solution to the described problem

## `CommonError.prototype.fix`

The [`get`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) accessor obtains a possible [solution](/error/getting-started/basic-concepts#fix) to the described [problem](/error/commonerror/accessors/get-problem) by returning the [`#fix`](/error/commonerror/properties/fix) property of a specified object.

{% code title="common-error.class.ts" %}

```typescript
public get fix(): string {
  return this.#fix;
}
```

{% endcode %}

### Return type

#### [<mark style="color:green;">`string`</mark>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)

### Returns

The **return value** is the fix of a [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) type.

## Example usage

```typescript
// Example usage.
import { CommonError } from '@angular-package/error';

// Extend the `CommonError` class.
class TestError<Id extends string> extends CommonError<Id> {}

// Returns "Fix accessor."
new TestError('problem', 'Fix accessor.', '(AE:427)').fix;
```


# get id()

The get accessor gets the error identification

## `CommonError.prototype.id`

The [`get`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) accessor gets the error [identification](/error/getting-started/basic-concepts#identification) by returning the [`#id`](/error/commonerror/properties/id) property of a specified object.

{% code title="common-error.class.ts" %}

```typescript
public get id(): Id | undefined {
  return this.#id;
}
```

{% endcode %}

### Return type

#### [<mark style="color:green;">`Id`</mark>](/error/commonerror/generic-type-variables#commonerror-less-than-id-greater-than)`|`[<mark style="color:green;">`undefined`</mark>](https://www.typescriptlang.org/docs/handbook/basic-types.html#null-and-undefined)

The **return type** is the generic type variable [`Id`](/error/commonerror/generic-type-variables#commonerror-less-than-id-greater-than) or [`undefined`](https://www.typescriptlang.org/docs/handbook/basic-types.html#null-and-undefined).

### Returns

The **return value** is the error [identification](/error/getting-started/basic-concepts#identification) of the generic type variable [`Id`](/error/commonerror/generic-type-variables#commonerror-less-than-id-greater-than) or [`undefined`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined).

## Example usage

```typescript
// Example usage.
import { CommonError } from '@angular-package/error';

// Extend the `CommonError` class.
class TestError<Id extends string> extends CommonError<Id> {}

// Returns "(AE:427)".
new TestError('problem', 'Fix accessor.', '(AE:427)').id;
```


# get link()

The get accessor gets the link(to read more about the thrown error)

## `CommonError.prototype.link`

The [`get`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) accessor gets the link(to read more about the thrown error) by returning the [`#link`](/error/commonerror/properties/link) property of a specified object.

{% code title="common-error.class.ts" %}

```typescript
public get link(): string | undefined {
  return this.#link;
}
```

{% endcode %}

### Return type

#### [<mark style="color:green;">`string`</mark>](https://www.typescriptlang.org/docs/handbook/basic-types.html#string)`|`[<mark style="color:green;">`undefined`</mark>](https://www.typescriptlang.org/docs/handbook/basic-types.html#null-and-undefined)

The **return type** is a [`string`](https://www.typescriptlang.org/docs/handbook/basic-types.html#string) type or [`undefined`](https://www.typescriptlang.org/docs/handbook/basic-types.html#null-and-undefined).

### Returns

The **return value** is the link of a [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) type or [`undefined`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined).

## Example usage

```typescript
// Example usage.
import { CommonError } from '@angular-package/error';

// Extend the `CommonError` class.
class TestError<Id extends string> extends CommonError<Id> {}

// Returns "http://duckduckgo.com".
new TestError('problem', 'Fix accessor.', '(AE:427)', undefined, {
  link: 'http://duckduckgo.com',
}).link;
```


# get message()

The get accessor gets the error message

## `CommonError.prototype.message`

The [`get`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) accessor gets the error [message](/error/getting-started/basic-concepts#message) by returning the parent [`message`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/message) property of the [`Error`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) object.

{% code title="common-error.class.ts" %}

```typescript
public get message(): string {
  return super.message;
}
```

{% endcode %}

### Return type

#### [<mark style="color:green;">`string`</mark>](https://www.typescriptlang.org/docs/handbook/basic-types.html#string)

### Returns

The **return value** is the error [message](/error/getting-started/basic-concepts#message) of a [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) type.

## Example usage

```typescript
// Example usage.
import { CommonError } from '@angular-package/error';

// Extend the `CommonError` class.
class TestError<Id extends string> extends CommonError<Id> {}

// Returns "Problem(AE:427): Problem accessor. => Fix: Fix accessor.".
new TestError('Problem accessor.', 'Fix accessor.', '(AE:427)').message;
```


# get problem()

The get accessor gets the problem

## `CommonError.prototype.problem`

The [`get`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) accessor gets the [problem](/error/getting-started/basic-concepts#problem) by returning the [`#problem`](/error/commonerror/properties/problem) property of a specified object.

{% code title="common-error.class.ts" %}

```typescript
public get problem(): string {
  return this.#problem;
}
```

{% endcode %}

### Return type

#### [<mark style="color:green;">`string`</mark>](https://www.typescriptlang.org/docs/handbook/basic-types.html#string)

### Returns

The **return value** is the [problem](/error/getting-started/basic-concepts#problem) of a [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) type.

## Example usage

```typescript
// Example usage.
import { CommonError } from '@angular-package/error';

// Extend the `CommonError` class.
class TestError<Id extends string> extends CommonError<Id> {}

// Returns "Problem accessor."
new TestError('Problem accessor.', 'Fix accessor.', '(AE:427)').problem;
```


# get template()

The get accessor gets the template of the error message

## `CommonError.prototype.template`

The [`get`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) accessor gets the [template](/error/getting-started/basic-concepts#template) of the error message by returning the [`#template`](/error/commonerror/properties/template) property of a specified object.

{% code title="common-error.class.ts" %}

```typescript
public get template(): string {
  return this.#template;
}
```

{% endcode %}

### Return type

#### [<mark style="color:green;">`string`</mark>](https://www.typescriptlang.org/docs/handbook/basic-types.html#string)

### Returns

The **return value** is the [template](/error/getting-started/basic-concepts#template) of a [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) type.

## Example usage

```typescript
// Example usage.
import { CommonError } from '@angular-package/error';

// Extend the `CommonError` class.
class TestError<Id extends string> extends CommonError<Id> {}

// Returns "{problem} {fix} {id}".
new TestError(
  'Problem accessor.',
  'Fix accessor.',
  '(AE:427)',
  '{problem} {fix} {id}'
).template;
```


# Properties

The \`CommonError\` object properties

|                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>public static</strong> <a href="/pages/akE6vknq8khSYhbok2vb"><strong>template</strong></a><strong>:</strong> <mark style="color:green;">string</mark><br>A template of the error message of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>string</code></a> type with the replaceable <a href="/pages/BbVb9Mj2Y9veAqrtKz61#problem"><code>{problem}</code></a>, <a href="/pages/BbVb9Mj2Y9veAqrtKz61#fix"><code>{fix}</code></a> and optional <a href="/pages/BbVb9Mj2Y9veAqrtKz61#id"><code>{id}</code></a>, <code>{link}</code>, <a href="/pages/BbVb9Mj2Y9veAqrtKz61#max"><code>{max}</code></a>, <a href="/pages/BbVb9Mj2Y9veAqrtKz61#min"><code>{min}</code></a>, <a href="/pages/BbVb9Mj2Y9veAqrtKz61#type"><code>{type}</code></a> tags.</p>                                                                                       |
| <p><a href="/pages/bM02xNqvdJvIfZJuzFc6"><strong>#fix</strong></a><strong>:</strong> <mark style="color:green;">string</mark><br>A privately stored possible solution to the described <a href="/pages/6Nle1uMltWSb2uh6hgTQ#problem">problem</a> of a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>string</code></a> type</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| <p><a href="/pages/sM1pw7PS84C8cmqys4wZ"><strong>#id?</strong></a><strong>:</strong> <mark style="color:green;">Id</mark><br>Optional privately stored unique <a href="/pages/6Nle1uMltWSb2uh6hgTQ#identification">identification</a> of the described <a href="/pages/6Nle1uMltWSb2uh6hgTQ#problem">problem</a> of generic type variable <a href="/pages/PY4nixy9omXSectfeNl5#commonerror-less-than-id-greater-than"><code>Id</code></a>.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| <p><a href="/pages/T7CzWe5vgWUYvAmOLUPa"><strong>#link?</strong></a><strong>:</strong> <mark style="color:green;">string</mark><br>The optional privately stored link of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>string</code></a> type redirects to read more about the thrown error.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| <p><a href="/pages/ni1YTHvL07t1jeocuGux"><strong>#problem</strong></a><strong>:</strong> <mark style="color:green;">string</mark><br>A privately stored <a href="/pages/6Nle1uMltWSb2uh6hgTQ#problem">problem</a> of a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>string</code></a> type.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| <p><a href="/pages/VT4SwlV0NwAnpvm5q6hg"><strong>#template</strong></a><strong>:</strong> <mark style="color:green;">string</mark><br>A <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string-type</a> privately stored <a href="/pages/6Nle1uMltWSb2uh6hgTQ#template">template</a> of the error <a href="/pages/6Nle1uMltWSb2uh6hgTQ#message">message</a> that contains replaceable required <a href="/pages/BbVb9Mj2Y9veAqrtKz61#fix"><code>{fix}</code></a>, <a href="/pages/BbVb9Mj2Y9veAqrtKz61#problem"><code>{problem}</code></a> and optional <a href="/pages/BbVb9Mj2Y9veAqrtKz61#id"><code>{id}</code></a>, <code>{link}</code>, <a href="/pages/BbVb9Mj2Y9veAqrtKz61#max"><code>{max}</code></a>, <a href="/pages/BbVb9Mj2Y9veAqrtKz61#min"><code>{min}</code></a>, <a href="/pages/BbVb9Mj2Y9veAqrtKz61#type"><code>{type}</code></a> tags.</p> |


# static template

A template of the error message of string type with the replaceable tags

## `CommonError.template`

A template of the error message of [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) type with the replaceable [`{problem}`](/error/commonerror/constructor#problem), [`{fix}`](/error/commonerror/constructor#fix) and optional [`{id}`](#id), [`{link}`](#link), [`{max}`](#max), [`{min}`](#min), [`{type}`](#type) tags.

{% hint style="info" %}
By default, it's set to:

`Problem{id}: {problem} => Fix: {fix}`.
{% endhint %}

{% code title="common-error.class.ts" %}

```typescript
public static template = `Problem{id}: {problem} => Fix: {fix}`;
```

{% endcode %}

### Tags

Replaceable tags on the [`template`](#template-string-commonerror.template).

#### `{fix}`

Replaceable by the given required [`fix`](/error/commonerror/constructor#fix-string) parameter.

#### `{id}`

Replaceable by the given [`id`](/error/commonerror/constructor#id-id) parameter.

#### `{link}`

Replaceable by the property `link` of the given [`additional`](/error/commonerror/constructor#additional-min-number-max-number-type-string) parameter.

#### `{max}`

Replaceable by the property `max` of the given [`additional`](/error/commonerror/constructor#additional-min-number-max-number-type-string) parameter.

#### `{min}`

Replaceable by the property `min` of the given [`additional`](/error/commonerror/constructor#additional-min-number-max-number-type-string) parameter.

#### `{problem}`

Replaceable by the given required [`problem`](/error/commonerror/constructor#problem-string) parameter.

#### `{type}`

Replaceable by the property `type` of the given [`additional`](/error/commonerror/constructor#additional-min-number-max-number-type-string) parameter.

## Example usage

```typescript
// Example usage.
import { CommonError } from '@angular-package/error';

// Change the template.
CommonError.template = `Problem({id}): {problem} => Fix: {fix}`;

// Extend the `CommonError` class.
class TestError<Id extends string> extends CommonError<Id> {}

// Returns
// Error: Problem(AE:427): The `age` parameter is wrong. => Fix: Provided `age`
// must be different type.
new TestError(
  'The `age` parameter is wrong.', // Problem
  'Provided `age` must be different type. ', // Fix
  'AE:427' // Identification
);
```


# #fix

A privately stored possible solution to the described problem

## `#fix`

A privately stored possible [solution](/error/getting-started/basic-concepts#fix) to the described [problem](/error/getting-started/basic-concepts#problem) of a [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) type.

{% code title="common-error.class.ts" %}

```typescript
#fix: string;
```

{% endcode %}

### Type

#### [<mark style="color:green;">`string`</mark>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)


# #id?

A privately stored unique identification of the described problem

## `#id?`

Optional privately stored unique [identification](/error/getting-started/basic-concepts#identification) of the described [problem](/error/getting-started/basic-concepts#problem) of generic type variable [`Id`](/error/commonerror/generic-type-variables#commonerror-less-than-id-greater-than).

{% code title="common-error.class.ts" %}

```typescript
#id?: Id;
```

{% endcode %}

### Type

#### [<mark style="color:green;">`Id`</mark>](/error/commonerror/generic-type-variables#wrap-opening)


# #link?

The optional privately stored link redirects to read more about the thrown error

## `#link?`

The optional privately stored link of [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) type redirects to read more about the thrown error.

{% code title="common-error.class.ts" %}

```typescript
#link?: string;
```

{% endcode %}

### Type

#### [<mark style="color:green;">`string`</mark>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)


# #problem

A privately stored problem

## `#problem`

A privately stored [problem](/error/getting-started/basic-concepts#problem) of a [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) type.

{% code title="common-error.class.ts" %}

```typescript
#problem: string;
```

{% endcode %}

### Type

#### [<mark style="color:green;">`string`</mark>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)


# #template

A string-type privately stored template of the error message that contains replaceable required \`{fix}\`, \`{problem}\` and optional \`{id}\`, \`{link}\`, \`{max}\`, \`{min}\`, \`{type}\` tags

## `#template`

A [string-type](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) privately stored [template](/error/getting-started/basic-concepts#template) of the error [message](/error/getting-started/basic-concepts#message) that contains replaceable required [`{fix}`](/error/commonerror/constructor#fix), [`{problem}`](/error/commonerror/constructor#problem) and optional [`{id}`](/error/commonerror/constructor#id), `{link}`, [`{max}`](/error/commonerror/constructor#max), [`{min}`](/error/commonerror/constructor#min), [`{type}`](/error/commonerror/constructor#type) tags.

{% code title="common-error.class.ts" %}

```typescript
#template: string;
```

{% endcode %}

### Type

#### [<mark style="color:green;">`string`</mark>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)


# Methods

The \`CommonError\` object methods

|                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p><strong>protected static</strong> <a href="/pages/KhI7uCqLCibWKkF1fp1b"><strong>defineMessage()</strong></a><strong>:</strong> <mark style="color:green;">string</mark><br>The static "<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals">tag</a>" method builds from the given <a href="/pages/KhI7uCqLCibWKkF1fp1b#...values-any"><code>values</code></a> the error message of a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>string</code></a> type on the template.</p> |
| <p><strong>protected static</strong> <a href="/pages/EVnsL3y0PxCd21o8K9N0"><strong>isError()</strong></a><strong>:</strong> value is <mark style="color:green;">CommonError</mark><<mark style="color:green;">Id</mark>><br>Checks whether the <a href="/pages/EVnsL3y0PxCd21o8K9N0#value-any"><code>value</code></a> of any type is a <code>this</code> instance of any or the given <a href="/pages/EVnsL3y0PxCd21o8K9N0#id-id">identification</a>.</p>                                                                                                                            |


# static defineMessage()

The static "tag" method builds from the given values the error message

## `CommonError.defineMessage()`

The static "[tag](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)" method builds from the given [`values`](#...values-any) the error message of a [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) type on the template.

{% code title="common-error.class.ts" %}

```typescript
protected static defineMessage(
  templateStringsArray: TemplateStringsArray,
  ...values: any[]
): string {
  let problem: string,
    fix: string,
    id: string | undefined,
    template: string,
    additional: { link?: string; min?: number; max?: number; type?: string };
  [problem, fix, id, template, additional] = values;
  template = (template || CommonError.template)
    .replace('{problem}', problem || '')
    .replace(/{id}/g, id || '')
    .replace(/{link}/g, additional?.link ? additional.link : '')
    .replace(/{max}/g, additional?.max ? String(additional.max) : '')
    .replace(/{min}/g, additional?.min ? String(additional.min) : '')
    .replace(/{type}/g, additional?.type ? additional.type : '')
    .replace('{fix}', fix || '');
  return template;
}
```

{% endcode %}

### Parameters

#### `templateStringsArray:`<mark style="color:green;">`TemplateStringsArray`</mark>

\-

#### `...values:`[<mark style="color:green;">`any`</mark>](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#any)`[]`

A rest parameter of expressions in order [`${problem}`](/error/commonerror/constructor#problem-string), [`${fix}`](/error/commonerror/constructor#fix-string), [`${id}`](/error/commonerror/constructor#id-id), [`${template}`](https://docs.angular-package.dev/error/commonerror/methods/pages/BbVb9Mj2Y9veAqrtKz61#template-string-commonerror.template) and [`${additional}`](/error/commonerror/constructor#additional-link-string-min-number-max-number-type-string).

### Returns

The re**turn value** is the error message of a [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) type created from the expressions given in the [`values`](#...values-any).

## Example usage

```typescript
// Example usage.
import { CommonError } from '@angular-package/error';

const problem = 'The given `age` parameter must be';
const fix = 'Provided string type is not accepted, change to ';
const id = 'AE: 427';
const template = `Issue({id}): {problem} of {type} between range {min} and {max}. {fix}{type}`;
const additional = { max: 27, min: 9, type: 'number' };

class TestError<Id extends string> extends CommonError<Id> {
  public static isError<Id extends string>(
    value: any,
    id?: Id
  ): value is CommonError<Id> {
    return super.isError(value, id);
  }

  public static defineMessage(
    templateStringsArray: TemplateStringsArray,
    ...values: any[]
  ): string {
    return super.defineMessage(templateStringsArray, ...values);
  }
}

// Returns
// Issue(AE: 427): The given `age` parameter must be of number between range 9 and 27. Provided string type is not accepted, change to number
TestError.defineMessage`${problem}${fix}${id}${template}${additional}`;
```


# static isError()

Checks whether the value of any type is a this instance of any or the given identification

## `CommonError.isError()`

Checks whether the [`value`](#value-any) of [`any`](https://www.typescriptlang.org/docs/handbook/basic-types.html#any) type is a `this` instance of any or the given [identification](#id-id).

{% code title="common-error.class.ts" %}

```typescript
protected static isError<Id extends string>(
  value: any,
  id?: Id
): value is CommonError<Id> {
  return typeof value === 'object' && value instanceof this
    ? typeof id === 'string'
      ? value.id === id
      : true
    : false;
}
```

{% endcode %}

### Generic type variables

#### <mark style="color:green;">`Id`</mark>`extends`[<mark style="color:green;">`string`</mark>](https://www.typescriptlang.org/docs/handbook/basic-types.html#string)

A generic type variable constrained by the [`string`](https://www.typescriptlang.org/docs/handbook/basic-types.html#string) indicates the&#x20;

### Parameters

#### `value:`[<mark style="color:green;">`any`</mark>](https://www.typescriptlang.org/docs/handbook/basic-types.html#any)

The value of [`any`](https://www.typescriptlang.org/docs/handbook/basic-types.html#any) type to check against the `this` instance.

#### `id?:`[<mark style="color:green;">`Id`</mark>](#idextendsstring)

Optional identification of generic type variable [`Id`](#idextendsstring) to check whether the given [`value`](#value-any) contains.

### Return type

#### `value is`[<mark style="color:green;">`CommonError`</mark>](/error/commonerror/overview)`<`[<mark style="color:green;">`Id`</mark>](/error/commonerror/generic-type-variables#commonerror-less-than-id-greater-than)`>`

The **return type** is a [`boolean`](https://www.typescriptlang.org/docs/handbook/basic-types.html#boolean) indicating the [`value`](#value-any) is the [`CommonError`](/error/commonerror/overview) object that takes generic type variable [`Id`](/error/commonerror/generic-type-variables#commonerror-less-than-id-greater-than).

### Returns

The **return value** is a [`boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean) type indicating whether the given [`value`](#value-any) is a `this` instance of any or the given [`id`](#id-id).

## Example usage

```typescript
// Example usage.
import { CommonError } from '@angular-package/error';

class TestError<Id extends string> extends CommonError<Id> {
  public static isError<Id extends string>(
    value: any,
    id?: Id
  ): value is TestError<Id> {
    return super.isError(value, id);
  }
}

const testError = new TestError(
  'Problem accessor.',
  'Fix accessor.',
  '(AE:427)',
  '{problem} {fix} {id}'
);

// Returns "true".
TestError.isError(testError, '(AE:427)');
```


# Overview

The \`CommonErrors\` object

## `CommonErrors {}`

The `CommonErrors` object represents the storage of errors with [unique identification](/error/getting-started/basic-concepts#unique-identification) numbers.

{% embed url="<https://github.com/angular-package/error/blob/main/src/lib/common-errors.class.ts>" %}
`common-errors.class.ts`
{% endembed %}

### **Accessors**

|                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>protected get</strong> <a href="/pages/17m0fDb46LZWkooB1FqX"><strong>errors()</strong></a><strong>:</strong> <mark style="color:green;">Map</mark><<mark style="color:green;">Id</mark>, <mark style="color:green;">any</mark>><br>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get"><code>get</code></a> accessor returns the errors of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map"><code>Map</code></a> type by returning the <a href="/pages/2ir7K33VMKRDy2vjKyP7"><code>#errors</code></a> property of a specified object.</p> |

### Properties

|                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>public static</strong> <a href="/pages/dOsyXdOuhEgblyUQ9QW5"><strong>template?</strong></a><strong>:</strong> <mark style="color:green;">string</mark></p><p>Optional template of <a href="https://www.typescriptlang.org/docs/handbook/basic-types.html#string"><code>string</code></a> type.</p>                                                                                                                                                                                                                     |
| <p><a href="/pages/JAuIoagdUhqE3FJbZEcf"><strong>#id?</strong></a><strong>:</strong> <mark style="color:green;">Set</mark><<mark style="color:green;">Id</mark>><br>The collection of unique allowed <a href="/pages/6Nle1uMltWSb2uh6hgTQ#unique-identification">identification</a> numbers of generic type variable <a href="/pages/fKW6bm1HGWKrX5c1MDO3#commonerrors-less-than-id-greater-than"><code>Id</code></a>.</p>                                                                                                        |
| <p><a href="/pages/2ir7K33VMKRDy2vjKyP7"><strong>#errors</strong></a><strong>:</strong> <mark style="color:green;">Map</mark><<mark style="color:green;">Id</mark>, <mark style="color:green;">any</mark>><br>The errors storage of the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map"><code>Map</code></a> type where the <code>key</code> is of the generic type variable <a href="/pages/fKW6bm1HGWKrX5c1MDO3#commonerrors-less-than-id-greater-than"><code>Id</code></a>.</p> |

### Methods

|                                                                                                                                                                                                                                                                                                                                                                                                                             |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>public</strong> <a href="/pages/xi0YKoG8xZkgZN9NkFaw"><strong>delete()</strong></a><strong>:</strong> <mark style="color:green;">this</mark></p><p>Deletes the error of a specified <a href="/pages/xi0YKoG8xZkgZN9NkFaw#id-errorid"><code>id</code></a> from the object.</p>                                                                                                                                    |
| <p><strong>public</strong> <a href="/pages/5dVyxHbYOjpt7OCBaNam"><strong>has()</strong></a><strong>:</strong> <mark style="color:green;">boolean</mark><br>The <code>has()</code> method checks whether the error of the given <a href="/pages/5dVyxHbYOjpt7OCBaNam#id-errorid"><code>id</code></a> exists in a specified object.</p>                                                                                       |
| <p><strong>public</strong> <a href="/pages/T7Dy5DRfviVlHi4BXeuA"><strong>throw()</strong></a><strong>:</strong> <mark style="color:green;">void</mark><br>Throws an error of the given <a href="/pages/T7Dy5DRfviVlHi4BXeuA#id-errorid"><code>id</code></a> if the unique <a href="/pages/mb13waFtHVZxVvkUgUwQ#...id-id"><code>id</code></a> was provided in the <a href="/pages/mb13waFtHVZxVvkUgUwQ">constructor</a>.</p> |
| <p><strong>protected</strong> <a href="/pages/PkOMsn22h7BbWBQydoO7"><strong>isAllowedId()</strong></a><strong>:</strong> <mark style="color:green;">boolean</mark><br>Checks whether the given <a href="/pages/6Nle1uMltWSb2uh6hgTQ#unique-identification">identification</a> number was provided in the <a href="/pages/mb13waFtHVZxVvkUgUwQ">constructor</a>.</p>                                                         |


# Generic type variables

The \`CommonErrors\` generic type variables

## `CommonErrors<`<mark style="color:green;background-color:green;">`Id`</mark>`>`

#### <mark style="color:green;">`Id`</mark>`extends`[<mark style="color:green;">`string`</mark>](https://www.typescriptlang.org/docs/handbook/basic-types.html#string)

​A generic type variable constrained by the [`string`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), by default of the value **captured** from the provided rest parameter [`id`](https://docs.angular-package.dev/error/commonerrors/pages/mb13waFtHVZxVvkUgUwQ#...id-id) indicates the identification type of a new [`CommonErrors`](/error/commonerrors/overview) instance.

{% code title="common-errors.class.ts" %}

```typescript
abstract class CommonErrors<
  Id extends string // <--- Declare generic type variable Id.
> {
  constructor(
    ...id: Id[] // <--- Capture generic type variable Id.
  ) {
    Array.isArray(id) && (this.#id = new Set(id));
  }
}
```

{% endcode %}


# Constructor

The \`CommonErrors\` constructor

## `CommonErrors()`

Creates an instance of the errors storage with [unique identification](/error/getting-started/basic-concepts#unique-identification) numbers.

{% hint style="info" %}
Identification numbers given in the rest parameter [`id`](#...id-id) are used by the instance [`isAllowedId()`](/error/commonerrors/methods/isallowedid) method to check the existence of the specific [`id`](#...id-id).
{% endhint %}

{% code title="common-errors.class.ts" %}

```typescript
constructor(...id: Id[]) {
  Array.isArray(id) && (this.#id = new Set(id));
}
```

{% endcode %}

### Parameters

#### `...id:`[<mark style="color:green;">`Id`</mark>](/error/commonerrors/generic-type-variables#commonerrors-less-than-id-greater-than)`[]`

A [rest parameter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) of generic type variable [`Id`](/error/commonerrors/generic-type-variables#commonerrors-less-than-id-greater-than) indicates [unique identification](/error/getting-started/basic-concepts#unique-identification) numbers under which the errors are stored in the object.

## Example usage

```typescript
// Example usage.
import { CommonErrors } from '@angular-package/error';

class CustomErrors<Id extends string> extends CommonErrors<Id> {
  constructor(...id: Id[]) {
    super(...id);
  }
}

// Initialize `CustomErrors` without defined `id`.
// Returns CustomErrors {} of CustomErrors<string>
new CustomErrors();

// Initialize `CustomErrors` with defined `id`.
// Returns CustomErrors {} of CustomErrors<"ERR1" | "ERR2" | "ERR3">
new CustomErrors('ERR1', 'ERR2', 'ERR3');
```


# Accessors

The \`CommonErrors\` accessors

|                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>protected get</strong> <a href="/pages/17m0fDb46LZWkooB1FqX"><strong>errors()</strong></a><strong>:</strong> <mark style="color:green;">Map</mark><<mark style="color:green;">Id</mark>, <mark style="color:green;">any</mark>><br>The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get"><code>get</code></a> accessor returns the errors of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map"><code>Map</code></a> type by returning the <a href="/pages/2ir7K33VMKRDy2vjKyP7"><code>#errors</code></a> property of a specified object.</p> |


# get errors()

The get accessor returns the errors of Map type

## `CommonErrors.prototype.errors()`

The [`get`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) accessor returns the errors of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) type by returning the [`#errors`](/error/commonerrors/properties/errors) property of a specified object.

{% code title="common-errors.class.ts" %}

```typescript
protected get errors(): Map<Id, any> {
  return this.#errors;
}
```

{% endcode %}

### Return type

#### `Map<`[<mark style="color:green;">`Id`</mark>](/error/commonerrors/generic-type-variables#commonerrors-less-than-id-greater-than)`,`[<mark style="color:green;">`any`</mark>](https://www.typescriptlang.org/docs/handbook/basic-types.html#any)`>`

### Returns

The **return value** is the [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) object of errors.


# Properties

The \`CommonErrors\` properties

|                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p><strong>public static</strong> <a href="/pages/dOsyXdOuhEgblyUQ9QW5"><strong>template?</strong></a><strong>:</strong> <mark style="color:green;">string</mark><br>Optional template of <a href="https://www.typescriptlang.org/docs/handbook/basic-types.html#string"><code>string</code></a> type.</p>                                                                                                                                                                                                                                                                     |
| <p><a href="/pages/JAuIoagdUhqE3FJbZEcf"><strong>#id?</strong></a><strong>:</strong> <mark style="color:green;">Set</mark><<a href="/pages/fKW6bm1HGWKrX5c1MDO3#wrap-opening"><mark style="color:green;">Id</mark></a>></p><p>An optional collection of unique allowed <a href="/pages/6Nle1uMltWSb2uh6hgTQ#unique-identification">identification</a> numbers of generic type variable <a href="/pages/fKW6bm1HGWKrX5c1MDO3#commonerrors-less-than-id-greater-than"><code>Id</code></a> under which errors are stored.</p>                                                     |
| <p><a href="/pages/2ir7K33VMKRDy2vjKyP7"><strong>#errors</strong></a><strong>:</strong> <mark style="color:green;">Map</mark><<a href="/pages/fKW6bm1HGWKrX5c1MDO3"><mark style="color:green;">Id</mark></a>, <mark style="color:green;">any</mark>></p><p>The errors storage of the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map"><code>Map</code></a> type where the <code>key</code> is of the generic type variable <a href="/pages/fKW6bm1HGWKrX5c1MDO3#commonerrors-less-than-id-greater-than"><code>Id</code></a>.</p> |


# static template?

Optional template

## `CommonErrors.template`

Optional template of [`string`](https://www.typescriptlang.org/docs/handbook/basic-types.html#string) type.

{% code title="common-errors.class.ts" %}

```typescript
public static template?: string;
```

{% endcode %}

### Type

#### [<mark style="color:green;">`string`</mark>](https://www.typescriptlang.org/docs/handbook/basic-types.html#string)


# #id?

The collection of unique allowed identification numbers

## `#id?`

An optional collection of unique allowed [identification](/error/getting-started/basic-concepts#unique-identification) numbers of generic type variable [`Id`](/error/commonerrors/generic-type-variables#commonerrors-less-than-id-greater-than) under which errors are stored.

{% code title="common-errors.class.ts" %}

```typescript
#id?: Set<Id>;
```

{% endcode %}

### Type

#### `Set<`[<mark style="color:green;">`Id`</mark>](/error/commonerrors/generic-type-variables#commonerrors-less-than-id-greater-than)`>`


# #errors

The errors storage of the Map type

## `#errors`

The errors storage of the [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) type where the `key` is of the generic type variable [`Id`](/error/commonerrors/generic-type-variables#commonerrors-less-than-id-greater-than).

{% code title="common-errors.class.ts" %}

```typescript
#errors: Map<Id, any> = new Map();
```

{% endcode %}

### Type

#### `Map<`[<mark style="color:green;">`Id`</mark>](/error/commonerrors/generic-type-variables#commonerrors-less-than-id-greater-than)`,`[<mark style="color:green;">`any`</mark>](https://www.typescriptlang.org/docs/handbook/basic-types.html#any)`>`




---

[Next Page](/llms-full.txt/1)

