Menggunakan TypeScript Template Literal Type
Tags: typescript
Published: 2021-05-12 06:22:41

---
title: Menggunakan TypeScript Template Literal Type
published: true
date: 2021-05-03 07:56:48 UTC
tags: typescript
canonical_url: https://medium.com/hyperjump-tech/menggunakan-typescript-template-literal-type-eb7513a031a9
---

_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](https://github.com/codemix/ts-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:

![](https://cdn-images-1.medium.com/max/1024/1*h1zb4QfF0ajwpjDYI7o5tA.png)

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

![](https://cdn-images-1.medium.com/max/1024/1*jm6zeYLpeT_A2tyVdgT3FQ.png)

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_.

![](https://cdn-images-1.medium.com/max/1024/1*GeSvIIgSfPiK65SDPT0xVA.png)

Dengan menggunakan _template literal type_ dan juga _type inference_, kita bisa membuat fungsi yang menghasilkan tipe data _output_ yang lebih spesifik:

![](https://cdn-images-1.medium.com/max/1024/1*5qTgfqtVStlceEe-ITyvqg.png)

Lalu apa gunanya tipe data literal untuk _output_ seperti diatas?

Misalnya kamu memiliki fungsi yang mengubah properti sebuah object dari _snake\_case_ menjadi _camelCase_

![](https://cdn-images-1.medium.com/max/1024/1*C-4z_lKP0aFkrOOWKG3QDQ.png)

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.

![](https://cdn-images-1.medium.com/max/1024/1*_wMeQRRlj8vBOm2TvtMZMw.png)

Daftar Referensi:

- [https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html](https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html)
- [https://github.com/ghoullier/awesome-template-literal-types](https://github.com/ghoullier/awesome-template-literal-types)
- [https://dev.to/phenomnominal/i-need-to-learn-about-typescript-template-literal-types-51po](https://dev.to/phenomnominal/i-need-to-learn-about-typescript-template-literal-types-51po)
- [https://michalzalecki.com/typescript-template-literal-types/](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://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/](https://effectivetypescript.com/2020/11/05/template-literal-types/)