Merge pull request #1281 from Namchee/id-js-functions

docs(i18n-id): Provide Indonesian translation for section JavaScript/Functions With JavaScript

Author: github-actions[bot]

packages/playground-examples/copy/id/JavaScript/Functions with JavaScript/Function Chaining.ts

@@ -0,0 +1,84 @@
+//// { order: 2, compiler: { esModuleInterop: true } }
+
+// Fungsi berantai merupakan sebuah pola pemrograman 
+// yang umum digunakan di JavaScript, yang dapat membuat
+// kode program Anda lebih terfokus karena nilai penengah
+// yang lebih sedikit dan lebih mudah dibaca karena kualitas
+// penyarangan yang dimiliki fungsi berantai.
+
+// Sebuah API yang sangat umum yang bekerja menggunakan
+// fungsi berantai adalah jQuery. Di bawah ini merupakan
+// sebuah contoh penggunaan jQuery dengan tipe data
+// dari DefinitelyTyped:
+
+import $ from "jquery";
+
+// Berikut merupakan sebuah contoh penggunaan API jQuery:
+
+$("#navigasi").css("background", "red").height(300).fadeIn(200);
+
+// Jika Anda menambahkan sebuah titik pada baris kode di atas,
+// Anda akan melihat daftar fungsi yang panjang. Pola pemrograman ini
+// mudah diimplementasikan di JavaScript. Kuncinya adalah
+// memastikan bahwa Anda selalu mengembalikan objek yang sama.
+
+// Berikut merupakan contoh sebuah API yang membentuk
+// sebuah rantai API. Kuncinya adalah mempunya sebuah
+// fungsi luar yang menyimpan keadaan internal, dan
+// sebuah objek yang mengekspos API yang selalu dikembalikan.
+
+const jumlahkanDuaBilangan = (mulai = 1) => {
+  let n = mulai;
+
+  const api = {
+    // Implementasikan seluruh fungsi pada API Anda.
+    tambah(inc: number = 1) {
+      n += inc;
+      return api;
+    },
+
+    cetak() {
+      console.log(n);
+      return api;
+    },
+  };
+  return api;
+};
+
+// Penulisan tersebut memiliki gaya API yang sama
+// seperti yang sudah kita lihat pada jQuery:
+
+jumlahkanDuaBilangan(1).tambah(3).tambah().cetak().tambah(1);
+
+// Berikut merupakan sebuah contoh implementasi fungsi berantai]
+// menggunakan kelas:
+
+class TambahBilangan {
+  private n: number;
+
+  constructor(mulai = 0) {
+    this.n = mulai;
+  }
+
+  public tambah(inc = 1) {
+    this.n = this.n + inc;
+    return this;
+  }
+
+  public cetak() {
+    console.log(this.n);
+    return this;
+  }
+}
+
+// Berikut merupakan cara penggunaan kelas tersebut:
+
+new TambahBilangan(2).tambah(3).tambah().cetak().tambah(1);
+
+// Contoh-contoh pada bagian ini menggunakan fitur
+// penyimpulan tipe data TypeScript untuk menyediakan
+// perkakas TypeScript pada pola pemrograman JavaScript.
+
+// For more examples on this:
+//
+//  - example:code-flow

packages/playground-examples/copy/id/JavaScript/Functions with JavaScript/Generic Functions.ts

@@ -0,0 +1,120 @@
+// Tipe data generik menyediakan sebuah cara untuk menggunakan tipe
+// data sebagai sebuah variabel dalam tipe data lain, yaitu
+// meta.
+
+// Kami akan berusaha membuat contoh ini sesederhana mungkin,
+// Anda dapat melakukan banyak hal dengan tipe data generik dan 
+// kemungkinan suatu saat Anda akan melihat kode program yang
+// sangat rumit yang memanfaatkan tipe data generik - namun hal
+// tersebut tidak berarti bahwa tipe data generik merupakan sesuatu
+// yang rumit.
+
+// Mari kita mulai dengan sebuah contoh dimana kita akan
+// membungkus sebuah objek input dalam sebuah _array_. Kita
+// hanya akan mengamati satu variabel pada contoh ini,
+// yaitu tipe data yang diteruskan:
+
+function bungkusDalamArray<Tipe>(input: Tipe): Tipe[] {
+  return [input];
+}
+
+// Catatan: biasanya kita melihat `Tipe` ditulis sebagai `T`.
+// Hal  tersebut merupakan kebiasaan yang mirip dengan bagaimana
+// orang menggunakan `i` dalam sebuah perulangan `for` untuk
+// merepresentasikan indeks. `T` biasanya merepresentasikan `Tipe`,
+// sehingga kami akan menuliskan dengan lengkap demi
+// kejelasan kode program.
+
+// Fungsi yang kita buat akan menggunakan fitur penyimpulan
+// tipe data supaya dapat menjamin tipe data yang
+// diteruskan pada fungsi akan selalu sama dengan tipe
+// data yang dikembalikan oleh fungsi tersebut (walaupun
+// tipe data tersebut akan dibungkus dalam sebuah _array_). 
+
+const arrayString = bungkusDalamArray("hello generics");
+const arrayBilangan = bungkusDalamArray(123);
+
+// Kita dapat membuktikan bahwa jaminan tersebut
+// bekerja sesuai keinginan dengan memeriksa apakah
+// kita dapat menetapkan sebuah _array string_ pada sebuah
+// fungsi yang seharusnya merupakan sebuah _array_ objek: 
+const bukanArrayString: string[] = bungkusDalamArray({});
+
+// Anda juga dapat melewati penyimpulan tipe data generik
+// dengan menambahkan tipe data:
+const arrayStringKedua = bungkusDalamArray<string>("");
+
+// `bungkusDalamArray` memperbolehkan penggunaan semua
+// tipe data, namun ada beberapa masalah dimana Anda ingin
+// bahwa hanya beberapa tipe data dan turunannya yang diperbolehkan.
+// Untuk mengatasi masalah tersebut, Anda dapat menetapkan
+// bahwa tipe data generik harus merupakan turunan dari tipe
+// data tertentu.
+
+interface Drawable {
+  gambar: () => void;
+}
+
+// Fungsi ini menerima sekumpulan objek yang memiliki
+// fungsi untuk menggambar pada layar.
+function gambarPadaLayar<Tipe extends Drawable>(input: Tipe[]) {
+  input.forEach((i) => i.gambar());
+}
+
+const objekDenganGambar = [{ gambar: () => { } }, { gambar: () => { } }];
+gambarPadaLayar(objekDenganGambar);
+
+// Fungsi tersebut akan gagal dipanggil
+// apabila salah satu objek tidak memiliki
+// fungsi `gambar`:
+
+gambarPadaLayar([{}, { gambar: () => { } }]);
+
+// Tipe data generik akan mulai terlihat rumit ketika Anda
+// memiliki banyak variabel. Berikut merupakan sebuah
+// contoh sebuah fungsi _caching_ yang memperbolehkan
+// Anda untuk memiliki sekumpulan tipe data input dan
+// _cache_.
+
+interface CacheHost {
+  simpan: (a: any) => void;
+}
+
+function simpanObjekDalamCache<Tipe, Cache extends CacheHost>(obj: Tipe, cache: Cache): Cache {
+  cache.simpan(obj);
+  return cache;
+}
+
+// Contoh tersebut merupakan contoh yang sama seperti
+// contoh sebelumnya, namun memiliki sebuah parameter tambahan.
+// Catatan: supaya fungsi tersebut dapat dijalankan, kita harus
+// menggunakan tipe data `any`. Hal tersebut dapat diatasi
+// menggunakan antar muka generik.
+
+interface CacheHostGenerik<TipeKonten> {
+  simpan: (a: TipeKonten) => void;
+}
+
+// Sekarang ketika `CacheHostGeneric` digunakan, Anda
+// harus menetapkan `TipeKonten`.
+
+function simpanObjekBertipeDataPadaCache<Type, Cache extends CacheHostGenerik<Type>>(obj: Type, cache: Cache): Cache {
+  cache.simpan(obj);
+  return cache;
+}
+
+// Contoh-contoh di atas sudah menjelaskan sintaks tipe data generik
+// secara sekilas. Namun, tipe data generik mampu memastikan bahwa
+// kode program yang Anda buat lebih aman. Hal tersebut merupakan
+// kompromi, bahwa Anda memiliki lebih banyak pengetahuan sekarang.
+// Ketika Anda menyediakan API untuk orang lain, tipe data generik
+// menyediakan sebuah cara yang fleksibel yang memperbolehkan
+// orang lain untuk menggunakan tipe data mereka sendiri
+// dengan dukungan fitur penyimpulan tipe data.
+
+// Anda dapat melihat contoh-contoh lain tentang tipe data generik
+// dengan kelas dan antar muka melalui: 
+//
+// example:advanced-classes
+// example:typescript-with-react
+// https://www.typescriptlang.org/docs/handbook/generics.html

packages/playground-examples/copy/id/JavaScript/Functions with JavaScript/Typing Functions.ts

@@ -0,0 +1,150 @@
+// Fitur penyimpulan tipe data yang dimiliki TypeScript
+// dapat meningkatkan kemampuan Anda secara drastis, namun
+// terdapat banyak cara lain untuk mendokumentasikan
+// fungsi Anda dengan lebih rinci. 
+
+// Salah satu titik awal yang baik adalah parameter opsional,
+// yang merupakan sebuah cara untuk memberitahu orang lain
+// bahwa Anda tidak wajib untuk meneruskan parameter.
+
+let i = 0;
+const tambahkanIndeks = (nilai?: number) => {
+  i += nilai === undefined ? 1 : nilai;
+};
+
+// Fungsi tersebut dapat dipanggil dengan cara:
+
+tambahkanIndeks();
+tambahkanIndeks(0);
+tambahkanIndeks(3);
+
+// Anda dapat menjadikan fungsi sebagai parameter, dimana
+// hal tersebut menyediakan fitur penyimpulan tipe data
+// ketika Anda menulis fungsi tersebut.
+
+const callbackDenganIndeks = (callback: (i: number) => void) => {
+  callback(i);
+};
+
+// Menyisipkan antar muka fungsi dapat menyebabkan kode program
+// sulit dibaca. Menggunakan fitur alias pada tipe data akan
+// memperbolehkan Anda memberi nama pada parameter fungsi yang diteruskan.
+
+type callbackBilangan = (i: number) => void;
+const callbackDenganIndeks2 = (callback: callbackBilangan) => {
+  callback(i);
+};
+
+// Fungsi tersebut dapat dipanggil seperti berikut:
+
+callbackDenganIndeks(index => {
+  console.log(index);
+});
+
+// Dengan menyorot indeks di atas, Anda dapat melihat bagaimana
+// TypeScript telah menyimpulkan indeks sebagai angka dengan tepat.
+
+// Penyimpulan tipe data TypeScript juga dapat dijalankan ketika
+// meneruskan sebuah fungsi sebagai sebuah _reference_. Untuk
+// menunjukkan hal tersebut, kita akan menggunakan sebuah fungsi
+// yang mengubah sebuah angka menjadi sebuah _string_:
+
+const angkaKeString = (n: number) => {
+  return n.toString();
+};
+
+// Fungsi tersebut dapat digunakan pada `map` dalam sebuah
+// _array_ untuk mengubah seluruh angka menjadi sebuah sebuah
+// _string_. Jika Anda menyorot `angkaSebagaiString` di bawah ini,
+// Anda dapat melihat tipe data yang diharapkan.
+const angkaSebagaiString = [1, 4, 6, 10].map(i => angkaKeString(i));
+
+// Kita dapat menyingkat penulisan kode program dengan
+// langsung meneruskan fungsi dan mendapatkan hasil yang sama
+// namun dengan kode program yang lebih terfokus:
+const angkaSebagaiStringTerse = [1, 4, 6, 10].map(angkaKeString);
+
+// Anda bisa saja memiliki fungsi yang mampu menerima banyak
+// tipe data sekaligus, namun Anda hanya tertarik pada beberapa
+// atribut. Kasus tersebut merupakan contoh kasus yang berguna
+// untuk _indexed signatures_ pada tipe data. Tipe data di bawah
+// ini mendeklarasikan bahwa fungsi ini dapat dipanggil
+// menggunakan objek apapun selama objek tersebut memiliki
+// atribut `nama`:
+
+interface SeluruhObjekBernama {
+  nama: string;
+  [key: string]: any;
+}
+
+const cetakNama = (input: SeluruhObjekBernama) => { };
+
+cetakNama({ nama: "joey" });
+cetakNama({ nama: "joey", umur: 23 });
+
+// Apabila Anda ingin mempelajari mengenai _index-signatures_
+// kami merekomendasikan:
+//
+// https://www.typescriptlang.org/docs/handbook/interfaces.html#excess-property-checks
+// https://basarat.gitbooks.io/typescript/docs/types/index-signatures.html
+
+// Anda juga dapat memperbolehkan perilaku TypeScript
+// seperti ini dimanapun dengan menyetel `suppressExcessPropertyError`
+// pada `tsconfig` - namun, orang lain tidak dapat mengetahui
+// hal tersebut apabila API ini dimatikan.
+
+// Fungsi dalam JavaScript dapat menerima berbagai parameter.
+// Terdapat dua cara yang umum digunakan untuk mendeskripsikan
+// hal tersebut: tipe data gabungan untuk kembalian / masukan, dan
+// _function overload_.
+
+// Menggunakan tipe data gabungan pada parameter Anda merupakan
+// pilihan yang masuk akal apabila hanya ada satu atau dua perubahan
+// dan dokumentasi kode program tidak perlu diubah apabila fungsi
+// berubah.
+
+const fungsiBooleanAtauAngka = (input: boolean | number) => { };
+
+fungsiBooleanAtauAngka(true);
+fungsiBooleanAtauAngka(23);
+
+// Namun, _function overload_ menyediakan sintaks
+// yang lebih luas untuk parameter dan tipe data kembalian.
+interface fungsiBooleanAtauAngkaAtauString {
+  /** Menerima sebuah boolean, mengembalikan sebuah boolean */
+  (input: boolean): boolean;
+  /** Menerima sebuah angka, mengembalikan sebuah angka */
+  (input: number): number;
+  /** Menerima sebuah _string_, mengembalikan sebuah _string_ */
+  (input: string): boolean;
+}
+
+// Apabila ini merupakan kali pertama Anda melihat `declare`,
+// `declare` memperbolehkan Anda untuk memberi tahu TypeScript
+// bahwa sesuatu memang ada walaupun benda tersebut tidak
+// ada pada waktu eksekusi berkas ini. Hal tersebut berguna
+// untuk memetakan kode program yang memiliki efek samping
+// namun sangat berguna pada saat demonstrasi program
+// yang membutuhkan banyak kode program untuk mengimplementasikannya.
+
+declare const fungsiBooleanAtauAngkaAtauString: fungsiBooleanAtauAngkaAtauString;
+
+const nilaiBoolean = fungsiBooleanAtauAngkaAtauString(true);
+const nilaiAngka = fungsiBooleanAtauAngkaAtauString(12);
+const nilaiBoolean2 = fungsiBooleanAtauAngkaAtauString("string");
+
+// Apabila Anda menyorot nilai-nilai di atas dan fungsinya, Anda
+// dapat melihat dokumentasi yang tepat beserta dengan 
+// tipe data kembaliannya.
+
+// Menggunakan _function overload_ dapat meningkatkan kemampuan
+// Anda secara drastis, namun ada perkakas lain yang dapat
+// digunakan untuk tipe data masukan dan kembalian yang berbeda,
+// yaitu tipe data generik.
+
+// Contoh ini menyediakan sebuah cara bagi Anda untuk
+// menetapkan tipe data sebagai variabel sementara
+// pada deklarasi tipe data. 
+
+// example:generic-functions
+// example:function-chaining