Executando verificação de segurança...
2

Olá caso você não tenha entendido, eu refiz a explicação para talvez você entender um pouco melhor!

Vou explicar o que são os Template Literal Types de uma forma bem simples para você entender.

Sabe quando a gente cria uma frase usando aspas? Por exemplo: "Oi, tudo bem?" Isso é uma string. Agora, com os Template Literal Types, podemos fazer coisas legais com essas frases.

Vou te mostrar um exemplo: temos duas palavras, "tchau!" e "Oi". Com os Template Literal Types, podemos juntar essas palavras para criar uma nova frase. Olha só como fica:

type Tchau = "tchau!"
type Salve = `Oi ${Tchau}

Agora a gente pode usar a palavra "Salve" e ela vai ser uma frase que combina "Oi" com "tchau!". Legal, né?

E tem mais! Podemos usar a nossa imaginação para criar coisas bem legais. Por exemplo, podemos criar um tipo que vai ajudar a padronizar as propriedades de um objeto. Vamos dizer que todas as propriedades extras que a gente adicionar no objeto precisam começar com "data_" e terminar com "_prop". Assim fica mais fácil de ler o código.

Vou te mostrar um exemplo de como ficaria:

    type EventData = {
  id: string
  name: string
  step: 'first_step' | 'second_step'
}

type FormFields = {
  name: string
  age: number
}

type EventDataExtraProps<T> = ´field_${string & keyof T}´

type EventData<T> = {
  id: string
  name: string
  step: 'first_step' | 'second_step'
} & Record<EventDataExtraProps<T>, any>

const event: EventData<FormFields> = {
  id: 'sextou?',
  name: 'thayto',
  step: 'first_step',
  field_name: 'full_name',
  field_age: 22
}

Nesse exemplo, a gente criou um tipo chamado EventData que tem algumas propriedades definidas. Mas também queremos adicionar mais campos relacionados aos campos que temos em cada etapa (step). Com os Template Literal Types, podemos fazer isso!

Espero que tenha entendido um pouquinho sobre os Template Literal Types. E mesmo se você não aprendeu tudo, pelo menos chegou até o final e isso já é ótimo! Se tiver mais dúvidas, estou aqui para ajudar!

Carregando publicação patrocinada...
1

Sensacional d+, muito obrigado pela contribuição meu amigo!

Seria interessante você adicionar as tipagens na parte do código, pra adicionar é só você colocar o ts após as cráses ```ts

TMJ!