Executando verificação de segurança...
1
thayto
2 min de leitura ·

💡 TypeScript - Template Literal Types | Explicando com baixa qualidade e da pior forma possível (escrito em 10 minutos ou menos)

imagem te chamando de burro se você ainda não conhece o template literal types

Template Literal Types é um bglh insano que expande as possibilidades do que já era possível com o string literals + unions do TS, dá uma olhada!

Ele tem a mesma sintaxe do template literal string do JavaScript.

type Tchau = "tchau!"

type Salve = `Oi ${Tchau}`

com ele é possivel usar sua necessidade + imaginação pra fazer diversas coisas bacanas que vão agregar muito no seu projeto/type.

um exemplo bacana seria padronizar que todas as propriedades extras que adicionarmos à um type, necessitem de ter o prefixo data_ e o suffixo _prop, assim conseguimos criar um objeto com um padrão que vai facilitar o consumo de leitura para sabermos quais as propriedades extras que foram enviadas.

falar é fácil, mas cadê o exemplo? vamos começar criando um type EventData, ele é a nossa base para nosso objeto evento de evento.

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

ele já possui propriedades definidas, que não podem ser alteradas, mas agora precisamos enviar mais alguns campos relacionados aos fields que ele tem em cada step, poderiamos extender o type EventData e adicionar os campos, mas ao invés disso, bora usar o Template Literal Types!

type FormFields = {
  name: string
  age: number
}

type EventDataExtraProps<T> = `field_${string & keyof T}`
// aqui vamos modificar um pouco o EventData
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
}

parece complexo, mas é bem simples, em projetos grandes / libs, com um único utilitário desses, conseguimos fazer mágica nos auto_completes e na padronização do envio de determinadas propriedades!

espero que tenha aprendido algo, se não aprendeu, pelo menos leu até o final, tmj!

Meus links: https://thayto.com/linktree

Fonte: https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html

Carregando publicação patrocinada...
2
FelipePoter

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!

1
thayto
Autor
Autor

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!