Ordenar Array de objetos en TypeScript

1. Objetos de TypeScript
2. Matriz de objetos TypeScript
3. el método sort() en TypeScript

Este artículo muestra cómo ordenar un array de objetos en TypeScript.

Objetos de TypeScript

TypeScript es un lenguaje fuertemente tipado. Admite varios tipos, como primitivos, arrays y tipos de objetos.

El tipo de objeto es un tipo especial que puede representar datos con propiedades. Un objeto TypeScript se parece a un objeto JSON, como se muestra a continuación.

{ id: 001, username: 'rick' }

El id y username son las dos propiedades del objeto anterior. Los valores han sido asignados a cada propiedad también.

En TypeScript, los tipos de objetos personalizados se pueden crear mediante interfaces. Las interfaces le permiten crear estructuras de objetos, como se muestra a continuación.

interface employee {
    empId: number,
    empDesignation: string
}

La interfaz employee anterior define un objeto employee con dos propiedades, empId y empDesignation, que son tipos de número y cadena, respectivamente.

Matriz de objetos TypeScript

TypeScript admite tipos de array que pueden almacenar una colección de elementos. Puede almacenar tanto valores de tipo primitivo como también objetos personalizados.

Vamos a crear un array de objetos employee.

let employeesList: Array<employee> = [
    {empId: 20, empDesignation: 'senior engineer'},
    {empId: 14, empDesignation: 'junior engineer'},
    {empId: 25, empDesignation: 'program manager'},
    {empId: 12, empDesignation: 'director'}
]

La matriz anterior employeesList contiene cuatro objetos employee. A veces, necesitamos ordenar estos objetos por una propiedad determinada.

Es como si SQL ordenara los datos por una columna o varias columnas. TypeScript admite la clasificación fuera de la caja.

El método incorporado sort() puede ordenar un array de objetos.

el método sort() en TypeScript

El método ordenar toma un array de elementos y devuelve el array ordenada. Acepta una función opcional que se puede usar para especificar el orden del array devuelto.

Sintaxis:

//1.
Array.sort()
//2.
Array.sort(<custom_function>)

El Array es el array de objetos que ordenaremos. La <custom_function> puede especificar el orden de clasificación.

Dado que el requisito es ordenar un array de objetos por una de sus propiedades, debemos usar el método sort pasando una función personalizada que decide el orden de clasificación y la propiedad del objeto.

Ordenemos la matriz por propiedad id.

employeesList.sort(
    (firstObject: employee, secondObject: employee) =>
    	(firstObject.empId > secondObject.empId) ? 1 : -1
);

La función de flecha se ha utilizado en el ejemplo anterior para especificar la condición de clasificación.

Cada vez que la función devuelve 1, eso significa que el secondObject tiene la precedencia de clasificación más alta sobre el firstObject. De lo contrario, el firstObject tiene la prioridad de clasificación más alta.

Esto ordenaría los objetos employeesList por su propiedad empId en orden ascendente.

Producción:

La misma matriz se puede ordenar en orden descendente con la siguiente condición dentro de la función de flecha.

(firstObject: employee, secondObject: employee) =>
	(firstObject.empId > secondObject.empId) ? -1 : 1

Hay algunos escenarios en los que primero debe ordenar por la propiedad empId y luego empDesignation. Si el valor de la propiedad empId es el mismo para un objeto dado, podemos verificar la propiedad empDesignation en el operador condicional.

let employeesList: Array<employee> = [
    {empId: 20, empDesignation: 'senior engineer'},
    {empId: 14, empDesignation: 'junior engineer'},
    {empId: 14, empDesignation: 'developer'},
    {empId: 25, empDesignation: 'program manager'},
    {empId: 12, empDesignation: 'director'}
]

employeesList.sort(
    (firstObject: employee, secondObject: employee) =>
    	(firstObject.empId > secondObject.empId) ? 1 :
    		(firstObject.empId === secondObject.empId) ? (
                (firstObject.empDesignation > secondObject.empDesignation) ? 1 : -1 )
    	: -1
);

Producción:

Como vemos, dos objetos tienen el mismo empId 14. Por lo tanto, esos dos objetos han sido ordenados por la propiedad empDesignation.

El método sort es muy potente a la hora de ordenar objetos en función de sus propiedades. También se puede utilizar para la clasificación de tipos complejos.