10 Fungsi yang Mungkin Diperlukan dalam Proyek Typescript Kamu

Asa Muhammad Farhan

•

22 November 2023

•

903

Typescript telah menjadi pilihan utama bagi para pengembang yang mencari keamanan tipe dan penanganan error yang kuat. Dengan sintaks yang akrab seperti JavaScript namun dengan penambahan fitur tipe statis, TypeScript membawa kejelasan dan keandalan ke dalam proyek pengembangan software.

Mari kita jelajahi beberapa fungsi yang dapat memberikan kontribusi signifikan dalam menjaga proyek TypeScript Anda tetap terstruktur, mudah dipelihara, dan efisien.

Berikut adalah 10 fungsi yang mungkin diperlukan dalam proyek TypeScript-mu beserta deskripsi singkat, implementasi, dan contoh ekspektasi nilai kembalian pada setiap fungsi:

Fungsi Mengacak Array

Fungsi ini digunakan untuk mengacak elemen dalam sebuah array. Misalnya kamu memiliki 5 angka berurutan, namun kamu perlu untuk mengacak array tersebut.

Implementasi:
function shuffle<T>(array: T[]): T[] {
return array.sort(() => Math.random() - 0.5);
}

Contoh Ekspektasi Nilai Kembalian:
const shuffledArray = shuffle([1, 2, 3, 4, 5]);
console.log(shuffledArray); // Contoh hasil: [3, 1, 5, 2, 4]

Fungsi mengacak array ini bisa digunakan untuk mengacak urutan warna, mengacak urutan nomor punggung, atau mengacak apapun di semua bentuk array. Penasaran ingin mencoba? Salin kode ini dan coba implementasikan dalam proyek-mu!

Fungsi Membulatkan Angka

Fungsi ini digunakan untuk membulatkan nilai number dengan mengambil jumlah digit tertentu. Jika kamu memiliki angka 31,14159 dan ingin kamu bulatkan 2 digit di belakang koma, maka gunakan kode dibawah ini.

Implementasi:
function roundedNumber(value: number, digits: number = 1): number {
return Math.round((value ?? 0) * Math.pow(10, digits)) / Math.pow(10, digits);
}

Contoh Ekspektasi Nilai Kembalian:
const roundedValue = roundedNumber(3.14159, 2);
console.log(roundedValue); // Contoh hasil: 3.14

Alternatifnya, kamu bisa menggunakan Number.toFixed() untuk menampilkan angka dengan jumlah digit tertentu di belakang koma. Namun, Number.toFixed() memberikan kembalian bertipe string (teks) sehingga di kondisi tertentu Number.toFixed() ini tidak cocok.

Fungsi Memberikan Separator Pada Number

Fungsi ini memberikan separator pada setiap 3 digit angka untuk mengubahnya menjadi string. Ketika kamu mau menampilkan angka yang besar, kamu perlu memberikan separator titik agar mempermudah user untuk membaca angka kamu. Dengan itu, gunakanlah fungsi ini untuk memberikan separator pada angka-mu sebelum ditampilkan ke user!

Implementasi:
function numberWithSeparator(x: number): string {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}

Contoh Ekspektasi Nilai Kembalian:
const formattedNumber = numberWithSeparator(1000000);
console.log(formattedNumber); // Contoh hasil: "1.000.000"

Fungsi Menghilangkan Separator Pada String Angka

Fungsi ini menghapus semua separator pada string angka. Setelah pada nomor 3 kita memberikan separator, sekarang penulis juga memberikan fungsi untuk kamu menghilangkan separator tersebut, dengan catatan nilai kembaliannya adalah string yaa.

Implementasi:
function releaseSeparatorFromString(stringWithSeparator: string): string {
return stringWithSeparator.replace(/\D+/g, "");
}

Contoh Ekspektasi Nilai Kembalian:
const numericString = releaseSeparatorFromString("1.000.000");
console.log(numericString); // Contoh hasil: "1000000"

Fungsi memisahkan camel case

Fungsi ini mengubah camel case menjadi bentuk teks terpisah. Camel case sering digunakan untuk memberikan label tipe pada database. Misalnya, tipe sebuah objek pertanyaan pada database adalah “multipleChoiceQuestion”, sedangkan Front-End harus menampilkan tipe tersebut pada user dengan tulisan yang mudah dibaca.

Implementasi:
function separateCamelCase(string: string): string {
return string.replace(/([a-z])([A-Z])/g, '$1 $2').toLowerCase().trim();
}

Contoh Ekspektasi Nilai Kembalian:
const separatedCamelCase = separateCamelCase("multipleChoiceQuestion");
console.log(separatedCamelCase); // Contoh hasil: "multiple choice Question"

Fungsi Buka Tab Baru jika Window.open Tidak Bekerja

Dalam beberapa kasus pada beberapa browser, terkadang membuka jendela baru menggunakan window.open tidak bekerja. Sehingga fungsi di bawah ini bisa menangani jika tidak dapat membuka tab baru menggunakan window.open.

Implementasi:
function windowOpen(link: string, target: string = "_blank"): void {
const newWindow = window.open(link, target);
if (newWindow) {
newWindow.focus();
} else {
window.location.href = link;
}
}

Contoh Ekspektasi Nilai Kembalian:
windowOpen("https://www.example.com");
// Membuka tab baru ke "https://www.example.com" atau mengarahkan tab saat ini ke URL tersebut.

Fungsi Mengubah Setiap Isi Array Menjadi Unik
Fungsi ini menghasilkan array dengan elemen-elemen unik dari array input. Terkadang, kita memiliki array yang berisi banyak data dan kamu tidak ingin menampilkan data-data yang double. Maka, gunakanlah fungsi di bawah ini.

Implementasi:

function getUniqueArray<T>(array: T[]): T[] {
const uniqueSet = new Set<T>(array);
return Array.from(uniqueSet);
}

Contoh Ekspektasi Nilai Kembalian:

const uniqueArray = getUniqueArray([1, 2, 2, 3, 4, 4, 5]);
console.log(uniqueArray); // Contoh hasil: [1, 2, 3, 4, 5]

Fungsi Menghilangkan Null dan Undefined pada Array
Tipe data null atau undefined di dalam array bisa jadi menjadi masalah kamu dalam mengelola sebuah array. Gunakan fungsi di bawah ini untuk menangani hal tersebut. Fungsi ini mengembalikan array baru tanpa elemen-elemen null atau undefined.

Implementasi:
function removeNullFromArray<T>(array: (T | null | undefined)[]): T[] {
return array.filter((a): a is T => a !== null && a !== undefined);
}

Contoh Ekspektasi Nilai Kembalian:
const filteredArray = removeNullFromArray([1, null, 2, undefined, 3]);
console.log(filteredArray); // Contoh hasil: [1, 2, 3]

Fungsi untuk Replace Semua Substring dari String yang Terkait
Fungsi ini menggantikan semua kemunculan substring tertentu dengan string pengganti.

Implementasi:
function replaceAllString(value: string, replaceWord: string, replaceWith: string): string {
const regex = new RegExp(replaceWord, 'g');
return value.replace(regex, replaceWith);
}

Contoh Ekspektasi Nilai Kembalian:
const replacedString = replaceAllString("Hello, World! Yes, you are my World!", "World", "Universe");
console.log(replacedString); // Contoh hasil: "Hello, Universe! Yes, you are my Universe!"

Fungsi untuk Mengkonversi Array Menjadi String Teks Bahasa Indonesia
Ketika kita memiliki array berisi nama-nama buah dan ingin menampilkannya sebagai kalimat Bahasa Indonesia, maka kamu memerlukan fungsi ini untuk mengkonversikan array menjadi sebuah string teks Bahasa Indonesia ini! Fungsi ini mengonversi array kata-kata menjadi string teks bahasa Indonesia dengan pemisah akhir opsional (defaultnya menggunakan ‘dan’).

Implementasi:
function arrayToLocaleSentence(array: string[], endDivider = "dan"): string {
if (array.length === 1) return array[0];
return `${array.slice(0, -1).join(", ")} ${endDivider} ${array[array.length - 1]}`;
}

Contoh Ekspektasi Nilai Kembalian:
const localizedSentence = arrayToLocaleSentence(["apel", "jeruk", "mangga"], "atau");
console.log(localizedSentence); // Contoh hasil: "apel, jeruk, atau mangga"

Kesimpulan
Jika Anda ingin menjelajahi lebih lanjut mengenai coding, Anda bisa mengunjungi dibimbing ada di situs kami. Meningkatkan proyek TypeScript Anda dengan menggunakan fungsi-fungsi yang tepat dapat membuat pengembangan lebih lancar dan efisien.

Sementara itu, mengikuti Bootcamp Frontend Web Developer adalah langkah besar menuju transformasi profesional dalam dunia coding. Dengan kombinasi ini, Anda dapat mengasah keterampilan Anda dan membuka pintu menuju kesuksesan dalam karir pengembangan perangkat lunak. Selamat belajar dan berkembang!