Questions[typescript]

I am using the library lodashin Angularto group this data:

data = 
[
   {
     hash: "13m49k9pg70b",
     fecha_registro: "2021-10-26T20:28:25.350000Z",
     id: 7791,
     nombre: "aprueba"
   },
   {
     hash: "13m49k9pg70b",
     fecha_registro: "2021-10-26T20:28:25.350000Z",
     id: 7792,
     nombre: "aprueba"
   },
   {
     hash: "1sd345612se",
     fecha_registro: "2021-11-08T21:22:25.350000Z",
     id: 7793,
     nombre: "btest"
   },
    {
     hash: "1sd345612se",
     fecha_registro: "2021-11-08T21:22:25.350000Z",
     id: 7794,
     nombre: "btest"
   },
    {
     hash: "asd1w345611s",
     fecha_registro: "2021-08-11T10:22:21.350000Z",
     id: 7794,
     nombre: "cvtest"
   },  

]

What I do is group the data by the properties nombre, hash, fecha_registroto do this in a function I do this:

this.confPersoDocenteClas = _.groupBy(data, (item) => {
    return [ item['nombre'], item['hash'], item['fecha_registro']];
});

console.log("DATA AGRUPADA", this.confPersoDocenteClas)

Which returns me correctly grouped data

aprueba,13m49k9pg70b,2021-10-26T20:28:25.350000Z: [{...}, {...}]
btest, 1sd345612se, 2021-11-08T21:22:25.350000Z: [{...}, {...}]
cvtest, asd1w345611s, 2021-11-08T10:12:21.350000Z: [{...}, {...}]

The "problem" I have is that it returns the data in alphabetical order of the key nombre, and what I need is that it returns me ordered by fecha_registro, from the most recent to the oldest, in this way:

btest, 1sd345612se, 2021-11-08T21:22:25.350000Z: [{...}, {...}]
cvtest, asd1w345611s, 2021-11-08T10:12:21.350000Z: [{...}, {...}]
aprueba,13m49k9pg70b,2021-10-26T20:28:25.350000Z: [{...}, {...}]

To try this I have added a line to the function indicated above in this way:

let datos  = _.orderBy(data, ['fecha_registro'], ['desc']); //linea agregada
this.confPersoDocenteClas = _.groupBy(datos, (item) => {
    return [ item['nombre'], item['hash'], item['fecha_registro']];
});

This sorts them but doing the grouping again sorts them back in alphabetical order, in this case by key nombre. How can I make it return ordered by fecha_registro? I hope you can help me, thanks in advance.

You have the following interface:

export interface XX{
    Campo1?: string;
    Campo2?: string;
    Campo3?: string;
    [key: string]: string;
}

The key is to be able to access an element of the same in the form

const p: XX = {};
p['Campo1'];

But the following TS error occurs

Property 'Field1' of type 'string | undefined' is not assignable to string index type 'string' (ts 2411)

Everything goes as if nothing, so I don't know if it's a TS error due to some bug, or I'm simply defining something wrong. How to solve that problem?

The error occurs in the interface definition.

If we change some of the strings to any, the error for that field goes away... but we don't want to use any.

export interface XX{
    Campo1?: any; <--- desaparece el error para este campo
    Campo2?: string;
    Campo3?: string;
    [key: string]: string;
}

I have configured ts in the following way (extract)

"compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",

I have the following examples:

without public;

 export class Persona {
   name: string;
   lastName: string;
   dni: string;
}

With public;

 export class Persona {
   public name: string;
   public lastName: string;
   public dni: string;
}

If I leave the attribute without the access modifier, is it public by default? It may be something basic but I don't know what the correct definition would be (I want the attributes to be public to access them from the html in angular 5).

To simplify the use of axios in my application, I used a prototype to declare it globally.

const instance = axios.create({
  baseURL: process.env.VUE_APP_BASE_URI,
  withCredentials: true
});

Vue.prototype.$http = instance;

So far there is no problem, the problem arises when using it in any component

import vue from 'vue'; <- agregado solo para ver si solucionaba el problema
import { Component, Vue, Watch} from 'vue-property-decorator';
.....
this.$http.get('url')
.then(Response => )

This code rightly indicates for typescript:

"Property '$http' does not exist on type 'YourComponent'."

So, how do you get typescript to recognize that and not go around protesting that you don't know what it is?

Ask

How to implement a two-way link from an object to a VM in aurelia.io without losing the functionality of Select2 and maintaining the full link of the original, and also that the changes in the VM are reflected in the Select2 .

Context

I am working on a project where the aurelia.io library has been implemented, while the Select2 plugin is being implemented at various points in the project ; the problem is that when initializing the plugin it replaces the dom of theby a series of divs and other objects, thus losing the binding with theoriginal, which remains hidden from view, while working with the newartificial created by the Select2 plugin .

UPDATE 1

This is an example of what you want to achieve.

HTML code:

<label>Seleccione la línea a la que pertenece la sublínea</label>    
<select value.bind="sublinea_seleccionada.LineaId">
    <option repeat.for="linea of Lineas" value.bind="linea.Id" selected.bind="$parent.sublinea_actual.LineaId == linea.Id">${Linea.Nombre}</option>
</select>
<button click.delegate="asignarLineaPorDefecto()">Seleccionar línea por defecto</button>

TypeScript code:

export class Sublineas{

    Lineas: linea[] = [];
    sublinea_seleccionada: subLinea = new subLinea();   

    mostrarIdLineaSeleccionada() { 

         alert(`Se ha seleccionado la Línea con Id ${this.sublinea_seleccionada.LineaId}`); 

    }

    asignarLineaPorDefecto(){

        this.sublinea_seleccionada.LineaId = 1;

    }

    attached() {

       var self = this;

        $("select").on("change", event => {

           self.mostrarIdLineaSeleccionada();

        });

        $("select").select2();

    }


}

UPDATE 2

I have found this answer on SOen , but in the example provided Select2 only works in one-way, that is, it only updates the value in the view model but it does not update with the changes in it.