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:
- https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html
- https://github.com/ghoullier/awesome-template-literal-types
- https://dev.to/phenomnominal/i-need-to-learn-about-typescript-template-literal-types-51po
- https://michalzalecki.com/typescript-template-literal-types/
- https://davidtimms.github.io/programming-languages/typescript/2020/11/20/exploring-template-literal-types-in-typescript-4.1.html
- https://effectivetypescript.com/2020/11/05/template-literal-types/
Top comments (0)