From 31e8ec021508b05c3bc94d711003cdbd6308067f Mon Sep 17 00:00:00 2001 From: Resi Respati Date: Thu, 20 Jun 2024 17:45:45 +0700 Subject: [PATCH 1/2] docs: translate Using TypeScript --- src/content/learn/typescript.md | 146 ++++++++++++++++---------------- 1 file changed, 73 insertions(+), 73 deletions(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 7edf8eb6e..77d6fe5f0 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -1,57 +1,57 @@ --- -title: Using TypeScript +title: Menggunakan TypeScript re: https://github.com/reactjs/react.dev/issues/5960 --- -TypeScript is a popular way to add type definitions to JavaScript codebases. Out of the box, TypeScript [supports JSX](/learn/writing-markup-with-jsx) and you can get full React Web support by adding [`@types/react`](https://www.npmjs.com/package/@types/react) and [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) to your project. +TypeScript adalah salah satu cara populer untuk menambahkan definisi *type* ke dalam basis kode JavaScript. Secara bawaan, TypeScript [mendukung JSX](/learn/writing-markup-with-jsx) dan Anda bisa mendapatkan dukungan penuh React Web dengan menambahkan [`@types/react`](https://www.npmjs.com/package/@types/react) dan [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) ke proyek Anda. -* [TypeScript with React Components](/learn/typescript#typescript-with-react-components) -* [Examples of typing with Hooks](/learn/typescript#example-hooks) -* [Common types from `@types/react`](/learn/typescript/#useful-types) -* [Further learning locations](/learn/typescript/#further-learning) +* [TypeScript dengan Komponen React](/learn/typescript#typescript-with-react-components) +* [Contoh menambahkan *type* dalam Hooks](/learn/typescript#example-hooks) +* [*Types* umum dari `@types/react`](/learn/typescript/#useful-types) +* [Tempat pembelajaran lebih lanjut](/learn/typescript/#further-learning) -## Installation {/*installation*/} +## Pemasangan {/*installation*/} -All [production-grade React frameworks](/learn/start-a-new-react-project#production-grade-react-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation: +Semua [kerangka kerja React tingkat produksi](/learn/start-a-new-react-project#production-grade-react-frameworks) menawarkan dukungan untuk menggunakan TypeScript. Ikuti panduan khusus kerangka kerja tersebut untuk pemasangan: - [Next.js](https://nextjs.org/docs/app/building-your-application/configuring/typescript) - [Remix](https://remix.run/docs/en/1.19.2/guides/typescript) - [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/) - [Expo](https://docs.expo.dev/guides/typescript/) -### Adding TypeScript to an existing React project {/*adding-typescript-to-an-existing-react-project*/} +### Menambahkan TypeScript ke proyek React yang ada {/*adding-typescript-to-an-existing-react-project*/} -To install the latest version of React's type definitions: +Untuk memasang versi terbaru definisi *type* React: npm install @types/react @types/react-dom -The following compiler options need to be set in your `tsconfig.json`: +Opsi *compiler* berikut perlu disetel dalam `tsconfig.json` Anda: -1. `dom` must be included in [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Note: If no `lib` option is specified, `dom` is included by default). -1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) must be set to one of the valid options. `preserve` should suffice for most applications. - If you're publishing a library, consult the [`jsx` documentation](https://www.typescriptlang.org/tsconfig/#jsx) on what value to choose. +1. `dom` harus disertakan dalam [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Catatan: Jika tidak ada opsi `lib` yang disetel, `dom` disetel secara bawaan). +1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) harus desetel ke salah satu opsi yang valid. `preserve` seharusnya cukup untuk sebagian besar aplikasi. + Jika Anda menerbitkan pustaka (*library*), lihat [dokumentasi `jsx`](https://www.typescriptlang.org/tsconfig/#jsx) untuk mengetahui opsi yang harus dipilih. -## TypeScript with React Components {/*typescript-with-react-components*/} +## TypeScript dengan Komponen React {/*typescript-with-react-components*/} -Every file containing JSX must use the `.tsx` file extension. This is a TypeScript-specific extension that tells TypeScript that this file contains JSX. +Setiap *file* yang berisi JSX harus menggunakan ekstensi *file* `.tsx`. Ini adalah ekstensi khusus TypeScript yang memberi tahu TypeScript bahwa *file* ini berisi JSX. -Writing TypeScript with React is very similar to writing JavaScript with React. The key difference when working with a component is that you can provide types for your component's props. These types can be used for correctness checking and providing inline documentation in editors. +Menulis TypeScript dengan React sangat mirip dengan menulis JavaScript dengan React. Perbedaan utama saat bekerja dengan komponen adalah Anda dapat menyediakan *type* untuk *props* komponen Anda. *Type* ini dapat digunakan untuk memeriksa kebenaran dan menyediakan dokumentasi sebaris di editor. -Taking the [`MyButton` component](/learn#components) from the [Quick Start](/learn) guide, we can add a type describing the `title` for the button: +Dengan mengambil [komponen `MyButton`](/learn#components) dari panduan [Mulai Cepat](/learn), kita dapat menambahkan *type* yang mendeskripsikan `title` untuk tombol: @@ -80,19 +80,19 @@ export default App = AppTSX; -These sandboxes can handle TypeScript code, but they do not run the type-checker. This means you can amend the TypeScript sandboxes to learn, but you won't get any type errors or warnings. To get type-checking, you can use the [TypeScript Playground](https://www.typescriptlang.org/play) or use a more fully-featured online sandbox. +*Sandbox* ini dapat menangani kode TypeScript, tetapi tidak menjalankan pemeriksa *type*. Ini berarti Anda dapat mengubah *sandbox* TypeScript untuk belajar, tetapi Anda tidak akan mendapatkan kesalahan (*error*) atau peringatan (*warning*) *type* apa pun. Untuk mendapatkan pemeriksaan *type*, Anda dapat menggunakan [TypeScript Playground](https://www.typescriptlang.org/play) atau menggunakan *sandbox* daring yang berfitur lebih lengkap. -This inline syntax is the simplest way to provide types for a component, though once you start to have a few fields to describe it can become unwieldy. Instead, you can use an `interface` or `type` to describe the component's props: +Sintaksis sebaris ini adalah cara paling sederhana untuk menyediakan *type* bagi suatu komponen, namun setelah Anda mulai memiliki beberapa *field* untuk mendeskripsikannya, hal ini akan menjadi lebih sulit dibaca. Sebagai gantinya, Anda dapat menggunakan `interface` atau `type` untuk mendeskripsikan *props* sebuah komponen: ```tsx src/App.tsx active interface MyButtonProps { - /** The text to display inside the button */ + /** Teks yang ditampilkan di dalam tombol */ title: string; - /** Whether the button can be interacted with */ + /** Apakah tombol dapat diklik atau tidak */ disabled: boolean; } @@ -119,32 +119,32 @@ export default App = AppTSX; -The type describing your component's props can be as simple or as complex as you need, though they should be an object type described with either a `type` or `interface`. You can learn about how TypeScript describes objects in [Object Types](https://www.typescriptlang.org/docs/handbook/2/objects.html) but you may also be interested in using [Union Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) to describe a prop that can be one of a few different types and the [Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) guide for more advanced use cases. +*Type* yang mendeskripsikan *props* komponen Anda dapat sesederhana atau serumit yang Anda perlukan, namun *props* tersebut harus berupa tipe objek yang dideskripsikan dengan `type` atau `interface`. Anda dapat mempelajari tentang cara TypeScript mendeskripsikan objek di [*Object Types*](https://www.typescriptlang.org/docs/handbook/2/objects.html) tetapi Anda mungkin juga tertarik menggunakan [*Union Types*](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) untuk mendeskripsikan properti yang dapat berupa salah satu dari beberapa *type* yang berbeda dan panduan [*Creating Types from Types*](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) untuk kasus penggunaan yang lebih lanjut. -## Example Hooks {/*example-hooks*/} +## Contoh Hooks {/*example-hooks*/} -The type definitions from `@types/react` include types for the built-in Hooks, so you can use them in your components without any additional setup. They are built to take into account the code you write in your component, so you will get [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) a lot of the time and ideally do not need to handle the minutiae of providing the types. +Definisi *type* dari `@types/react` menyertakan *type* untuk Hooks bawaan, sehingga Anda dapat menggunakannya dalam komponen tanpa pengaturan tambahan apa pun. Definisi tersebut dibuat untuk memperhitungkan kode yang Anda tulis dalam komponen, sehingga Anda akan memperoleh [*type* yang disimpulkan](https://www.typescriptlang.org/docs/handbook/type-inference.html) sering kali dan idealnya tidak perlu menangani hal-hal sepele dalam menyediakan *type* sendiri. -However, we can look at a few examples of how to provide types for Hooks. +Namun, kita dapat melihat beberapa contoh tentang cara menyediakan *type* untuk Hooks. ### `useState` {/*typing-usestate*/} -The [`useState` Hook](/reference/react/useState) will re-use the value passed in as the initial state to determine what the type of the value should be. For example: +[Hook `useState`](/reference/react/useState) akan menggunakan kembali nilai yang diberikan sebagai *state* awal untuk menentukan *type* dari nilai yang seharusnya. Misalnya: ```ts -// Infer the type as "boolean" +// Menyimpulkan type sebagai "boolean" const [enabled, setEnabled] = useState(false); ``` -This will assign the type of `boolean` to `enabled`, and `setEnabled` will be a function accepting either a `boolean` argument, or a function that returns a `boolean`. If you want to explicitly provide a type for the state, you can do so by providing a type argument to the `useState` call: +Ini akan menetapkan *type* `boolean` ke `enabled`, dan `setEnabled` akan menjadi fungsi yang menerima argumen `boolean`, atau fungsi yang mengembalikan `boolean`. Jika Anda ingin secara eksplisit memberikan *type* untuk *state*, Anda dapat melakukannya dengan memberikan argumen *type* ke panggilan `useState`: ```ts -// Explicitly set the type to "boolean" +// Menyetel type ke "boolean" secara eksplisit const [enabled, setEnabled] = useState(false); ``` -This isn't very useful in this case, but a common case where you may want to provide a type is when you have a union type. For example, `status` here can be one of a few different strings: +Hal ini tidak terlalu berguna dalam kasus ini, tetapi kasus umum di mana Anda mungkin ingin memberikan *type* adalah ketika Anda memiliki *union type*. Misalnya, `status` di sini dapat berupa salah satu dari beberapa string yang berbeda: ```ts type Status = "idle" | "loading" | "success" | "error"; @@ -152,7 +152,7 @@ type Status = "idle" | "loading" | "success" | "error"; const [status, setStatus] = useState("idle"); ``` -Or, as recommended in [Principles for structuring state](/learn/choosing-the-state-structure#principles-for-structuring-state), you can group related state as an object and describe the different possibilities via object types: +Atau, seperti yang direkomendasikan dalam [Prinsip-prinsip untuk menata state](/learn/choosing-the-state-structure#principles-for-structuring-state), Anda dapat mengelompokkan *state* terkait sebagai objek dan mendeskripsikan berbagai kemungkinan melalui *type* objek: ```ts type RequestState = @@ -166,7 +166,7 @@ const [requestState, setRequestState] = useState({ status: 'idle' ### `useReducer` {/*typing-usereducer*/} -The [`useReducer` Hook](/reference/react/useReducer) is a more complex Hook that takes a reducer function and an initial state. The types for the reducer function are inferred from the initial state. You can optionally provide a type argument to the `useReducer` call to provide a type for the state, but it is often better to set the type on the initial state instead: +[Hook `useReducer`](/reference/react/useReducer) adalah Hook yang lebih kompleks yang mengambil fungsi *reducer* dan *state* awal. *Type* untuk fungsi *reducer* disimpulkan dari *state* awal. Anda dapat secara opsional memberikan argumen *type* ke panggilan `useReducer` untuk memberikan *type* bagi *state* tersebut, tetapi sering kali lebih baik untuk menetapkan *type* pada *state* awal sebagai gantinya: @@ -221,14 +221,14 @@ export default App = AppTSX; -We are using TypeScript in a few key places: +Kita menggunakan TypeScript di beberapa tempat penting: - - `interface State` describes the shape of the reducer's state. - - `type CounterAction` describes the different actions which can be dispatched to the reducer. - - `const initialState: State` provides a type for the initial state, and also the type which is used by `useReducer` by default. - - `stateReducer(state: State, action: CounterAction): State` sets the types for the reducer function's arguments and return value. + - `interface State` menjelaskan bentuk *state* dari *reducer*. + - `type CounterAction` menjelaskan berbagai *action* yang dapat dikirimkan ke *reducer*. + - `const initialState: State` menyediakan *type* untuk *state* awal, dan juga *type* yang digunakan oleh `useReducer` secara bawaan. + - `stateReducer(state: State, action: CounterAction): State` menetapkan *type* untuk argumen fungsi *reducer* dan nilai pengembalian. -A more explicit alternative to setting the type on `initialState` is to provide a type argument to `useReducer`: +Alternatif yang lebih eksplisit untuk menetapkan *type* pada `initialState` adalah dengan memberikan argumen *type* ke `useReducer`: ```ts import { stateReducer, State } from './your-reducer-implementation'; @@ -242,9 +242,9 @@ export default function App() { ### `useContext` {/*typing-usecontext*/} -The [`useContext` Hook](/reference/react/useContext) is a technique for passing data down the component tree without having to pass props through components. It is used by creating a provider component and often by creating a Hook to consume the value in a child component. +[Hook `useContext`](/reference/react/useContext) adalah teknik untuk meneruskan data ke bawah pohon komponen tanpa harus meneruskan *props* melalui komponen. Teknik ini digunakan dengan membuat komponen penyedia dan sering kali dengan membuat Hook untuk menggunakan nilai dalam komponen anak. -The type of the value provided by the context is inferred from the value passed to the `createContext` call: +*Type* dari nilai yang disediakan oleh *Context* disimpulkan dari nilai yang diteruskan ke panggilan `createContext`: @@ -284,22 +284,22 @@ export default App = AppTSX; -This technique works when you have a default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`. +Teknik ini berfungsi saat Anda memiliki nilai bawaan yang masuk akal - tetapi terkadang ada kasus saat Anda tidak memilikinya, dan dalam kasus tersebut `null` dapat terasa masuk akal sebagai nilai bawaan. Namun, untuk memungkinkan sistem *type* memahami kode Anda, Anda perlu secara eksplisit menetapkan `ContextShape | null` pada `createContext`. -This causes the issue that you need to eliminate the `| null` in the type for context consumers. Our recommendation is to have the Hook do a runtime check for it's existence and throw an error when not present: +Hal ini menyebabkan masalah yang mengharuskan Anda menghilangkan `| ​​null` dalam *type* untuk *consumer* *Context*. Rekomendasi kami adalah agar Hook melakukan pemeriksaan *runtime* untuk keberadaannya dan memunculkan kesalahan saat tidak ada: ```js {5, 16-20} import { createContext, useContext, useState, useMemo } from 'react'; -// This is a simpler example, but you can imagine a more complex object here +// Ini adalah contoh yang lebih sederhana, namun Anda dapat membayangkan obyek yang lebih kompleks di sini. type ComplexObject = { kind: string }; -// The context is created with `| null` in the type, to accurately reflect the default value. +// Context dibuat dengan `| null` dalam type, untuk merefleksikan nilai bawaan secara akurat. const Context = createContext(null); -// The `| null` will be removed via the check in the Hook. +// `| null` akan dihapus melalui pemeriksaan di dalam Hook. const useGetComplexObject = () => { const object = useContext(Context); if (!object) { throw new Error("useGetComplexObject must be used within a Provider") } @@ -329,17 +329,17 @@ function MyComponent() { ### `useMemo` {/*typing-usememo*/} -The [`useMemo`](/reference/react/useMemo) Hooks will create/re-access a memorized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the Hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the Hook. +Hook [`useMemo`](/reference/react/useMemo) akan membuat/mengakses ulang nilai yang tersimpan dari pemanggilan fungsi, dan menjalankan ulang fungsi hanya saat dependensi yang diteruskan sebagai parameter ke-2 diubah. Hasil pemanggilan Hook disimpulkan dari nilai yang dikembalikan dari fungsi di parameter pertama. Anda dapat lebih eksplisit dengan memberikan argumen *type* ke Hook. ```ts -// The type of visibleTodos is inferred from the return value of filterTodos +// Type dari visibleTodos disimpulkan dari nilai kembalian filterTodos const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]); ``` ### `useCallback` {/*typing-usecallback*/} -The [`useCallback`](/reference/react/useCallback) provide a stable reference to a function as long as the dependencies passed into the second parameter are the same. Like `useMemo`, the function's type is inferred from the return value of the function in the first parameter, and you can be more explicit by providing a type argument to the Hook. +[`useCallback`](/reference/react/useCallback) menyediakan referensi stabil ke suatu fungsi selama dependensi yang dimasukkan ke parameter kedua sama. Seperti `useMemo`, *type* fungsi disimpulkan dari nilai kembalian fungsi di parameter pertama, dan Anda dapat lebih eksplisit dengan memberikan argumen *type* ke Hook. ```ts @@ -348,9 +348,9 @@ const handleClick = useCallback(() => { }, [todos]); ``` -When working in TypeScript strict mode `useCallback` requires adding types for the parameters in your callback. This is because the type of the callback is inferred from the return value of the function, and without parameters the type cannot be fully understood. +Saat bekerja dalam mode *strict* TypeScript, `useCallback` mengharuskan penambahan *type* untuk parameter dalam *callback* Anda. Hal ini karena *type* dari *callback* disimpulkan dari nilai pengembalian fungsi, dan tanpa parameter, *type* tersebut tidak dapat dipahami sepenuhnya. -Depending on your code-style preferences, you could use the `*EventHandler` functions from the React types to provide the type for the event handler at the same time as defining the callback: +Bergantung pada preferensi gaya kode Anda, Anda dapat menggunakan fungsi `*EventHandler` dari *type* React untuk menyediakan *type* bagi *event handler* pada saat yang sama saat mendefinisikan *callback*: ```ts import { useState, useCallback } from 'react'; @@ -371,13 +371,13 @@ export default function Form() { } ``` -## Useful Types {/*useful-types*/} +## *Type-type* lain yang berguna {/*useful-types*/} -There is quite an expansive set of types which come from the `@types/react` package, it is worth a read when you feel comfortable with how React and TypeScript interact. You can find them [in React's folder in DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). We will cover a few of the more common types here. +Ada sekumpulan *type* yang cukup luas yang berasal dari *package* `@types/react`, ini layak dibaca jika Anda merasa nyaman dengan cara React dan TypeScript berinteraksi. Anda dapat menemukannya [di folder React di DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). Kami akan membahas beberapa *type* yang lebih umum di sini. -### DOM Events {/*typing-dom-events*/} +### *Event* DP< {/*typing-dom-events*/} -When working with DOM events in React, the type of the event can often be inferred from the event handler. However, when you want to extract a function to be passed to an event handler, you will need to explicitly set the type of the event. +Saat bekerja dengan *event* DOM di React, *type* dari *event* sering kali dapat disimpulkan dari *event handler*. Namun, saat Anda ingin mengekstrak fungsi untuk diteruskan ke *event handler*, Anda perlu menetapkan *type* dari *event* secara eksplisit. @@ -407,15 +407,15 @@ export default App = AppTSX; -There are many types of events provided in the React types - the full list can be found [here](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373) which is based on the [most popular events from the DOM](https://developer.mozilla.org/en-US/docs/Web/Events). +Ada banyak jenis *events* yang disediakan dalam *type* React - daftar lengkapnya dapat ditemukan [di sini](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373) yang didasarkan pada [*event* paling populer dari DOM](https://developer.mozilla.org/en-US/docs/Web/Events). -When determining the type you are looking for you can first look at the hover information for the event handler you are using, which will show the type of the event. +Saat menentukan *type* yang Anda cari, pertama-tama Anda dapat melihat informasi *hover* untuk *event handler* yang Anda gunakan, yang akan menunjukkan tipe *event* tersebut. -If you need to use an event that is not included in this list, you can use the `React.SyntheticEvent` type, which is the base type for all events. +Jika Anda perlu menggunakan *event* yang tidak termasuk dalam daftar ini, Anda dapat menggunakan *type* `React.SyntheticEvent`, yang merupakan *type* dasar untuk semua *event*. -### Children {/*typing-children*/} +### Anak (*Children*) {/*typing-children*/} -There are two common paths to describing the children of a component. The first is to use the `React.ReactNode` type, which is a union of all the possible types that can be passed as children in JSX: +Ada dua jalur umum untuk mendeskripsikan anak dari suatu komponen. Yang pertama adalah dengan menggunakan *type* `React.ReactNode`, yang merupakan gabungan dari semua *type* yang mungkin yang dapat diteruskan sebagai anak dalam JSX: ```ts interface ModalRendererProps { @@ -424,7 +424,7 @@ interface ModalRendererProps { } ``` -This is a very broad definition of children. The second is to use the `React.ReactElement` type, which is only JSX elements and not JavaScript primitives like strings or numbers: +Ini adalah definisi anak yang sangat luas. Yang kedua adalah menggunakan *type* `React.ReactElement`, yang hanya berupa elemen JSX dan bukan primitif JavaScript seperti *string* atau angka: ```ts interface ModalRendererProps { @@ -433,13 +433,13 @@ interface ModalRendererProps { } ``` -Note, that you cannot use TypeScript to describe that the children are a certain type of JSX elements, so you cannot use the type-system to describe a component which only accepts `
  • ` children. +Perlu diingat, bahwa Anda tidak dapat menggunakan TypeScript untuk menjelaskan bahwa anak dari komponen adalah tipe elemen JSX tertentu, jadi Anda tidak dapat menggunakan sistem *type* untuk menjelaskan komponen yang hanya menerima anak `
  • `. -You can see an example of both `React.ReactNode` and `React.ReactElement` with the type-checker in [this TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA). +Anda dapat melihat contoh `React.ReactNode` dan `React.ReactElement` dengan pemeriksa *type* di [*playground* TypeScript ini](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA). -### Style Props {/*typing-style-props*/} +### *Props* *Style* {/*typing-style-props*/} -When using inline styles in React, you can use `React.CSSProperties` to describe the object passed to the `style` prop. This type is a union of all the possible CSS properties, and is a good way to ensure you are passing valid CSS properties to the `style` prop, and to get auto-complete in your editor. +Saat menggunakan *inline styles* di React, Anda dapat menggunakan `React.CSSProperties` untuk mendeskripsikan objek yang diteruskan ke *props* `style`. *Type* ini merupakan gabungan dari semua properti CSS yang mungkin, dan merupakan cara yang baik untuk memastikan Anda meneruskan properti CSS yang valid ke properti `style`, dan untuk mendapatkan pelengkapan otomatis di editor Anda. ```ts interface MyComponentProps { @@ -447,17 +447,17 @@ interface MyComponentProps { } ``` -## Further learning {/*further-learning*/} +## Pembelajaran lebih lanjut {/*further-learning*/} -This guide has covered the basics of using TypeScript with React, but there is a lot more to learn. -Individual API pages on the docs may contain more in-depth documentation on how to use them with TypeScript. +Panduan ini telah membahas dasar-dasar penggunaan TypeScript dengan React, tetapi masih banyak lagi yang dapat dipelajari. +Halaman API individual pada dokumentasi mungkin berisi dokumentasi yang lebih mendalam tentang cara menggunakannya dengan TypeScript. -We recommend the following resources: +Kami merekomendasikan sumber daya berikut: - - [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) is the official documentation for TypeScript, and covers most key language features. + - [Buku panduan TypeScript](https://www.typescriptlang.org/docs/handbook/) adalah dokumentasi resmi untuk TypeScript, dan mencakup sebagian besar fitur utama dari bahasa pemrograman ini. - - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) cover new features in depth. + - [Catatan rilis TypeScript](https://devblogs.microsoft.com/typescript/) membahas fitur-fitur baru secara mendalam. - - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) is a community-maintained cheatsheet for using TypeScript with React, covering a lot of useful edge cases and providing more breadth than this document. + - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) adalah lembar contekan yang dikelola komunitas untuk menggunakan TypeScript dengan React, yang mencakup banyak kasus tepi yang berguna dan menyediakan lebih banyak keluasan daripada dokumen ini. - - [TypeScript Community Discord](https://discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues. + - [Komunitas Discord TypeScript](https://discord.com/invite/typescript) adalah tempat yang bagus untuk mengajukan pertanyaan dan mendapatkan bantuan terkait masalah TypeScript dan React. From d99aa20f822bc5d3df0813e01f6f3ef8733c6f2f Mon Sep 17 00:00:00 2001 From: Resi Respati Date: Thu, 20 Jun 2024 21:25:26 +0700 Subject: [PATCH 2/2] Update src/content/learn/typescript.md Co-authored-by: M Haidar Hanif --- src/content/learn/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 77d6fe5f0..e37624be8 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -375,7 +375,7 @@ export default function Form() { Ada sekumpulan *type* yang cukup luas yang berasal dari *package* `@types/react`, ini layak dibaca jika Anda merasa nyaman dengan cara React dan TypeScript berinteraksi. Anda dapat menemukannya [di folder React di DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts). Kami akan membahas beberapa *type* yang lebih umum di sini. -### *Event* DP< {/*typing-dom-events*/} +### *Event* DOM {/*typing-dom-events*/} Saat bekerja dengan *event* DOM di React, *type* dari *event* sering kali dapat disimpulkan dari *event handler*. Namun, saat Anda ingin mengekstrak fungsi untuk diteruskan ke *event handler*, Anda perlu menetapkan *type* dari *event* secara eksplisit.