|
1 |
| -// TypeScript's inference can get you very far, but there |
2 |
| -// are lots of extra ways to provide a richer way to document |
3 |
| -// the shape of your functions. |
| 1 | +// Fitur penyimpulan tipe data yang dimiliki TypeScript |
| 2 | +// dapat meningkatkan kemampuan Anda secara drastis, namun |
| 3 | +// terdapat banyak cara lain untuk mendokumentasikan |
| 4 | +// fungsi Anda dengan lebih rinci. |
4 | 5 |
|
5 |
| -// A good first place is to look at optional params, which |
6 |
| -// is a way of letting others know you can skip params. |
| 6 | +// Salah satu titik awal yang baik adalah parameter opsional, |
| 7 | +// yang merupakan sebuah cara untuk memberitahu orang lain |
| 8 | +// bahwa Anda tidak wajib untuk meneruskan parameter. |
7 | 9 |
|
8 | 10 | let i = 0;
|
9 |
| -const incrementIndex = (value?: number) => { |
10 |
| - i += value === undefined ? 1 : value; |
| 11 | +const tambahkanIndeks = (nilai?: number) => { |
| 12 | + i += nilai === undefined ? 1 : nilai; |
11 | 13 | };
|
12 | 14 |
|
13 |
| -// This function can be called like: |
| 15 | +// Fungsi tersebut dapat dipanggil dengan cara: |
14 | 16 |
|
15 |
| -incrementIndex(); |
16 |
| -incrementIndex(0); |
17 |
| -incrementIndex(3); |
| 17 | +tambahkanIndeks(); |
| 18 | +tambahkanIndeks(0); |
| 19 | +tambahkanIndeks(3); |
18 | 20 |
|
19 |
| -// You can type parameters as functions, which provides |
20 |
| -// type inference when you write the functions. |
| 21 | +// Anda dapat menjadikan fungsi sebagai parameter, dimana |
| 22 | +// hal tersebut menyediakan fitur penyimpulan tipe data |
| 23 | +// ketika Anda menulis fungsi tersebut. |
21 | 24 |
|
22 |
| -const callbackWithIndex = (callback: (i: number) => void) => { |
| 25 | +const callbackDenganIndeks = (callback: (i: number) => void) => { |
23 | 26 | callback(i);
|
24 | 27 | };
|
25 | 28 |
|
26 |
| -// Embedding function interfaces can get a bit hard to read |
27 |
| -// with all the arrows. Using a type alias will let you name |
28 |
| -// the function param. |
| 29 | +// Menyisipkan antar muka fungsi dapat menyebabkan kode program |
| 30 | +// sulit dibaca. Menggunakan fitur alias pada tipe data akan |
| 31 | +// memperbolehkan Anda memberi nama pada parameter fungsi yang diteruskan. |
29 | 32 |
|
30 |
| -type NumberCallback = (i: number) => void; |
31 |
| -const callbackWithIndex2 = (callback: NumberCallback) => { |
| 33 | +type callbackBilangan = (i: number) => void; |
| 34 | +const callbackDenganIndeks2 = (callback: callbackBilangan) => { |
32 | 35 | callback(i);
|
33 | 36 | };
|
34 | 37 |
|
35 |
| -// These can be called like: |
| 38 | +// Fungsi tersebut dapat dipanggil seperti berikut: |
36 | 39 |
|
37 |
| -callbackWithIndex(index => { |
| 40 | +callbackDenganIndeks(index => { |
38 | 41 | console.log(index);
|
39 | 42 | });
|
40 | 43 |
|
41 |
| -// By hovering on index above, you can see how TypeScript |
42 |
| -// has inferred the index to be a number correctly. |
| 44 | +// Dengan menyorot indeks di atas, Anda dapat melihat bagaimana |
| 45 | +// TypeScript telah menyimpulkan indeks sebagai angka dengan tepat. |
43 | 46 |
|
44 |
| -// TypeScript inference can work when passing a function |
45 |
| -// as an instance reference too. To show this, we'll use |
46 |
| -// a function which changed a number into string: |
| 47 | +// Penyimpulan tipe data TypeScript juga dapat dijalankan ketika |
| 48 | +// meneruskan sebuah fungsi sebagai sebuah _reference_. Untuk |
| 49 | +// menunjukkan hal tersebut, kita akan menggunakan sebuah fungsi |
| 50 | +// yang mengubah sebuah angka menjadi sebuah _string_: |
47 | 51 |
|
48 |
| -const numberToString = (n: number) => { |
| 52 | +const angkaKeString = (n: number) => { |
49 | 53 | return n.toString();
|
50 | 54 | };
|
51 | 55 |
|
52 |
| -// This can be used in a function like map on an array |
53 |
| -// to convert all numbers into a string, if you hover |
54 |
| -// on stringedNumbers below you can see the expected types. |
55 |
| -const stringedNumbers = [1, 4, 6, 10].map(i => numberToString(i)); |
56 |
| - |
57 |
| -// We can use shorthand to have the function passed directly |
58 |
| -// and get the same results with more focused code: |
59 |
| -const stringedNumbersTerse = [1, 4, 6, 10].map(numberToString); |
60 |
| - |
61 |
| -// You may have functions which could accept a lot of types |
62 |
| -// but you are only interested in a few properties. This is |
63 |
| -// a useful case for indexed signatures in types. The |
64 |
| -// following type declares that this function is OK to use |
65 |
| -// any object so long as it includes the property name: |
66 |
| - |
67 |
| -interface AnyObjectButMustHaveName { |
68 |
| - name: string; |
| 56 | +// Fungsi tersebut dapat digunakan pada `map` dalam sebuah |
| 57 | +// _array_ untuk mengubah seluruh angka menjadi sebuah sebuah |
| 58 | +// _string_. Jika Anda menyorot `angkaSebagaiString` di bawah ini, |
| 59 | +// Anda dapat melihat tipe data yang diharapkan. |
| 60 | +const angkaSebagaiString = [1, 4, 6, 10].map(i => angkaKeString(i)); |
| 61 | + |
| 62 | +// Kita dapat menyingkat penulisan kode program dengan |
| 63 | +// langsung meneruskan fungsi dan mendapatkan hasil yang sama |
| 64 | +// namun dengan kode program yang lebih terfokus: |
| 65 | +const angkaSebagaiStringTerse = [1, 4, 6, 10].map(angkaKeString); |
| 66 | + |
| 67 | +// Anda bisa saja memiliki fungsi yang mampu menerima banyak |
| 68 | +// tipe data sekaligus, namun Anda hanya tertarik pada beberapa |
| 69 | +// atribut. Kasus tersebut merupakan contoh kasus yang berguna |
| 70 | +// untuk _indexed signatures_ pada tipe data. Tipe data di bawah |
| 71 | +// ini mendeklarasikan bahwa fungsi ini dapat dipanggil |
| 72 | +// menggunakan objek apapun selama objek tersebut memiliki |
| 73 | +// atribut `nama`: |
| 74 | + |
| 75 | +interface SeluruhObjekBernama { |
| 76 | + nama: string; |
69 | 77 | [key: string]: any;
|
70 | 78 | }
|
71 | 79 |
|
72 |
| -const printFormattedName = (input: AnyObjectButMustHaveName) => {}; |
| 80 | +const cetakNama = (input: SeluruhObjekBernama) => { }; |
73 | 81 |
|
74 |
| -printFormattedName({ name: "joey" }); |
75 |
| -printFormattedName({ name: "joey", age: 23 }); |
| 82 | +cetakNama({ nama: "joey" }); |
| 83 | +cetakNama({ nama: "joey", umur: 23 }); |
76 | 84 |
|
77 |
| -// If you'd like to learn more about index-signatures |
78 |
| -// we recommend: |
| 85 | +// Apabila Anda ingin mempelajari mengenai _index-signatures_ |
| 86 | +// kami merekomendasikan: |
79 | 87 | //
|
80 | 88 | // https://www.typescriptlang.org/docs/handbook/interfaces.html#excess-property-checks
|
81 | 89 | // https://basarat.gitbooks.io/typescript/docs/types/index-signatures.html
|
82 | 90 |
|
83 |
| -// You can also allow this kind of behavior everywhere |
84 |
| -// via the tsconfig flag suppressExcessPropertyErrors - |
85 |
| -// however, you can't know if others using your API have |
86 |
| -// this set to off. |
87 |
| - |
88 |
| -// Functions in JavaScript can accept different sets of params. |
89 |
| -// There are two common patterns for describing these: union |
90 |
| -// types for parameters/return, and function overloads. |
| 91 | +// Anda juga dapat memperbolehkan perilaku TypeScript |
| 92 | +// seperti ini dimanapun dengan menyetel `suppressExcessPropertyError` |
| 93 | +// pada `tsconfig` - namun, orang lain tidak dapat mengetahui |
| 94 | +// hal tersebut apabila API ini dimatikan. |
91 | 95 |
|
92 |
| -// Using union types in your parameters makes sense if there |
93 |
| -// are only one or two changes and documentation does not need |
94 |
| -// to change between functions. |
| 96 | +// Fungsi dalam JavaScript dapat menerima berbagai parameter. |
| 97 | +// Terdapat dua cara yang umum digunakan untuk mendeskripsikan |
| 98 | +// hal tersebut: tipe data gabungan untuk kembalian / masukan, dan |
| 99 | +// _function overload_. |
95 | 100 |
|
96 |
| -const boolOrNumberFunction = (input: boolean | number) => {}; |
| 101 | +// Menggunakan tipe data gabungan pada parameter Anda merupakan |
| 102 | +// pilihan yang masuk akal apabila hanya ada satu atau dua perubahan |
| 103 | +// dan dokumentasi kode program tidak perlu diubah apabila fungsi |
| 104 | +// berubah. |
97 | 105 |
|
98 |
| -boolOrNumberFunction(true); |
99 |
| -boolOrNumberFunction(23); |
| 106 | +const fungsiBooleanAtauAngka = (input: boolean | number) => { }; |
100 | 107 |
|
101 |
| -// Function overloads on the other hand offer a much richer |
102 |
| -// syntax for the parameters and return types. |
| 108 | +fungsiBooleanAtauAngka(true); |
| 109 | +fungsiBooleanAtauAngka(23); |
103 | 110 |
|
104 |
| -interface BoolOrNumberOrStringFunction { |
105 |
| - /** Takes a bool, returns a bool */ |
| 111 | +// Namun, _function overload_ menyediakan sintaks |
| 112 | +// yang lebih luas untuk parameter dan tipe data kembalian. |
| 113 | +interface fungsiBooleanAtauAngkaAtauString { |
| 114 | + /** Menerima sebuah boolean, mengembalikan sebuah boolean */ |
106 | 115 | (input: boolean): boolean;
|
107 |
| - /** Takes a number, returns a number */ |
| 116 | + /** Menerima sebuah angka, mengembalikan sebuah angka */ |
108 | 117 | (input: number): number;
|
109 |
| - /** Takes a string, returns a bool */ |
| 118 | + /** Menerima sebuah _string_, mengembalikan sebuah _string_ */ |
110 | 119 | (input: string): boolean;
|
111 | 120 | }
|
112 | 121 |
|
113 |
| -// If this is your first time seeing declare, it allows you |
114 |
| -// to tell TypeScript something exists even if it doesn't |
115 |
| -// exist in the runtime in this file. Useful for mapping |
116 |
| -// code with side-effects but extremely useful for demos |
117 |
| -// where making the implementation would be a lot of code. |
| 122 | +// Apabila ini merupakan kali pertama Anda melihat `declare`, |
| 123 | +// `declare` memperbolehkan Anda untuk memberi tahu TypeScript |
| 124 | +// bahwa sesuatu memang ada walaupun benda tersebut tidak |
| 125 | +// ada pada waktu eksekusi berkas ini. Hal tersebut berguna |
| 126 | +// untuk memetakan kode program yang memiliki efek samping |
| 127 | +// namun sangat berguna pada saat demonstrasi program |
| 128 | +// yang membutuhkan banyak kode program untuk mengimplementasikannya. |
118 | 129 |
|
119 |
| -declare const boolOrNumberOrStringFunction: BoolOrNumberOrStringFunction; |
| 130 | +declare const fungsiBooleanAtauAngkaAtauString: fungsiBooleanAtauAngkaAtauString; |
120 | 131 |
|
121 |
| -const boolValue = boolOrNumberOrStringFunction(true); |
122 |
| -const numberValue = boolOrNumberOrStringFunction(12); |
123 |
| -const boolValue2 = boolOrNumberOrStringFunction("string"); |
| 132 | +const nilaiBoolean = fungsiBooleanAtauAngkaAtauString(true); |
| 133 | +const nilaiAngka = fungsiBooleanAtauAngkaAtauString(12); |
| 134 | +const nilaiBoolean2 = fungsiBooleanAtauAngkaAtauString("string"); |
124 | 135 |
|
125 |
| -// If you hover over the above values and functions you |
126 |
| -// can see the right documentation and return values. |
| 136 | +// Apabila Anda menyorot nilai-nilai di atas dan fungsinya, Anda |
| 137 | +// dapat melihat dokumentasi yang tepat beserta dengan |
| 138 | +// tipe data kembaliannya. |
127 | 139 |
|
128 |
| -// Using function overloads can get you very far, however |
129 |
| -// there's another tool for dealing with different types of |
130 |
| -// inputs and return values and that is generics. |
| 140 | +// Menggunakan _function overload_ dapat meningkatkan kemampuan |
| 141 | +// Anda secara drastis, namun ada perkakas lain yang dapat |
| 142 | +// digunakan untuk tipe data masukan dan kembalian yang berbeda, |
| 143 | +// yaitu tipe data generik. |
131 | 144 |
|
132 |
| -// These provide a way for you to have types as placeholder |
133 |
| -// variables in type definitions. |
| 145 | +// Contoh ini menyediakan sebuah cara bagi Anda untuk |
| 146 | +// menetapkan tipe data sebagai variabel sementara |
| 147 | +// pada deklarasi tipe data. |
134 | 148 |
|
135 | 149 | // example:generic-functions
|
136 | 150 | // example:function-chaining
|
0 commit comments