Typescript: Add method to array of a class

Question

Let's say I have an Article model which has one field with the name of the article in different languages:

class Article {
  constructor(public name: Translation[]) { }
}

class Translation {
  constructor(
    public language: string,
    public text: string
  ) { }
}

I'd like to be able to call a method to translate that article name to the language given as an argument:

article.name.translate('EN')

How could I add that method to that array of translations?

Instead of Translation[], you may want to create a custom collection (perhaps TranslationCollection. Otherwise, create a getter, making name either private or protected. — briosheje
– briosheje, Commented Sep 3, 2018 at 10:15
First I though about creating a collection, but I would have to define a property in it so I would have to do something like article.name.translations.translate('EN') , wouldn't I? How would I use the getter? I cannot pass an argument to it, can I? — Pizzicato
– Pizzicato, Commented Sep 3, 2018 at 10:47

Perrier · Accepted Answer · 2018-09-03 10:50:17Z

3

V1:

class Article {
    constructor(public name: Translation[]) { }

    public translate(language:string):string {
        return this.name.find(t=>t.language==language).text;
    }
}


class Translation {
    constructor(
        public language: string,
        public text: string
    ) { }
}

let a = new Article([
    new Translation('EN', 'Yes'),
    new Translation('DE', 'Ja')
]);
a.translate('EN');

V2:

class Article {
    constructor(public name: TranslatableProperty) { }
}

class TranslatableProperty {
    constructor(public propTranslation:Translation[]) { }   

    public translate(language:string):string {
        return this.propTranslation.find(t=>t.language==language).text;
    }

}

class Translation {
    constructor(
        public language: string,
        public text: string
    ) { }

}

let a = new Article(new TranslatableProperty([
    new Translation('EN', 'Yes'),
    new Translation('DE', 'Ja')
]));
a.name.translate('EN');

edited Sep 3, 2018 at 10:50

answered Sep 3, 2018 at 10:25

Perrier

2,8475 gold badges38 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pizzicato Over a year ago

I thought about this, but the problem that I see is that I have more classes than Article that have properties which are translations...

Perrier Over a year ago

I have updated with a TranslatableProperty which does the translation and holds the translations.

Pizzicato Over a year ago

V2 works, thanks! The problem is that it changes the Article model structure, adding the propTranslation property. I use this model to upload it to an API with an specific structure, which would be broken.

Perrier Over a year ago

@Pizzicato Then you have to add a constructor to the original Article model that gets a new Article model (with the TranslatableProperties) as a parameter and convert what you want. As Translate holds only one language and text properties there's no other way you can touch outside and search other properties on the same level.

Pizzicato Over a year ago

All right, thanks, @Perrier. I think I'll just make a util.js file where I'll add a function that receives a Translation array and a language and returns the right text. What you suggest gets too complicated, although is correct! :-)

Titian Cernicova-Dragomir · Accepted Answer · 2018-09-03 10:24:59Z

0

At runtime there is only one Array class so adding a method for one type of array will add it for all types which can lead to conflicts. That being said you can add the method for just one Typescript array type like so

class Article {
    constructor(public name: Translation[]) { }
}

class Translation {
    constructor(
        public language: string,
        public text: string
    ) { }
}

interface Array<T> { // this has to be in global of în a module
    translate(this: Translation[], lang: string): string;
}

Array.prototype.translate = function (lang) {
    var t = this.find(o => o.language == lang);
    return t && t.text;

}

let article = new Article([

]);
article.name.translate('EN')

answered Sep 3, 2018 at 10:24

Titian Cernicova-Dragomir

253k37 gold badges465 silver badges395 bronze badges

3 Comments

Pizzicato Over a year ago

It works, but I think @Perrier answer is better because of the possible namespacing conflicts.

Titian Cernicova-Dragomir Over a year ago

@Pizzicato sure his solution makes good sense. The question was very specific about extending array, that is what I provided, I didn't think of an alternative way to approach the problem. This is why I caveated the answer with the conflict issue, sometimes just because we can do it does not mean we should :-)

Pizzicato Over a year ago

Yes, I agree! Thanks, @Titian!

Collectives™ on Stack Overflow

Typescript: Add method to array of a class

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related