Mapeando objetos com o `in keyof` no Typescript

Gustavo Leite — Wed, 15 Feb 2023 14:27:40 +0000

Neste artigo vamos aprender como funciona o operador in keyof do Typescript, e como ele pode te ajudar a mapear o tipo de objetos, assim evitando de redeclarar propriedades de objeto

Entendendo o `in keyof`

keyof

Antes de tudo, precisamos saber, o que é o keyof? No Typescript ele é utilizado para obter o nome das propriedades publicas de um tipo.

type Person = {
  age: number
  name: string
}

keyof Person // age | name

in keyof

in é utilizado quando você quer definir uma assinatura de indicie que podemos fornecer para um tipo. Em combinação com o keyof, podemos utilizar para declarar as propriedades que um tipo vai ter baseado nas propriedades de outro tipo.

Podemos criar um objet:

type ToBoolean<T> = {
  [K in keyof T]: boolean
}

type Product = {
  name: string
  price: number
}

const hasProductProperties: ToBoolean<Product> = {
 name: true,
 price: false
}

Elevando o seu conhecimento.

extends keyof

extends basicamente funciona como em classes, você extende propriedades de um tipo. Em combinação com o keyof, você restringe os valores que podem ser passados para um tipo genérico.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}

const person: Person = {
  age: 26,
  name: "Gustavo",
}


const name = getProperty(person, "name")

Nesse exemplo, eu estou definindo a função getProperty, que recebe como primeiro parametro um objeto, e segundo a chave desse objeto, retornando o valor dessa propriedade.

Combinando o `in keyof` e o `extends keyof`

// bloco 1
type Query<T, K extends keyof T> =  {
  $eq?: T[K] | Array<T[K]>
  $ne?: T[K] | Array<T[K]>
}

// bloco 2
type WhereParams<T> = {
  [K in keyof T]?: T[K] | Query<T, K>
};

// bloco 3
type Product = {
  name: string
  price: number
}

// bloco 4
const myQuery: WhereParams<Product> = {
  name: {
    $eq: 'Gustavo'
  }
}

Bloco 1:

Estou dizendo que os filtros devem ter o tipo da devida propriedade do objeto que eu passar.

exemplo com o Product, somente string | number

// erro
const myQuery: Query<Product, keyof Product> = {
  $eq: false
}

// sucesso

const myQuery2: Query<Product, keyof Product> = {
  $eq: 'uma string'
}

Bloco 2:

O WhereParams recebe um tipo, e as propriedades dele, irão ser assinadas com as chaves do tipo que eu passei como generic. Sendo o valor desse objecto, do tipo da propriedade em específico, ou um objeto de queries desse mesmo tipo.

Bloco 3:

Definição da entidade Produto

Bloco 4:

Instancia da query baseada nos filtros da entidade Product.

Conclusão

Existem maneiras de deixar nosso código muito mais inteligênte elevando o auto complete à um outro nível. Com o in keyof, podemos criar interfaces genéricas mapeando toda cadeia de propriedades, baseando tipos em outros tipos, evitamos a repetição de código.

Referências

Trigger do evento submit fora do formulário sem a necessidade de javascript

Gustavo Leite — Fri, 10 Feb 2023 15:29:20 +0000

Já precisou construir um formulário e o botão de submit ficava fora do elemento <form>, ai bateu a dúvida de como fazer o trigger do evento?

Existe uma forma nativa no html pra lidar com isso, o atributo form da tag <button>.

O tributo form espeficica o formulário ao qual o botão pertence. O valor para essa propriedade tem que ser igual ao id do elemento <form> em questão e estar no mesmo documento .html.

No exemplo abaixo, mostro um counter, onde ao submit do form, o valor do input é somado ao estado do counter.

    <div>
      <button form="form">submit</button>
      <button type="reset" form="form">reset</button>
      <form id="form">
        <input
          type="number"
          name="my-first-input"
          placeholder="my first input"
        />
      </form>
    </div>
    <span id="display">0</span>

      const display = document.querySelector("#display");
      const input = document.querySelector("input[name='my-first-input'");
      const reset = document.querySelector("button[type='reset']");

      const form = document.querySelector("form");
      form.addEventListener("submit", (event) => {
        event.preventDefault();
        const { value } = input;

        display.innerHTML = Number(display.innerHTML || 0) + Number(value);
      });

      reset.addEventListener("click", () => {
        display.innerHTML = 0;
      });

preview

Se quiser testar e editar tu mesmo, da uma olhada nesse exemplo:

https://codesandbox.io/s/cold-butterfly-6ncnvr?file=/index.html:115-295

Conclusão

Nem sempre precisamos utilizar javascript para realizar algumas tarefaz de manipulação do html, as vezes já existe alternativas nativas do html que vão te poupar código e tempo.

Foi útil pra ti? sinta-se livre pra me seguir no Twitter

Forem: Gustavo Leite

Mapeando objetos com o `in keyof` no Typescript

Entendendo o in keyof

keyof

in keyof

Elevando o seu conhecimento.

extends keyof

Combinando o in keyof e o extends keyof

Conclusão

Referências

Trigger do evento submit fora do formulário sem a necessidade de javascript

Conclusão

Entendendo o `in keyof`

Combinando o `in keyof` e o `extends keyof`