Menggunakan TypeScript Template Literal Type

Armedi
Armedi
May 3 · 3 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:

Hyperjump is an open-source-first company providing engineering excellence service. We aim to build and commercialize open-source tools to help companies streamline, simplify, and secure the most important aspects of their modern DevOps practices.

Hyperjump Tech

Maju bersama Teknologi Open-Source

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store