From 9c836503dab2768a15002984b94bc2ca32db4aad Mon Sep 17 00:00:00 2001 From: Burhanudin Dwi Prakoso Date: Tue, 20 Oct 2020 11:48:58 +0000 Subject: [PATCH 1/3] Add indonesian translation for Nightly Builds.md - Configuring Watch.md, Decorators.md - Mixins.md, Babel with TypeScript.md - TypeScript Tooling in 5 minutes.md --- .../documentation/copy/id/Nightly Builds.md | 80 ++ .../javascript/Creating DTS files From JS.md | 87 +++ .../copy/id/javascript/Intro to JS with TS.md | 70 ++ .../copy/id/javascript/JSDoc Reference.md | 693 ++++++++++++++++++ .../id/project-config/Configuring Watch.md | 66 ++ .../copy/id/reference/Decorators.md | 573 +++++++++++++++ .../id/reference/Iterators and Generators.md | 90 +++ .../documentation/copy/id/reference/JSX.md | 442 +++++++++++ .../documentation/copy/id/reference/Mixins.md | 271 +++++++ .../copy/id/reference/Symbols.md | 107 +++ .../id/tutorials/Babel with TypeScript.md | 49 ++ .../copy/id/tutorials/DOM Manipulation.md | 201 +++++ .../documentation/copy/id/tutorials/React.md | 26 + .../TypeScript Tooling in 5 minutes.md | 187 +++++ 14 files changed, 2942 insertions(+) create mode 100644 packages/documentation/copy/id/Nightly Builds.md create mode 100644 packages/documentation/copy/id/javascript/Creating DTS files From JS.md create mode 100644 packages/documentation/copy/id/javascript/Intro to JS with TS.md create mode 100644 packages/documentation/copy/id/javascript/JSDoc Reference.md create mode 100644 packages/documentation/copy/id/project-config/Configuring Watch.md create mode 100644 packages/documentation/copy/id/reference/Decorators.md create mode 100644 packages/documentation/copy/id/reference/Iterators and Generators.md create mode 100644 packages/documentation/copy/id/reference/JSX.md create mode 100644 packages/documentation/copy/id/reference/Mixins.md create mode 100644 packages/documentation/copy/id/reference/Symbols.md create mode 100644 packages/documentation/copy/id/tutorials/Babel with TypeScript.md create mode 100755 packages/documentation/copy/id/tutorials/DOM Manipulation.md create mode 100644 packages/documentation/copy/id/tutorials/React.md create mode 100644 packages/documentation/copy/id/tutorials/TypeScript Tooling in 5 minutes.md diff --git a/packages/documentation/copy/id/Nightly Builds.md b/packages/documentation/copy/id/Nightly Builds.md new file mode 100644 index 000000000000..26b915a7f56d --- /dev/null +++ b/packages/documentation/copy/id/Nightly Builds.md @@ -0,0 +1,80 @@ +--- +title: Nightly Builds +layout: docs +permalink: /id/docs/handbook/nightly-builds.html +oneline: Cara menggunakan nightly build TypeScript +translatable: true +--- + +Nightly build dari branch [master TypeScript](https://github.com/Microsoft/TypeScript/tree/master) diterbitkan pada tengah malam, di zona waktu PST ke npm. +Berikut adalah cara untuk mendapatkan versi ini dan cara menggunakannya. + +## Menggunakan npm + +```shell +npm install -g typescript@next +``` + +## Memperbarui IDE-mu untuk menggunakan nightly builds + +Anda juga dapat memperbarui IDE-mu untuk menggunakan nightly drop. +Pertama, anda akan perlu untuk memasang package melalui npm. +Anda juga dapat memasang npm package secara global atau pada folder `node_modules` di dalam proyek-mu. + +Pada tahap ini diasumsikan bahwa `typescript@next` sudah di-install. + +### Visual Studio Code + +Perbarui `.vscode/settings.json` dengan cara berikut: + +```json +"typescript.tsdk": "/node_modules/typescript/lib" +``` + +Informasi lebih lanjut ada di [VSCode documentation](https://code.visualstudio.com/Docs/languages/typescript#_using-newer-typescript-versions). + +### Sublime Text + +Perbarui file `Settings - User` dengan cara berikut: + +```json +"typescript_tsdk": "/node_modules/typescript/lib" +``` + +Informasi lebih lanjut ada di [TypeScript Plugin for Sublime Text installation documentation](https://github.com/Microsoft/TypeScript-Sublime-Plugin#installation). + +### Visual Studio 2013 dan 2015 + +> Catatan: Sebagian besar perubahan tidak mengharuskan anda untuk memasang versi terbaru dari plugin VS TypeScript. + +Saat ini, Nightly build tidak menyertakan plugin secara lengkap, tapi kami sedang mengupayakan untuk menerbitkan sebuah installer di nightly. + +1. Unduh skrip [VSDevMode.ps1](https://github.com/Microsoft/TypeScript/blob/master/scripts/VSDevMode.ps1) script. + + > Lihat juga halaman wiki kami di [menggunakan custom language service file](https://github.com/Microsoft/TypeScript/wiki/Dev-Mode-in-Visual-Studio#using-a-custom-language-service-file). + +2. Melalui perintah PowerShell, jalankan: + +Untuk VS 2015: + +```posh +VSDevMode.ps1 14 -tsScript /node_modules/typescript/lib +``` + +Untuk VS 2013: + +```posh +VSDevMode.ps1 12 -tsScript /node_modules/typescript/lib +``` + +### IntelliJ IDEA (Mac) + +Masuk ke `Preferences` > `Languages & Frameworks` > `TypeScript`: + +> TypeScript Version: Jika anda memasangnya dengan npm, maka akan ada di `/usr/local/lib/node_modules/typescript/lib` + +### IntelliJ IDEA (Windows) + +Masuk ke `File` > `Settings` > `Languages & Frameworks` > `TypeScript`: + +> TypeScript Version: Jika anda memasangnya dengan npm, maka akan ada di `C:\Users\USERNAME\AppData\Roaming\npm\node_modules\typescript\lib` diff --git a/packages/documentation/copy/id/javascript/Creating DTS files From JS.md b/packages/documentation/copy/id/javascript/Creating DTS files From JS.md new file mode 100644 index 000000000000..83e3da46e74d --- /dev/null +++ b/packages/documentation/copy/id/javascript/Creating DTS files From JS.md @@ -0,0 +1,87 @@ +--- +title: Creating .d.ts Files from .js files +layout: docs +permalink: /id/docs/handbook/declaration-files/dts-from-js.html +oneline: "Bagaimana cara menambahkan hasil d.ts ke proyek JavaScript" +translatable: true +--- + +[Dengan TypeScript 3.7](/docs/handbook/release-notes/typescript-3-7.html#--declaration-and---allowjs), TypeScript menambahkan dukungan untuk menghasilkan file .d.ts dari JavaScript menggunakan sintaks JSDoc. + +Pengaturan ini berarti Anda memiliki editor yang mendukung TypeScript tanpa memindahkan proyek anda ke TypeScript, atau harus memelihara file .d.ts di basis kodemu. +TypeScript mendukung sebagian besar tag JSDoc, Anda bisa menemukannya [di referensi ini](/docs/handbook/type-checking-javascript-files.html#supported-jsdoc). + +## Menyiapkan proyekmu untuk menggunakan file .d.ts + +Untuk menambahkan pembuatan file .d.ts di proyekmu, Anda perlu melakukan hingga empat langkah: + +- Tambahkan TypeScript ke dependensi dev Anda +- Tambahkan `tsconfig.json` untuk mengkonfigurasi TypeScript +- Jalankan compiler TypeScript untuk menghasilkan file d.ts yang sesuai untuk file JS +- (opsional) Edit package.json Anda untuk mereferensikan tipe + +### Menambahkan TypeScript + +Anda bisa mempelajari cara melakukan ini di [halaman instalasi](/download) kami. + +### TSConfig + +TSConfig adalah file jsonc yang mengkonfigurasi kedua flag compiler Anda, dan menyatakan di mana mencari file. +Dalam kasus ini, Anda menginginkan file seperti berikut: + +```json5 +{ + // Change this to match your project + include: ["src/**/*"], + + compilerOptions: { + // Tells TypeScript to read JS files, as + // normally they are ignored as source files + allowJs: true, + // Generate d.ts files + declaration: true, + // This compiler run should + // only output d.ts files + emitDeclarationOnly: true, + // Types should go into this directory. + // Removing this would place the .d.ts files + // next to the .js files + outDir: "dist", + }, +} +``` + +Anda dapat mempelajari lebih lanjut tentang opsi di [referensi tsconfig](/reference). +Alternatif untuk menggunakan file TSConfig adalah CLI, ini adalah perilaku yang sama seperti perintah CLI. + +```sh +npx typescript src/**/*.js --declaration --allowJs --emitDeclarationOnly --outDir types +``` + +## Menjalankan compiler + +Anda bisa mempelajari bagaimana melakukan ini di [halaman pemasangan](/download) TypeScript kami. +Anda perlu memastikan file-file ini disertakan dalam package Anda jika Anda memiliki file dalam `gitignore` proyek Anda. + +## Meng-edit file package.json + +TypeScript mereplikasi resolusi node untuk modul di `package.json`, dengan langkah tambahan untuk menemukan file .d.ts. +Secara kasar, resolusi pertama-tama akan memeriksa bidang `"types"` opsional, kemudian bidang `"main"`, dan terakhir akan mencoba `index.d.ts` di root. + +| Package.json | Location of default .d.ts | +| :------------------------ | :----------------------------- | +| No "types" field | checks "main", then index.d.ts | +| "types": "main.d.ts" | main.d.ts | +| "types": "./dist/main.js" | ./main/main.d.ts | + +Jika tidak ada, maka "main" akan digunakan + +| Package.json | Location of default .d.ts | +| :----------------------- | :------------------------ | +| No "main" field | index.d.ts | +| "main":"index.js" | index.d.ts | +| "main":"./dist/index.js" | ./dist/index.d.ts | + +## Tips + +Jika kamu suka menulis tes untuk file .d.ts, coba [tsd](https://github.com/SamVerschueren/tsd). diff --git a/packages/documentation/copy/id/javascript/Intro to JS with TS.md b/packages/documentation/copy/id/javascript/Intro to JS with TS.md new file mode 100644 index 000000000000..5b954433403e --- /dev/null +++ b/packages/documentation/copy/id/javascript/Intro to JS with TS.md @@ -0,0 +1,70 @@ +--- +title: JS Projects Utilizing TypeScript +layout: docs +permalink: /id/docs/handbook/intro-to-js-ts.html +oneline: Cara menambahkan pemeriksaan type ke file JavaScript menggunakan TypeScript +translatable: true +--- + +Sistem tipe di TypeScript memiliki tingkat keketatan yang berbeda saat bekerja dengan basis kode: + +- Sistem tipe yang hanya berdasarkan pada inferensi dengan kode JavaScript +- Pengetikkan incremental di JavaScript [melalui JSDoc](/docs/handbook/jsdoc-supported-types.html) +- Menggunakan `// @ts-check` di file JavaScript +- Kode TypeScript +- TypeScript dengan [`strict`](/tsconfig#strict) diaktifkan + +Setiap langkah mewakili gerakan menuju sistem tipe yang lebih aman, tetapi tidak setiap proyek membutuhkan tingkat verifikasi seperti itu. + +## TypeScript dengan JavaScript + +Ini ketika editor-mu yang menggunakan TypeScript untuk menyediakan tool, seperti auto-complete, jump to symbil, dan refactoring, misalnya penamaan ulang. +Di [Homepage](/) tersedia daftar editor yang memiliki plugin TypeScript. + +## Menyediakan Type Hints di JS melalui JSDoc + +Di file `.js`, type sering kali dapat diketahui. Namun ketika type tidak diketahui, mereka bisa ditentukan menggunakan sintaks JSDoc. + +Anotasi JSDoc diletakkan sebelum mendeklarasikan suatu hal. Seperti contoh berikut: + +```js twoslash +/** @type {number} */ +var x; + +x = 0; // OK +x = false; // OK?! +``` + +Anda dapat menemukan daftar lengkap mengenai dukungan pola JSDoc [di Tipe-tipe yang didukung JSDoc](/docs/handbook/jsdoc-supported-types.html) + +## `@ts-check` + +Baris terakhir dari contoh kode sebelumnya akan menimbulkan kesalahan dalam TypeScript, tetapi tidak secara default dalam proyek JS. +Untuk mengaktifkan error dalam file JavaScript-mu, tambahkan: `// @ ts-check` ke baris pertama dalam file`.js` Anda agar TypeScript dapat memeriksa kesalahan. + +```js twoslash +// @ts-check +// @errors: 2322 +/** @type {number} */ +var x; + +x = 0; // OK +x = false; // Not OK +``` + +Jika anda memiliki banyak file JavaScript yang ingin ditambahkan pemeriksaan error-nya, anda bisa beralhir menggunakan [`jsconfig.json`](/docs/handbook/tsconfig-json.html). +Dengan begitu, anda tidak perlu menambahkan `// @ts-nocheck` di tiap file-nya. + +TypeScript mungkin memberikan error yang kamu tidak sepakati. Pada kasus tersebut, anda bisa membiarkan error itu spesifik dibaris manapun dengan menambahkan `// @ts-ignore` atau `// @ts-expect-error`. + +```js twoslash +// @ts-check +/** @type {number} */ +var x; + +x = 0; // OK +// @ts-expect-error +x = false; // Not OK +``` + +Untuk mempelajari lebih lanjut bagaimana JavaScript diinterpretasi oleh TypeScript, anda dapat membaca [Bagaimana TS Type Memeriksa JS](/docs/handbook/type-checking-javascript-files.html) diff --git a/packages/documentation/copy/id/javascript/JSDoc Reference.md b/packages/documentation/copy/id/javascript/JSDoc Reference.md new file mode 100644 index 000000000000..e74b42a9e55e --- /dev/null +++ b/packages/documentation/copy/id/javascript/JSDoc Reference.md @@ -0,0 +1,693 @@ +--- +title: JSDoc Reference +layout: docs +permalink: /id/docs/handbook/jsdoc-supported-types.html +oneline: JSDoc apa yang didukung JavaScript dan TypeScript? +translatable: true +--- + +Dibawah ini adalah daftar anotasi yang didukung saat menggunakan JSDoc untuk menyediakan informasi di file Javscript. + +Perhatikan semua tag yang tidak secara eksplisit dicantumkan di bawah (seperti `@ async`) belum didukung. + +- `@type` +- `@param` (atau `@arg` atau `@argument`) +- `@returns` (atau `@return`) +- `@typedef` +- `@callback` +- `@template` +- `@class` (atau `@constructor`) +- `@this` +- `@extends` (atau `@augments`) +- `@enum` + +#### Ekstensi `class` + +- [Property Modifiers](#jsdoc-property-modifiers) `@public`, `@private`, `@protected`, `@readonly` + +Artinya biasanya sama, atau superset, dari arti tag yang diberikan di [jsdoc.app](https://jsdoc.app). +Kode dibawah mendeskripsikan perbedaan dan beberapa contoh dari setiap tag-nya. + +**Catatan:** Anda bisa menggunakan [playground untuk mengeksplor dukungan JSDoc](/play?useJavaScript=truee=4#example/jsdoc-support). + +## `@type` + +Anda dapat menggunakan tag "@type" dan mereferensikan nama jenis (baik primitif, ditentukan dalam deklarasi TypeScript, atau dalam tag "@typedef" JSDoc). +Anda dapat menggunakan sebagian besar jenis JSDoc dan jenis TypeScript apa pun, dari [yang paling dasar seperti `string`](/docs/handbookbasic-types.html) hingga [yang paling canggih, seperti jenis bersyarat](/docs/handbook/advanced-types.html). + +```js twoslash +/** + * @type {string} + */ +var s; + +/** @type {Window} */ +var win; + +/** @type {PromiseLike} */ +var promisedString; + +// Anda dapat menentukan Elemen HTML dengan properti DOM +/** @type {HTMLElement} */ +var myElement = document.querySelector(selector); +element.dataset.myData = ""; +``` + +`@type` dapat menetapkan tipe gabungan — misalnya, sesuatu bisa berupa string atau boolean. + +```js twoslash +/** + * @type {(string | boolean)} + */ +var sb; +``` + +Perhatikan bahwa tanda kurung bersifat opsional untuk tipe gabungan. + +```js twoslash +/** + * @type {string | boolean} + */ +var sb; +``` + +Anda dapat menentukan tipe array menggunakan berbagai sintaks: + +```js twoslash +/** @type {number[]} */ +var ns; +/** @type {Array.} */ +var nds; +/** @type {Array} */ +var nas; +``` + +Anda juga dapat menentukan tipe literal objek. +Misalnya, objek dengan properti 'a' (string) dan 'b' (angka) menggunakan sintaks berikut: + +```js twoslash +/** @type {{ a: string, b: number }} */ +var var9; +``` + +Anda dapat menentukan objek seperti map dan array menggunakan index signature string dan angka, menggunakan sintaks JSDoc standar atau sintaks TypeScript. + +```js twoslash +/** + * Objek map yang memetakan kunci string dan nilainya bertipe number. + * + * @type {Object.} + */ +var stringToNumber; + +/** @type {Object.} */ +var arrayLike; +``` + +Dua jenis sebelumnya sama dengan type TypeScript `{ [x: string]: number }` dan `{ [x: number]: any }`. Compiler memahami kedua sintaks tersebut. + +Anda dapat menentukan jenis fungsi menggunakan sintaks TypeScript atau Closure: + +```js twoslash +/** @type {function(string, boolean): number} Closure syntax */ +var sbn; +/** @type {(s: string, b: boolean) => number} TypeScript syntax */ +var sbn2; +``` + +Atau anda dapat menggunakan type `Function` yang tidak ditentukan: + +```js twoslash +/** @type {Function} */ +var fn7; +/** @type {function} */ +var fn6; +``` + +Type lainnya dari Closure juga berfungsi: + +```js twoslash +/** + * @type {*} - can be 'any' type + */ +var star; +/** + * @type {?} - unknown type (same as 'any') + */ +var question; +``` + +### Casts + +TypeScript meminjam sintaks cast dari Closure. +Ini memungkinkan Anda mentransmisikan type ke type lain dengan menambahkan tag `@type` sebelum ekspresi dalam tanda kurung. + +```js twoslash +/** + * @type {number | string} + */ +var numberOrString = Math.random() < 0.5 ? "hello" : 100; +var typeAssertedNumber = /** @type {number} */ (numberOrString); +``` + +### Impor type + +Anda bisa juga mengimpor deklarasi dari file lain menggunakan impor type. +Sintaks ini khusus untuk TypeScript dan berbeda dari standar JSDoc: + +```js twoslash +// @filename: types.d.ts +export type Pet = { + name: string, +}; + +// @filename: main.js +/** + * @param p { import("./types").Pet } + */ +function walk(p) { + console.log(`Walking ${p.name}...`); +} +``` + +mengimpor type juga dapat digunakan di deklarasi type alias: + +```js twoslash +// @filename: types.d.ts +export type Pet = { + name: string, +}; +// @filename: main.js +// ---cut--- +/** + * @typedef { import("./types").Pet } Pet + */ + +/** + * @type {Pet} + */ +var myPet; +myPet.name; +``` + +Mengimpor type dapat digunakan untuk mendapatkan type nilai dari module, jika Anda tidak mengetahui jenisnya, atau jika nilai tersebut memiliki type yang besar yang dapat mengganggu untuk diketik: + +```js twoslash +// @filename: accounts.d.ts +export const userAccount = { + name: "Name", + address: "An address", + postalCode: "", + country: "", + planet: "", + system: "", + galaxy: "", + universe: "", +}; +// @filename: main.js +// ---cut--- +/** + * @type {typeof import("./accounts").userAccount } + */ +var x = require("./accounts").userAccount; +``` + +## `@param` and `@returns` + +`@param` menggunakan jenis sintaks yang sama dengan `@type`, tapi dengan tambahan sebuah nama parameter. +Parameter juga dapat dideklarasikan secara opsional dengan membungkus namanya menggunakan kurung siku: + +```js twoslash +// Parameter dapat dideklarasikan dalam berbagai bentuk sintaksis +/** + * @param {string} p1 - Parameter string. + * @param {string=} p2 - Opsional param (sintaks Closure) + * @param {string} [p3] - Opsional param lainnya (sintaks JSDoc). + * @param {string} [p4="test"] - Opsional param dengan nilai standar + * @return {string} Ini adalah hasilnya + */ +function stringsStringStrings(p1, p2, p3, p4) { + // MELAKUKAN +} +``` + +Demikian juga, untuk type kembalian suatu fungsi: + +```js twoslash +/** + * @return {PromiseLike} + */ +function ps() {} + +/** + * @returns {{ a: string, b: number }} - Dapat menggunakan '@returns' serta '@return' + */ +function ab() {} +``` + +## `@typedef`, `@callback`, and `@param` + +`@ty[edef` juga dapat digunakan untuk mendefinisikan type yang kompleks. +Sintaks yang bekerja dengan `@params`. + +```js twoslash +/** + * @typedef {Object} SpecialType - buat type baru bernama 'SpecialType' + * @property {string} prop1 - property string dari SpecialType + * @property {number} prop2 - property number dari SpecialType + * @property {number=} prop3 - opsional property number dari SpecialType + * @prop {number} [prop4] - opsional property number dari SpecialType + * @prop {number} [prop5=42] - opsional property number dari SpecialType dengan nilai standar + */ + +/** @type {SpecialType} */ +var specialTypeObject; +specialTypeObject.prop3; +``` + +Anda bisa menggunakan `object` atau `Object` pada baris pertama. + +```js twoslash +/** + * @typedef {object} SpecialType1 - buat type baru bernama 'SpecialType' + * @property {string} prop1 - property string dari SpecialType + * @property {number} prop2 - property number dari SpecialType + * @property {number=} prop3 - opsional property number dari SpecialType + */ + +/** @type {SpecialType1} */ +var specialTypeObject1; +``` + +`@params` memperbolehkan sintaks yang serupa untuk spesifikasi type-nya. +Perhatikan bahwa nama nested property harus diawali dengan nama parameternya: + +```js twoslash +/** + * @param {Object} options - Bentuknya sama dengan SpecialType di atas + * @param {string} options.prop1 + * @param {number} options.prop2 + * @param {number=} options.prop3 + * @param {number} [options.prop4] + * @param {number} [options.prop5=42] + */ +function special(options) { + return (options.prop4 || 1001) + options.prop5; +} +``` + +`@callback` mirip dengan `@typedef`, tetapi ini menetapkan type fungsi daripada type objek: + +```js twoslash +/** + * @callback Predicate + * @param {string} data + * @param {number} [index] + * @returns {boolean} + */ + +/** @type {Predicate} */ +const ok = (s) => !(s.length % 2); +``` + +Tentu saja, salah satu dari jenis ini dapat dideklarasikan menggunakan sintaks TypeScript dalam satu baris `@typedef`: + +```js +/** @typedef {{ prop1: string, prop2: string, prop3?: number }} SpecialType */ +/** @typedef {(data: string, index?: number) => boolean} Predicate */ +``` + +## `@template` + +Anda dapat mendeklarasikan fungsi generik dengan tag `@template`: + +```js twoslash +/** + * @template T + * @param {T} x - Parameter umum yang mengalir ke return type + * @return {T} + */ +function id(x) { + return x; +} + +const a = id("string"); +const b = id(123); +const c = id({}); +``` + +Gunakan koma atau beberapa tag untuk mendeklarasikan beberapa parameter type: + +```js +/** + * @template T,U,V + * @template W,X + */ +``` + +Anda juga bisa menentukan batasan type sebelum nama parameternya. +Hanya parameter type pertama dalam sebuah list yang dibatasi. + +```js twoslash +/** + * @template {string} K - K harus berupa string atau string literal + * @template {{ serious(): string }} Seriousalizable - harus memiliki method serious + * @param {K} key + * @param {Seriousalizable} object + */ +function seriousalize(key, object) { + // ???? +} +``` + +Mendeklarasikan kelas generik atau type yang tidak didukung. + +## Classes + +Kelas yang dapat dideklarasikan sebagai kelas ES6. + +```js twoslash +class C { + /** + * @param {number} data + */ + constructor(data) { + // tipe properti yang bisa diketahui + this.name = "foo"; + + // atau mengaturnya secara eksplisit + /** @type {string | null} */ + this.title = null; + + // atau hanya diberi anotasi, jika disetel di tempat lain + /** @type {number} */ + this.size; + + this.initialize(data); // Seharusnya error, karena initialize mengharapkan string + } + /** + * @param {string} s + */ + initialize = function (s) { + this.size = s.length; + }; +} + +var c = new C(0); + +// C seharusnya hanya dipanggil dengan yang baru, +// tetapi karena ini adalah JavaScript, ini +// diperbolehkan dan dianggap sebagai 'any'. +var result = C(1); +``` + +Mereka juga dapat dideklarasikan sebagai fungsi konstruktor, seperti yang dijelaskan di bagian selanjutnya: + +## `@constructor` + +Compiler menyimpulkan fungsi konstruktor berdasarkan penetapan properti ini, tetapi Anda dapat membuat pemeriksaan lebih ketat dan saran lebih baik jika Anda menambahkan tag `@constructor`: + +```js twoslash +// @checkJs +// @errors: 2345 2348 +/** + * @constructor + * @param {number} data + */ +function C(data) { + // type property yang dapat diketahui + this.name = "foo"; + + // atau atur secara eksplisit + /** @type {string | null} */ + this.title = null; + + // atau hanya diberi anotasi, jika disetel di tempat lain + /** @type {number} */ + this.size; + + this.initialize(data); +} +/** + * @param {string} s + */ +C.prototype.initialize = function (s) { + this.size = s.length; +}; + +var c = new C(0); +c.size; + +var result = C(1); +``` + +> Catatan: Pesan error hanya tampil di basis kode JS dengan [JSConfig](/docs/handbook/tsconfig-json.html) dan [`checkJS`](/tsconfig#checkJs) yang diaktifkan. + +Dengan `@constructor`, `this` diperiksa didalam fungsi konstruktor `C`, jadi anda akan mendapatkan saran untuk method `initialize` dan sebuah error jika anda memasukkan sebuah angka. Editor-mu mungkin akan menampilkan peringatan jika memanggil `C` daripada mengkonstruksikannya. + +Sayangnya, ini berarti bahwa fungsi konstruktor yang juga dapat dipanggil tidak dapat menggunakan `@constructor`. + +## `@this` + +Compiler biasanya dapat mengetahui type `this` ketika ia memiliki beberapa konteks untuk dikerjakan. Jika tidak, Anda dapat secara eksplisit menentukan jenis `this` dengan `@this`: + +```js twoslash +/** + * @this {HTMLElement} + * @param {*} e + */ +function callbackForLater(e) { + this.clientHeight = parseInt(e); // seharusnya baik-baik saja! +} +``` + +## `@extends` + +Ketika kelas JavaScript memperluas _base class_, tidak ada tempat untuk menentukan seharusnya menggunakan parameter type yang seperti apa. Tag `@extends` menyediakan tempat untuk parameter jenis itu: + +```js twoslash +/** + * @template T + * @extends {Set} + */ +class SortableSet extends Set { + // ... +} +``` + +Perhatikan bahwa `@extends` hanya berfungsi dengan kelas. Saat ini, tidak ada cara untuk fungsi konstruktor memperluas kelas. + +## `@enum` + +Tag `@enum` memungkinkan Anda membuat literal objek yang type anggotanya spesifik. Tidak seperti kebanyakan literal objek di JavaScript, ini tidak mengizinkan anggota lain. + +```js twoslash +/** @enum {number} */ +const JSDocState = { + BeginningOfLine: 0, + SawAsterisk: 1, + SavingComments: 2, +}; + +JSDocState.SawAsterisk; +``` + +Perhatikan bahwa `@enum` sangat berbeda, dan jauh lebih sederhana daripada `enum` TypeScript. Namun, tidak seperti enum TypeScript, `@enum` dapat memiliki tipe apa saja: + +```js twoslash +/** @enum {function(number): number} */ +const MathFuncs = { + add1: (n) => n + 1, + id: (n) => -n, + sub1: (n) => n - 1, +}; + +MathFuncs.add1; +``` + +## Lebih banyak contoh + +```js twoslash +class Foo {} +// ---cut--- +var someObj = { + /** + * @param {string} param1 - Dokumen tentang tugas property + */ + x: function (param1) {}, +}; + +/** + * Seperti halnya dokumen tentang tugas variabel + * @return {Window} + */ +let someFunc = function () {}; + +/** + * Dan method kelas + * @param {string} greeting Salam untuk digunakan + */ +Foo.prototype.sayHi = (greeting) => console.log("Hi!"); + +/** + * Dan ekspresi arrow function + * @param {number} x - Pengganda + */ +let myArrow = (x) => x * x; + +/** + * Artinya, ini juga berfungsi untuk komponen fungsi stateless di JSX + * @param {{a: string, b: number}} test - Beberapa param + */ +var sfc = (test) =>
{test.a.charAt(0)}
; + +/** + * Parameter bisa menjadi konstruktor kelas, menggunakan sintaks Closure. + * + * @param {{new(...args: any[]): object}} C - Kelas untuk mendaftar + */ +function registerClass(C) {} + +/** + * @param {...string} p1 - A 'rest' arg (array) of strings. (treated as 'any') + */ +function fn10(p1) {} + +/** + * @param {...string} p1 - A 'rest' arg (array) of strings. (treated as 'any') + */ +function fn9(p1) { + return p1.join(); +} +``` + +## Pola yang diketahui TIDAK didukung + +Mengacu pada objek di value space sebagai type yang tidak berfungsi, kecuali objek tersebut juga membuat type, seperti fungsi konstruktor. + +```js twoslash +function aNormalFunction() {} +/** + * @type {aNormalFunction} + */ +var wrong; +/** + * Gunakan 'typeof' sebagai gantinya: + * @type {typeof aNormalFunction} + */ +var right; +``` + +Postfix sama dengan type property dalam type literal objek yang tidak menetapkan properti opsional: + +```js twoslash +/** + * @type {{ a: string, b: number= }} + */ +var wrong; +/** + * Gunakan postfix question pada nama properti sebagai gantinya: + * @type {{ a: string, b?: number }} + */ +var right; +``` + +Jenis Nullable hanya memiliki arti jika `strictNullChecks` aktif: + +```js twoslash +/** + * @type {?number} + * With strictNullChecks: true -- number | null + * With strictNullChecks: false -- number + */ +var nullable; +``` + +Anda juga bisa menggunakan tipe gabungan: + +```js twoslash +/** + * @type {number | null} + * With strictNullChecks: true -- number | null + * With strictNullChecks: false -- number + */ +var unionNullable; +``` + +Type non-nullable tidak memiliki arti dan diperlakukan seperti jenis aslinya: + +```js twoslash +/** + * @type {!number} + * Hanya ber-type number + */ +var normal; +``` + +If it is off, then `number` is nullable. +Tidak seperti sistem type JSDoc, TypeScript hanya memungkinkan Anda untuk menandai type, apakah mengandung null atau tidak. +Tidak ada non-nullability eksplisit - jika strictNullChecks aktif, `number` tidak dapat dinihilkan. +Jika tidak aktif, maka `number` adalah nullable. + +### Tag yang tidak didukung + +TypeScript mengabaikan semua tag JSDoc yang tidak didukung. + +Tag berikut memiliki isu terbuka untuk mendukungnya: + +- `@const` ([issue #19672](https://github.com/Microsoft/TypeScript/issues/19672)) +- `@inheritdoc` ([issue #23215](https://github.com/Microsoft/TypeScript/issues/23215)) +- `@memberof` ([issue #7237](https://github.com/Microsoft/TypeScript/issues/7237)) +- `@yields` ([issue #23857](https://github.com/Microsoft/TypeScript/issues/23857)) +- `{@link …}` ([issue #35524](https://github.com/Microsoft/TypeScript/issues/35524)) + +## Extensi kelas JS + +### Modifier Property JSDoc + +Dari TypeScript 3.8 dan seterusnya, Anda dapat menggunakan JSDoc untuk mengubah properti kelas. Pertama adalah pengubah aksesibilitas: `@public`,`@private`, dan `@protected`. +Tag ini bekerja persis seperti `public`,`private`, dan `protected`, masing-masing berfungsi di TypeScript. + +```js twoslash +// @errors: 2341 +// @ts-check + +class Car { + constructor() { + /** @private */ + this.identifier = 100; + } + + printIdentifier() { + console.log(this.identifier); + } +} + +const c = new Car(); +console.log(c.identifier); +``` + +- `@public` ini berarti property dapat diakses dari mana saja. +- `@private` berarti bahwa properti hanya dapat digunakan di dalam kelas yang memuatnya. +- `@protected` berarti bahwa properti hanya dapat digunakan di dalam kelas penampung, dan semua subkelas turunan, tetapi tidak pada instance kelas penampung yang berbeda. + +Selanjutnya, kita juga telah menambahkan modifier `@readonly` untuk memastikan bahwa sebuah property hanya dapat di-write selama inisialisasi. + +```js twoslash +// @errors: 2540 +// @ts-check + +class Car { + constructor() { + /** @readonly */ + this.identifier = 100; + } + + printIdentifier() { + console.log(this.identifier); + } +} + +const c = new Car(); +console.log(c.identifier); +``` diff --git a/packages/documentation/copy/id/project-config/Configuring Watch.md b/packages/documentation/copy/id/project-config/Configuring Watch.md new file mode 100644 index 000000000000..17d32d47bc02 --- /dev/null +++ b/packages/documentation/copy/id/project-config/Configuring Watch.md @@ -0,0 +1,66 @@ +--- +title: Configuring Watch +layout: docs +permalink: /id/docs/handbook/configuring-watch.html +oneline: Cara mengkonfigurasi mode watch TypeScript +translatable: true +--- + +Compiler mendukung konfigurasi cara mengawasi file dan direktori menggunakan compiler flags di TypeScript 3.8+, dan variabel environment. + +## Latar Belakang + +Implementasi `--watch` dari compiter bergantung pada penggunaan `fs.watch` dan `fs.watchFile` yang disediakan oleh node, kedua metode ini memiliki kelebihan dan kekurangan. + +`fs.watch` menggunakan system event file untuk memberi tahu perubahan dalam file/direktori. Tetapi ini bergantung pada OS dan notifikasi tidak sepenuhnya dapat diandalkan dan tidak berfungsi seperti yang diharapkan pada banyak OS. Juga mungkin ada batasan jumlah watch yang dapat dibuat, misalnya. linux dan kami dapat melakukannya dengan cukup cepat dengan program yang menyertakan banyak file. Tetapi karena ini menggunakan system event file, tidak banyak siklus CPU yang terlibat. Compiler biasanya menggunakan `fs.watch` untuk melihat direktori (misalnya. Direktori sumber disertakan oleh file konfigurasi, direktori di mana resolusi modul gagal, dll.) Ini dapat menangani ketepatan yang hilang dalam memberi tahu tentang perubahan. Tetapi memantau secara rekursif hanya didukung pada Windows dan OSX. Artinya kita membutuhkan sesuatu untuk menggantikan sifat rekursif di OS lain. + +`fs.watchFile` menggunakan polling dan karenanya melibatkan siklus CPU. Tetapi ini adalah mekanisme yang paling andal untuk mendapatkan pembaruan status file/direktori. Compiler biasanya menggunakan `fs.watchFile` untuk melihat file sumber, file konfigurasi dan file yang hilang (referensi file hilang) yang berarti penggunaan CPU bergantung pada jumlah file dalam program. + +## Konfigurasi file watching menggunakan `tsconfig.json` + +```json tsconfig +{ + // Beberapa opsi compiler umumnya + "compilerOptions": { + "target": "es2020", + "moduleResolution": "node" + // ... + }, + + // BARU: Opsi untuk memantau file/direktori + "watchOptions": { + // Gunakan native file system events untuk file dan direktori + "watchFile": "useFsEvents", + "watchDirectory": "useFsEvents", + + // Dapatkan pembaruan file + // ketika terdapat update yang besar. + "fallbackPolling": "dynamicPriority" + } +} +``` + +Anda dapat membacanya lebih lanjut di [catatan rilis](/docs/handbook/release-notes/typescript-3-8.html#better-directory-watching-on-linux-and-watchoptions). + +## Konfigurasi file watching menggunakan variabel environment `TSC_WATCHFILE` + + +Opsi | Deskripsi +-----------------------------------------------|---------------------------------------------------------------------- +`PriorityPollingInterval` | Gunakan `fs.watchFile` tetapi gunakan interval polling yang berbeda untuk file sumber, file konfigurasi, dan file yang hilang +`DynamicPriorityPolling` | Gunakan antrian dinamis di mana dalam file yang sering dimodifikasi akan memiliki interval yang lebih pendek dan file yang tidak diubah akan lebih jarang diperiksa +`UseFsEvents` | Gunakan `fs.watch` untuk memanfaatkan system event file (tetapi mungkin tidak akurat pada OS yang berbeda) untuk mendapatkan pemberitahuan terhadap perubahan/pembuatan/penghapusan file. Perhatikan bahwa beberapa OS misalnya. linux memiliki batasan jumlah pengamatan dan jika gagal melakukan pengamatan menggunakan `fs.watch`, maka pengamatan akan dilakukan dengan `fs.watchFile` +`UseFsEventsWithFallbackDynamicPolling` | Opsi ini mirip dengan `UseFsEvents` kecuali jika gagal memantau menggunakan `fs.watch`, pengawasan dilakukan melalui antrean polling dinamis (seperti dijelaskan dalam `DynamicPriorityPolling`) +`UseFsEventsOnParentDirectory` | Opsi ini mengawasi direktori induk dari file dengan `fs.watch` (menggunakan system event file) sehingga menjadi rendah pada CPU tetapi dengan keakuratan yang rendah. +standar (tanpa menspesifikkan nilainya) | Jika variabel environment `TSC_NONPOLLING_WATCHER` di-set ke true, maka akan mengawasi direktori induk dari file (seperti `UseFsEventsOnParentDirectory`). Jika tidak, akan menggunakan `fs.watchFile` dengan `250ms` sebagai waktu tunggu untuk file apa pun. + +## Mengonfigurasi pengawasan direktori menggunakan variabel environment `TSC_WATCHDIRECTORY` + +Pemantauan direktori pada platform yang tidak mendukung pemantau direktori rekursif secara native di node, maka akan menggunakan opsi yang berbeda, yang dipilih oleh`TSC_WATCHDIRECTORY`. Perlu dicatat bahwa, platform yang mendukung pemantauan direktori secara rekursif (misalnya Windows), nilai dari variabel environment tersebut akan diabaikan. + + +Opsi | Deskripsi +-----------------------------------------------|---------------------------------------------------------------------- +`RecursiveDirectoryUsingFsWatchFile` | Gunakan `fs.watchFile` untuk mengawasi direktori dan direktori anak yang merupakan polling watch (menggunakan siklus CPU) +`RecursiveDirectoryUsingDynamicPriorityPolling`| Gunakan antrian polling dinamis untuk mengumpulkan perubahan pada direktori dan sub direktori. +default (no value specified) | Gunakan `fs.watch` untuk memantau direktoru dan sub direktorinya diff --git a/packages/documentation/copy/id/reference/Decorators.md b/packages/documentation/copy/id/reference/Decorators.md new file mode 100644 index 000000000000..00e40f465bef --- /dev/null +++ b/packages/documentation/copy/id/reference/Decorators.md @@ -0,0 +1,573 @@ +--- +title: Decorators +layout: docs +permalink: /id/docs/handbook/decorators.html +oneline: Ringkasan Dekorator TypeScript +translatable: true +--- + +## Pengenalan + +Dengan pengenalan Kelas-kelas yang ada di TypeScript dan ES6, sekarang ada skenario tertentu yang memerlukan fitur tambahan untuk mendukung anotasi atau modifikasi kelas dan anggota kelas. +Decorators menyediakan cara untuk menambahkan anotasi-anotasi dan sebuah sintaks pemrogragaman meta untuk deklarasi kelas dan anggota kelas. +Decorators ada pada [stage 2 proposal](https://github.com/tc39/proposal-decorators) untuk JavaScript dan juga tersedia pada TypeScript sebagai fitur eksperimental. + +> CATATAN  Decorators adalah fitur eksperimental yang mungkin dapat berubah ketika dirilis nanti. + +Untuk mengaktifkan Decorators eksperimental, anda harus menambahkan opsi `experimentalDecorators` ke baris perintah atau ke berkas `tsconfig.json`. + +**Command Line**: + +```shell +tsc --target ES5 --experimentalDecorators +``` + +**tsconfig.json**: + +```json tsconfig +{ + "compilerOptions": { + "target": "ES5", + "experimentalDecorators": true + } +} +``` + +## Decorator + +_Decorator_ adalah jenis deklarasi khusus yang dapat dilampirkan ke [deklarasi kelas](#class-decorators), [method](#method-decorators), [accessor](#accessor-decorators), [property](#property-decorators), atau [parameter](#parameter-decorators). +Decorators menggunakan bentuk `@expression`, dimana `expression` harus mengevaluasi fungsi yang akan dipanggil saat proses dengan informasi tentang deklarasi yang didekorasi. + +Sebagai contoh, ada decorator `@sealed` yang mungkin kita akan menuliskan fungsi `sealed` sebagai berikut: + +```ts +function sealed(target) { + // lakukan sesuatu dengan 'target' ... +} +``` + +> CATATAN  Anda dapat melihat contoh lengkapnya di [Decorator Kelas](#class-decorators). + +## Decorator Factories + +Jika kita ingin menyesuaikan penerapan decorator pada sebuah deklarasi, kita dapat menuliskan sebuah decorator factory. _Decorator Factory_ adalah sebuah fungsi yang mengembalikan ekspresi yang akan dipanggil oleh decorator ketika proses. + +Kita dapat menuliskan decorator factory seperti berikut: + +```ts +function color(value: string) { + // ini adalah decorator factory + return function (target) { + // ini adalah decorator + // lakukan sesuatu dengan 'target' dan 'value'... + }; +} +``` + +> CATATAN  Anda dapat melihat contoh lengkap dari penggunaan decorator factory di [Method Decorators](#method-decorators) + +## Komposisi Decorator + +Lebih dari satu decorator dapat diterapkan pada sebuah deklarasi, seperti contoh berikut: + +- Penerapan dengan satu baris: + + ```ts + @f @g x + ``` + +- Penerapan lebih dari satu baris: + + ```ts + @f + @g + x + ``` + +Ketika lebih dari satu decorator diterapkan ke sebuah deklarasi, evaluasi yang dilakukan mirip seperti [fungsi komposisi pada matematika](http://wikipedia.org/wiki/Function_composition). Pada model ini, ketika mengkomposisikan fungsi _f_ dan _g_, maka akan menjadi (_f_ ∘ _g_)(_x_) yang sama dengan _f_(_g_(_x_)). + +Dengan demikian, langkah-langkah berikut dilakukan saat mengevaluasi beberapa dekorator pada satu deklarasi di TypeScript: + +1. Ekspresi untuk setiap dekorator dievaluasi dari atas ke bawah. +2. Hasilnya kemudian disebut sebagai fungsi dari bawah ke atas. + +If we were to use [decorator factories](#decorator-factories), we can observe this evaluation order with the following example: + +JIka kita menggunakan [decorator factories](#decorator-factories), kita dapat mengamati urutan evaluasi ini dengan contoh berikut: + +```ts +function f() { + console.log("f(): evaluated"); + return function ( + target, + propertyKey: string, + descriptor: PropertyDescriptor + ) { + console.log("f(): called"); + }; +} + +function g() { + console.log("g(): evaluated"); + return function ( + target, + propertyKey: string, + descriptor: PropertyDescriptor + ) { + console.log("g(): called"); + }; +} + +class C { + @f() + @g() + method() {} +} +``` + +Yang akan mencetak keluaran ini ke console: + +```shell +f(): evaluated +g(): evaluated +g(): called +f(): called +``` + +## Evaluasi Decorator + +Ada urutan yang jelas tentang bagaimana decorator diterapkan ke berbagai deklarasi yang ada di dalam kelas: + +1. _Parameter Decorators_, diikuti oleh _Method_, _Accessor_, atau _Property Decorators_ diterapkan untuk setiap anggota instance. +1. _Parameter Decorators_, diikuti oleh _Method_, _Accessor_, atau _Property Decorators_ diterapkan untuk setiap anggota statis. +1. _Parameter Dekorator_ diterapkan untuk konstruktor. +1. _Class Decorators_ diterapkan untuk kelas. + +## Decorator Kelas + +_Class Decorator_ dideklarasikan tepat sebelum deklarasi kelas. +Dekorator kelas diterapkan ke konstruktor kelas dan dapat digunakan untuk mengamati, memodifikasi, atau mengganti definisi kelas. +Dekorator kelas tidak dapat digunakan dalam file deklarasi, atau dalam konteks ambien lainnya (seperti pada kelas `deklarasi`). + +Ekspresi untuk dekorator kelas akan dipanggil sebagai fungsi pada waktu proses, dengan konstruktor kelas yang didekorasi sebagai satu-satunya argumennya. + +Jika dekorator kelas mengembalikan nilai, deklarasi kelas akan diganti dengan fungsi konstruktor yang disediakan. + +> CATATAN  Jika Anda memilih untuk mengembalikan fungsi konstruktor baru, Anda harus berhati-hati dalam mempertahankan prototipe asli. +> Logika yang menerapkan dekorator pada waktu proses **tidak akan** melakukannya untukmu. + +Berikut ini adalah contoh decorator kelas (`@sealed`) yang diterapkan ke kelas `Greeter`: + +```ts +@sealed +class Greeter { + greeting: string; + constructor(message: string) { + this.greeting = message; + } + greet() { + return "Hello, " + this.greeting; + } +} +``` + +Kita dapat mendefinisikan dekorator `@sealed` menggunakan deklarasi fungsi berikut: + +```ts +function sealed(constructor: Function) { + Object.seal(constructor); + Object.seal(constructor.prototype); +} +``` + +Ketika `@sealed` dijalankan, itu akan menyegel konstruktor dan prototipe-nya. + +Selanjutnya kita memiliki contoh bagaimana menimpa konstruktor. + +```ts +function classDecorator( + constructor: T +) { + return class extends constructor { + newProperty = "new property"; + hello = "override"; + }; +} + +@classDecorator +class Greeter { + property = "property"; + hello: string; + constructor(m: string) { + this.hello = m; + } +} + +console.log(new Greeter("world")); +``` + +## Method Decorators + +_Method Decorator_ dideklarasikan tepat sebelum deklarasi metthod. +Dekorator diterapkan ke _Property Descriptor_ untuk method, yang dapat digunakan untuk mengamati, memodifikasi, atau mengganti definisi method. +Method Dekorator tidak dapat digunakan dalam file deklarasi, saat kelebihan beban, atau dalam konteks ambien lainnya (seperti dalam kelas `declare`). + +Ekspresi untuk method decorator akan dipanggil sebagai fungsi pada waktu proses, dengan tiga argumen berikut: + +1. Bisa memiliki fungsi konstruktor kelas untuk anggota statis, atau prototipe kelas untuk anggota instance. +2. Nama anggota. +3. The _Property Descriptor_ untuk anggota. + +> CATATAN  _Property Descriptor_ akan menjadi `undefined` jika target skripmu dibawah `ES5`. + +Jika method decorator mengembalikan sebuah nilai, maka akan digunakan sebagai _Property Descriptor_ untuk method. + +> CATATAN  Nilai yang dikembalikan akan dibiarkan, jika target skripmu dibawah `ES5`. + +Berikut adalah contoh penerapan method decorator (`@enumerable`) ke method yang ada pada kelas `Greeter`: + +```ts +class Greeter { + greeting: string; + constructor(message: string) { + this.greeting = message; + } + + @enumerable(false) + greet() { + return "Hello, " + this.greeting; + } +} +``` + +Kita dapat mendefinisikan dekorator `@enumerable` menggunakan fungsi deklarasi berikut: + +```ts +function enumerable(value: boolean) { + return function ( + target: any, + propertyKey: string, + descriptor: PropertyDescriptor + ) { + descriptor.enumerable = value; + }; +} +``` + +Decorator `@enumerable(false)` disini adalah sebuah [decorator factory](#decorator-factories). +Ketika decorator `@enumerable(false)` dipanggil, ia akan merubah `enumerable` property dari property descriptor. + +## Decorator Aksesor + +Sebuah _Accessor Decorator_ dideklarasikan tepat sebelum sebuah deklarasi aksesor. +Decorator aksesor diterapkan ke _Property Descriptor_ untuk aksesor dan dapat digunakan untuk mengamati, memodifikasi, atau mengganti definisi aksesor. +Decorator aksesor tidak dapat digunakan dalam deklarasi file, atau dalam konteks ambien lainnya (seperti dalam kelas `declare`). + +> CATATAN  TypeScript melarang penerapan decorator ke aksesor `get` dan `set` untuk single member. +> Sebaliknya, semua decorator untuk anggota harus diterapkan ke pengakses pertama yang ditentukan dalam urutan dokumen. +> Ini karena dekorator berlaku untuk _Property Descriptor_, yang menggabungkan aksesor `get` dan`set`, bukan setiap deklarasi secara terpisah. + +Ekspresi untuk decorator pengakses akan dipanggil sebagai fungsi pada waktu proses, dengan tiga argumen berikut: + +1. Bisa memiliki fungsi konstruktor kelas untuk anggota statis, atau prototipe kelas untuk anggota instance. +2. Nama anggota. +3. The _Property Descriptor_ untuk anggota. + +> CATATAN  _Property Descriptor_ akan menjadi `undefined`, jika target skripmu dibawah `ES5`. + +Jika aksesor decorator mengembalikan sebuah nilai, ia akan digunakan sebagai _Property Descriptor_ untuk anggota. + +> CATATAN  Nilai yang dikembalikan akan dibiarkan, jika target skripmu dibawah `ES5`. + +Berikut ada contoh penerapan aksesor decorator (`@configurable`) ke anggota kelas `Point`: + +```ts +class Point { + private _x: number; + private _y: number; + constructor(x: number, y: number) { + this._x = x; + this._y = y; + } + + @configurable(false) + get x() { + return this._x; + } + + @configurable(false) + get y() { + return this._y; + } +} +``` + +Kita dapat mendefinisikan decorator `@configurable` menggunakan deklarasi fungsi berikut: + +```ts +function configurable(value: boolean) { + return function ( + target: any, + propertyKey: string, + descriptor: PropertyDescriptor + ) { + descriptor.configurable = value; + }; +} +``` + +## Property Decorators + +Sebuah _Property Decorator_ dideklarasikan tepat sebelum deklarasi properti. +_Property Decorator_ tidak dapat digunakan dalam deklarasi file, atau dalam konteks ambien lainnya (seperti dalam kelas `declare`). + +Ekspresi untuk property decorator akan dipanggil sebagai fungsi pada waktu proses, dengan dua argumen berikut: + +1. Dapat berupa fungsi konstruktor kelas untuk anggota statis, atau prototipe kelas untuk anggota instance. +2. Nama anggota. + +> CATATAN  _Property Descriptior_ tidak menyediakan sebuah argumen untuk property decorator karena bergantung tentang bagaimana property decorator diinisialisasi pada TypeScript. +> Ini karena, saat ini tidak ada mekanisme untuk mendeskripsikan sebuah instance property ketika mendefinisikan anggota dari sebuah prototipe, dan tidak ada cara untuk mengamati atau memodifikasi initializer untuk property. Dan nilai kembalian juga akan dibiarkan. +> Sehingga, sebuah property decorator hanya bisa digunakan untuk mengamati property dengan nama yang spesifik, yang telah dideklarasikan pada sebuah kelas. + +Kita dapat menggunakan informasi tersebut untuk memantau property metadata, seperti pada contoh berikut: + +```ts +class Greeter { + @format("Hello, %s") + greeting: string; + + constructor(message: string) { + this.greeting = message; + } + greet() { + let formatString = getFormat(this, "greeting"); + return formatString.replace("%s", this.greeting); + } +} +``` + +Kemudian, kita dapat mendefinisikan decorator `@format` dan fungsi `getFormat` dengan menggunakan deklarasi fungsi berikut: + +```ts +import "reflect-metadata"; + +const formatMetadataKey = Symbol("format"); + +function format(formatString: string) { + return Reflect.metadata(formatMetadataKey, formatString); +} + +function getFormat(target: any, propertyKey: string) { + return Reflect.getMetadata(formatMetadataKey, target, propertyKey); +} +``` + +Decorator `@format("Hello, %s")` disini adalah sebuah [decorator factory](#decorator-factories). +Ketika `@format("Hello, %s")` dipanggil, ia akan menambahkan property metadata menggunakan fungsi `Reflect.metadata` dari pustaka `reflect-metadata`. +Ketika `getFormat` dipanggil, ia akan membaca format dari nilai metadata-nya. + +> CATATAN  Contoh ini membutuhkan pustaka `reflect-metadata`. +> Lihat [Metadata](#metadata) untuk informasi lebih lanjut mengenai pustaka `reflect-metadata`. + +## Parameter Decorators + +_Parameter Decorator_ dideklarasikan tepat sebelum a parameter dideklarasikan. +Parameter decorator diterapkan ke fungsi konstruktor pada kelas atau saat deklarasi method. +Parameter decorator tidak dapat digunakan dalam deklarasi file, overload, atau dalam konteks ambien lainnya (seperti dalam kelas `declare`). + +Ekspresi untuk parameter decorator akan dipanggil sebagai fungsi pada waktu proses, dengan tiga argumen berikut: + +1. Dapat berupa fungsi konstruktor kelas untuk anggota statis, atau prototipe kelas untuk anggota instance. +2. Nama anggota. +3. Indeks ordinal dari parameter dalam daftar parameter fungsi. + +> CATATAN  Sebuah parameter decorator hanya bisa digunakan untuk mengamati sebuah parameter yang telah dideklarasikan pada sebuah method. + +Nilai kembalian dari parameter decorator akan dibiarkan. + +Berikut adalah contoh penggunaan parameter decorator (`@required`) pada anggota kelas `Greeter`: + +```ts +class Greeter { + greeting: string; + + constructor(message: string) { + this.greeting = message; + } + + @validate + greet(@required name: string) { + return "Hello " + name + ", " + this.greeting; + } +} +``` + +Kemudian, kita dapat mendefinisikan decorator `@required` dan `@validate` menggunakan deklarasi fungsi berikut: + +```ts +import "reflect-metadata"; + +const requiredMetadataKey = Symbol("required"); + +function required( + target: Object, + propertyKey: string | symbol, + parameterIndex: number +) { + let existingRequiredParameters: number[] = + Reflect.getOwnMetadata(requiredMetadataKey, target, propertyKey) || []; + existingRequiredParameters.push(parameterIndex); + Reflect.defineMetadata( + requiredMetadataKey, + existingRequiredParameters, + target, + propertyKey + ); +} + +function validate( + target: any, + propertyName: string, + descriptor: TypedPropertyDescriptor +) { + let method = descriptor.value; + descriptor.value = function () { + let requiredParameters: number[] = Reflect.getOwnMetadata( + requiredMetadataKey, + target, + propertyName + ); + if (requiredParameters) { + for (let parameterIndex of requiredParameters) { + if ( + parameterIndex >= arguments.length || + arguments[parameterIndex] === undefined + ) { + throw new Error("Missing required argument."); + } + } + } + + return method.apply(this, arguments); + }; +} +``` + +Decorator `@required` menambahkan entri metadata yang menandakan bahwa parameter tersebut diperlukan. +Decorator `@validate` kemudian akan memvalidasi semua argumen yang ada, sebelum method-nya dijalankan. + +> CATATAN  Contoh ini memerlukan pustaka `reflect-metadata` +> Lihat [Metadata](#metadata) untuk informasi lebih lanjut mengenai pustaka `reflect-metadata`. + +## Metadata + +Beberapa contoh menggunakan pustaka `reflect-metadata` yang menambahkan polyfill untuk [API metadata eksperimental](https://github.com/rbuckton/ReflectDecorators). +Pustaka ini belum menjadi bagian dari standar ECMAScript (JavaScript). +Namun, ketika decorator secara resmi diadopsi sebagai bagian dari standar ECMAScript, ekstensi ini akan diusulkan untuk diadopsi. + +Anda dapat memasang pustaka ini melalui npm: + +```shell +npm i reflect-metadata --save +``` + +TypeScript menyertakan dukungan eksperimental untuk menghadirkan jenis metadata tertentu untuk deklarasi yang memiliki decorator. +Untuk mengaktifkan dukungan eksperimental ini, Anda harus mengatur opsi compiler `emitDecoratorMetadata` baik pada baris perintah atau di `tsconfig.json` Anda: + +**Command Line**: + +```shell +tsc --target ES5 --experimentalDecorators --emitDecoratorMetadata +``` + +**tsconfig.json**: + +```json tsconfig +{ + "compilerOptions": { + "target": "ES5", + "experimentalDecorators": true, + "emitDecoratorMetadata": true + } +} +``` + +Ketika diaktifkan, selama pustaka `reflect-metadata` di-import, informasi jenis design-time tambahan akan diekspos saat runtime. + +Kita dapat melihat action pada contoh berikut: + +```ts +import "reflect-metadata"; + +class Point { + x: number; + y: number; +} + +class Line { + private _p0: Point; + private _p1: Point; + + @validate + set p0(value: Point) { + this._p0 = value; + } + get p0() { + return this._p0; + } + + @validate + set p1(value: Point) { + this._p1 = value; + } + get p1() { + return this._p1; + } +} + +function validate( + target: any, + propertyKey: string, + descriptor: TypedPropertyDescriptor +) { + let set = descriptor.set; + descriptor.set = function (value: T) { + let type = Reflect.getMetadata("design:type", target, propertyKey); + if (!(value instanceof type)) { + throw new TypeError("Invalid type."); + } + set.call(target, value); + }; +} +``` + +Compiler TypeScript akan memasukkan informasi jenis design-time menggunakan decorator `@Reflect.metadata`. +Anda dapat menganggapnya setara dengan TypeScript berikut: + +```ts +class Line { + private _p0: Point; + private _p1: Point; + + @validate + @Reflect.metadata("design:type", Point) + set p0(value: Point) { + this._p0 = value; + } + get p0() { + return this._p0; + } + + @validate + @Reflect.metadata("design:type", Point) + set p1(value: Point) { + this._p1 = value; + } + get p1() { + return this._p1; + } +} +``` + +> CATATAN  Decorator metadata adalah fitur experimental dan mungkin dapat menyebabkan gangguan pada rilis di masa mendatang. diff --git a/packages/documentation/copy/id/reference/Iterators and Generators.md b/packages/documentation/copy/id/reference/Iterators and Generators.md new file mode 100644 index 000000000000..8e75e8fd8622 --- /dev/null +++ b/packages/documentation/copy/id/reference/Iterators and Generators.md @@ -0,0 +1,90 @@ +--- +title: Iterators and Generators +layout: docs +permalink: /id/docs/handbook/iterators-and-generators.html +oneline: Bagaimana Iterator dan Generator bekerja di TypeScript +translatable: true +--- + +## Iterasi + +Sebuah objek dapat dilakukan perulangan jika memiliki poperty [`Symbol.iterator`](Symbols.html#symboliterator). +Beberapa type bawaan seperti `Array`, `Map`, `Set`, `String`, `Int32Array`, `Uint32Array`, etc. sudah memiliki property `Symbol.iterator`. +Fungsi `Symbol.iterator` pada sebuah objek, bertanggungjawab untuk mengembalikan list nilai-nilai untuk menjalankan iterasi. + +## Pernyataan `for..of` + +`for..of` mengulang objek yang dapat diulang dengan cara memanggil properti `Symbol.iterator` pada objek tersebut. +Berikut ini loop `for..of` sederhana pada sebuah array: + +```ts +let someArray = [1, "string", false]; + +for (let entry of someArray) { + console.log(entry); // 1, "string", false +} +``` + +### Pernyataan `for..of` vs `for..in` + +Baik pernyataan `for..of` dan `for..in` akan mengiterasi list; yang membedakan antara keduanya adalah `for..in` akan mengembalikan daftar _keys_ dari objek tersebut, sedangkan `for..of` mengembalikan daftar _values_ property numeric dari objek yang diiterasi. + +Berikut adalah contoh implementasi dari perbedaan keduanya: + +```ts +let list = [4, 5, 6]; + +for (let i in list) { + console.log(i); // "0", "1", "2", +} + +for (let i of list) { + console.log(i); // "4", "5", "6" +} +``` + +Perbedaan lainnya adalah `for..in` bekerja pada objek apapun; ini berfungsi sebagai cara untuk memeriksa properti pada objek tersebut. +Di sisi lain, `for..of` tertarik pada nilai dari objek yang dapat diulang. Objek bawaan seperti `Map` dan`Set` mengimplementasikan properti `Symbol.iterator` yang memungkinkan akses ke nilai yang disimpan. + +```ts +let pets = new Set(["Cat", "Dog", "Hamster"]); +pets["species"] = "mammals"; + +for (let pet in pets) { + console.log(pet); // "species" +} + +for (let pet of pets) { + console.log(pet); // "Cat", "Dog", "Hamster" +} +``` + +### Pembuatan kode + +#### Menargetkan ES5 dan ES3 + +Ketika menargetkan ke engine ES5 atau ES3, iterator hanya membolehkan nilai bertipe `Array`. +Akan terjadi error jika `for..of` melakukan perulangan pada nilai yang bukan Array, bahkan jika nilai non Array tersebut memiliki property `Symbol.iterator`. + +Compiler akan menghasilkan perulangan `for` sederhana untuk `for..of`, misalnya: + +```ts +let numbers = [1, 2, 3]; +for (let num of numbers) { + console.log(num); +} +``` + +akan menghasilkan: + +```js +var numbers = [1, 2, 3]; +for (var _i = 0; _i < numbers.length; _i++) { + var num = numbers[_i]; + console.log(num); +} +``` + +#### Menargetkan ECMAScript 2015 dan yang lebih tinggi + +Ketika menargetkan ke engine ECMAScript 2015, compiler akan membuat perulangan `for..of` untuk menargetkan implementasi iterator bawaan di mesin. diff --git a/packages/documentation/copy/id/reference/JSX.md b/packages/documentation/copy/id/reference/JSX.md new file mode 100644 index 000000000000..e4e62fb43886 --- /dev/null +++ b/packages/documentation/copy/id/reference/JSX.md @@ -0,0 +1,442 @@ +--- +title: JSX +layout: docs +permalink: /id/docs/handbook/jsx.html +oneline: Menggunakan JSX dengan TypeScript +translatable: true +--- + +[JSX](https://facebook.github.io/jsx/) adalah sebuah sintaks tertanam, yang seperti XML. +Ini dimaksudkan untuk diubah menjadi JavaScript yang valid, meskipun semantik dari transformasi itu khusus untuk implementasi. +JSX menjadi populer dengan kerangka kerja [React](https://reactjs.org/), tetapi sejak itu juga melihat implementasi lain. +TypeScript mendukung embeding, pemeriksaan type, dan mengkompilasi JSX secara langsung ke JavaScript. + +## Dasar Penggunaan + +Untuk menggunakan JSX, anda harus melakukan dua hal berikut: + +1. Penamaan file dengan ekstensi `.tsx` +2. Mengaktifkan opsi `jsx` + +TypeScript memiliki tiga jenis mode JSX: `preserve`, `react`, dan `react-native`. +Mode tersebut hanya berlaku untuk stage, sedangkan untuk pemeriksaan type, hal itu tidak berlaku. +Mode `preserve` akan mempertahankan JSX sebagai bagian dari output untuk selanjutnya digunakan oleh langkah transformasi lain (mis. [Babel](https://babeljs.io/)). +Selain itu, output-nya akan memiliki ekstensi file `.jsx`. +Mode `react` akan mengeluarkan`React.createElement`, tidak perlu melalui transformasi JSX sebelum digunakan, dan outputnya akan memiliki ekstensi file `.js`. +Mode `react-native` sama dengan `pertahankan` yang mempertahankan semua JSX, tetapi hasilnya justru akan memiliki ekstensi file `.js`. + +| Mode | Input | Output | Output File Extension | +| -------------- | --------- | ---------------------------- | --------------------- | +| `preserve` | `
` | `
` | `.jsx` | +| `react` | `
` | `React.createElement("div")` | `.js` | +| `react-native` | `
` | `
` | `.js` | + +Anda dapat menetapkan mode ini menggunakan flag baris perintah `--jsx` atau opsi yang sesuai di file [tsconfig.json](/docs/handbook/tsconfig-json.html) Anda. + +> \*Catatan: Anda dapat menentukan fungsi factory JSX yang akan digunakan saat menargetkan react JSX emit dengan opsi `--jsxFactory` (default ke `React.createElement`) + +## Opeartor `as` + +Ingat bagaimana menulis penegasan type: + +```ts +var foo = bar; +``` + +Ini menegaskan variabel `bar` memiliki type `foo`. +Sejak TypeScript juga menggunakan kurung siku untuk penegasan type, mengkombinasikannya dengan sintaks JSX akan menimbulkan kesulitan tertentu. Hasilnya, TypeScript tidak membolehkan penggunaan kurung siku untuk penegasan type pada file `.tsx`. + +Karena sintaks diatas tidak bisa digunakan pada file `.tsx`, maka alternatif untuk penegasan type dapat menggunakan operator `as`. +Contohnya dapat dengan mudah ditulis ulang dengan operator `as`. + +```ts +var foo = bar as foo; +``` + +Operator `as` tersedia dikedua jenis file, `.ts` dan `.tsx`, dan memiliki perlakuan yang sama seperti penegasan type menggunakan kurung siku. + +## Pemeriksaan Type + +Urutan yang harus dimengerti mengenai pemeriksaan type di JSX, yaitu pertama anda harus memahami perbedaan antara elemen intrinsik dan elemen berbasiskan nilai. Terdapat sebuah ekspresi `` dan `expr` yang mungkin mengacu pada suatu hal yang intrinsik pada suatu lingkungan (misalnya `div` atau `span` dalam lingkungan DOM) atau pada komponen custom yang telah Anda buat. +Ini penting karena dua alasan berikut: + +1. Untuk React, elemen intrinsik dianggap sebagai string (`React.createElement("div")`), sedangkan komponen yang Anda buat bukan (`React.createElement(MyComponent)`). +2. Type dari atribut yang dilewatkan ke elemen JSX seharusnya terlihat berbeda. + Atribut elemen intrinsik seharusnya diketahui _secara intrinsik_ sedangkan komponen akan seperti ingin untuk menentukan kumpulan atribut mereka sendiri. + +TypeScript menggunakan [beberapa convention yang dengan React](http://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components) untuk membedakannya. +Elemen intrinsik selalu dimulai dengan huruf kecil, dan elemen berbasiskan nilai selalu dimulai dengan huruf besar. + +## Elemen intrinsik + +Elemen intrinsik dicari pada interface khusus, yaitu `JSX.IntrinsicElements`. +Standarnya, jika interface ini tidak ditentukan, maka apapun yang terjadi dan elemen intrinsik tidak akan diperiksa type-nya. +Namun, jika interface ini ada, maka nama elemen intrinsik akan dicari sebagai property di interface `JSX.IntrinsicElements`. +Contohnya: + +```ts +declare namespace JSX { + interface IntrinsicElements { + foo: any; + } +} + +; // ok +; // error +``` + +Pada contoh diatas, `` akan berjalan dengan baik, tapi `` akan menghasilkan error, karena `` tidak ditentukan pada interface `JSX.IntrinsicElements`. + +> Catatan: Anda juga bisa menentukan indexer untuk mendapatkan seluruh elemen bertipe string didalam `JSX.IntrinsicElements`, seperti berikut: + +```ts +declare namespace JSX { + interface IntrinsicElements { + [elemName: string]: any; + } +} +``` + +## Elemen Berbasiskan Nilai + +Elemen berbasiskan nilai akan dicari oleh identifier yang ada pada sebuah scope. + +```ts +import MyComponent from "./myComponent"; + +; // ok +; // error +``` + +Terdapat dua cara untuk mendefinisikan sebuah elemen berbasiskan nilai, yaitu: + +1. Function Component (FC) +2. Class Component + +Karena kedua jenis elemen berbasis nilai ini tidak dapat dibedakan satu sama lain dalam ekspresi JSX, maka pertama TS akan mencoba menyelesaikan ekspresi tersebut sebagai Function Component menggunakan overloading. Jika proses berhasil, maka TS selesai menyelesaikan ekspresi ke deklarasinya. Jika gagal untuk menyelesaikan sebagai Function Component, maka TS kemudian akan mencoba untuk menyelesaikannya sebagai Class Component. Jika gagal, TS akan melaporkan kesalahan. + +### Function Component + +Seperti namanya, komponen ini didefinisikan menggunakan fungsi JavaScript dimana argumen pertamanya adalah sebuah `props` objek. +TS memberlakukan bahwa type kembaliannya harus dapat diberikan ke `JSX.Element`. + +```ts +interface FooProp { + name: string; + X: number; + Y: number; +} + +declare function AnotherComponent(prop: {name: string}); +function ComponentFoo(prop: FooProp) { + return ; +} + +const Button = (prop: {value: string}, context: { color: string }) =>