DEV Community

loading...

Menggunakan TypeScript Template Literal Type

Armedi
Penulis kode javascript dan typescript.
Originally published at Medium on ・2 min read

Template Literal Type telah tersedia sejak TypeScript versi 4.1 yang dirilis pada November 2020 lalu. Fitur ini sangat powerful, hingga ada yang membuat implementasi SQL hanya dengan TypeScript type annotation. Template Literal Type ini menjadi tipe data literal keempat di TypeScript setelah string, number, dan boolean.

Basic

Sintaks untuk template literal type sama persis dengan string template literal, tapi digunakan pada deklarasi tipe data.

Misalkan kamu membuat sebuah React component sebagai berikut:

Tipe data Position adalah string union yang merepresentasikan kombinasi posisi vertikal dan horizontal. Bayangkan kalau ada puluhan kombinasi yang harus ditulis satu per satu, tentu akan menjadi pekerjaan yang melelahkan. Dari contoh ini saja bisa dilihat ada cukup banyak pengulangan yang harus dituliskan untuk membuat kombinasi yang lengkap.

Contoh diatas Jika di-refactor dengan menggunakan template literal type, maka akan menjadi

Dengan menggunakan Template Literal Type kita bisa dengan mudah membuat kombinasi antara tipe VerticalPosition dengan HorizontalPosition menjadi tipe data Position.

Template Literal Inference

Fitur powerful dari template literal type datang dari kemampuan untuk meng-infer tipe data dan digabungkan dengan conditional type. Misalkan sebuah fungsi melakukan manipulasi terhadap string seperti mengubah dari snake_case menjadi camelCase. Fungsi ini menerima input berupa string dan menghasilkan output string.

Dengan menggunakan template literal type dan juga type inference, kita bisa membuat fungsi yang menghasilkan tipe data output yang lebih spesifik:

Lalu apa gunanya tipe data literal untuk output seperti diatas?

Misalnya kamu memiliki fungsi yang mengubah properti sebuah object dari snake_case menjadi camelCase

Pada contoh diatas, object camelCasedProperties yang merupakan output dari fungsi camelCaseProperties tidak type safe. Berbeda halnya jika menggunakan template literal type, maka output dari fungsi camelCaseProperties menjadi fully typed, dan code completion dari editor pun menjadi tersedia.

Daftar Referensi:

Discussion (0)

Forem Open with the Forem app