Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Alguem consegue me explicar sobre o "metodoOriginal" e o "function(...args: Array<any>)"

acabei de ver o video e acabei não entendo muito sobre o video. Alguem sabe me explicar essa parte do codigo e oq ele está fazendo exatamente

export function logarTempoDeExecução() {
    return function(
        target: any,
        propertyKey: string,
        descriptor: PropertyDescriptor
    ){
        const metodoOriginal = descriptor.value;
        descriptor.value = function(...args: Array<any>) {
            const t1 = performance.now();
            const retorno = metodoOriginal.apply(this, args);
            const t2 = performance.now();
            console.log(`${propertyKey}, o tempo de execução: ${(t2 - t1)/1000} segundos.`)
            retorno
        };

        return descriptor;
    }
}
4 respostas

O metodoOriginal é o espaço de memória onde será armazenada as linhas de código por trás do método que você aplicar esse decorator*.

Precisa armazenar essa informação, porque no momento seguinte é digitado o comando:

descriptor.value = function(...args: Array<any>) {

que altera a informação original do método passado.

Uma vez que, nessa aula, não se pretente perder essas informações, mas sim acrescentar os códigos que calculam a perfomance nos métodos que vão ser aplicados.

Quanto ao function(...args: Array<any>), é a criação de uma função, da forma padrão permitida pelo Javascript, fazendo a propriedade value do objeto descriptor receber essa função inteira, mas como dito antes, não se quer perder nenhuma informação de qualquer que seja o método que foi aplicado esse decorator , nem mesmo os parâmetros que esse método possuí, por isso é usada outra sintace do Javascript, chamada "Spread Operator", que é os três pontinho atrás de um vetor "...args", usada para despejar todo o conteúdo que tem por trás desse vetor, nesse caso foi muito útil usar essa sintace, porque não é fixo a quantidade de parâmetros usados nas funções que que será aplicado o decorator.

Em seguida é adicionado um ": Array<any>", como convenção do Typescript, com a finalidade de "tipar" os parâmetros despejados anteriormente, já que não se sabe quantos são e não se pode assegurar, qual é o tipo de cada um, então é declarado o tipo any para eles.

a parte do "...args" serve pra vc colocar qualquer quantidade de parametros que tiver? sem ter que ficar mudando no codigo? e não entendi muito sobre esse "vetor"

solução!

Imagina q temos:

let vogais = ['a', 'e', 'i', 'o', 'u'];
let consoantes = ['b', 'c', /*o resto das consoantes */];

e queremos trazer as informações dessas variáveia para outra variável:

  1. Criamos a váriável que vai receber as informações:
    let letrasAleatorias = []
  2. Poderiamos pegar as informações uma a uma:
    letrasAleatorias.push(vogais[0]);
    letrasAleatorias.push(vogais[1]);
    letrasAleatorias.push(vogais[2]);
    // retorno: 'a', 'b', 'c'
  3. Porém se quisermos resgatar tudo oq há no vetor "vogais" , mesmo supondo q agt não conheça todas as vogais q ele possui, poderiamos ter feito:
    letrasAleatorias.push(...vogais);
    // retorno: 'a', 'e', 'i', 'o', 'u'
    ou
    letrasAleatorias.push(...vogais);
    letras Aleatorias.push(consoantes[0])
    // retorno: 'a', 'e', 'i', 'o', 'u', 'b'
    Se colocassemos o Spread Operator na consoante teria retornado todo o vetor consoante:
    letrasAleatorias.push(...consoante);
    // retorno: 'b', 'c', /*o resto das consoantes */
    Então, não precisamos saber o tipo dos elementos q serão despejados pelo Spread e nem saber quantos são, só sabemos q será despejado tudo oq há no vetor q se encontra a direita dos três pontinhos.

No exemplo da vídeo aula, o objeto descriptor.value sabia de forma implicita, q ele só podia receber alguma função, com algum parâmetro do tipo array de any, q nesse caso ele chamou de args, entretanto é colocado o ... na esquerda de args, pq ele despeja os parâmetros da função q vc colocar o seu decorator em cima.

Ou seja, se vc tiver um:

@logarTempoDeExecucao
soma(a: number, b: number): number {
    return a+b;
}

a parte ...args dentro do seu decorator, despeja: a: number, b: number

Só que nem sempre vc vai usar o seu decorator em cima da msm função, então nem sempre vai ter apenas 2 argumentos a função em baixo do seu decorator, por isso é uma boa ideia despejar tudo oq há em um vetor, independente da quantidade de elementos, nesse caso, preserva qualquer quantidade de argumento de qualquer função.

muito obg pela ajuda :)