diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 7edf8eb6e..d277d4a50 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -1,57 +1,56 @@ --- -title: Using TypeScript +title: टाइपस्क्रिप्ट का उपयोग 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. - +टाइपस्क्रिप्ट एक पॉपुलर तरीका है जिससे जावास्क्रिप्ट कोडबेस में टाइप डेफिनीशन जोड़ी जा सकती है। टाइपस्क्रिप्ट [JSX](/learn/writing-markup-with-jsx) को समर्थन करता है, और आप अपनें परियोजना में [`@types/react`](https://www.npmjs.com/package/@types/react) and [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) जोड़कर पूर्ण रिएक्ट वेब समर्थन प्राप्त कर सकते हैं। -* [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) +* [टाइपस्क्रिप्ट के साथ रिएक्ट कंपोनेंट्स:](/learn/typescript#typescript-with-react-components) +* [हुक्स के साथ टाइपिंग के उदाहरण](/learn/typescript#example-hooks) +* [सामान्य प्रकारें से `@types/react`](/learn/typescript/#useful-types) +* [और सीखने के स्थान](/learn/typescript/#further-learning) ## Installation {/*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: +सभी [प्रोडक्शन-ग्रेड रिएक्ट फ्रेमवर्क्स](/learn/start-a-new-react-project#production-grade-react-frameworks) टाइपस्क्रिप्ट का समर्थन करते हैं। स्थापना के लिए फ्रेमवर्क विशिष्ट गाइड का पालन करें: + - [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*/} +### मौजूदा रिएक्ट परियोजना में टाइपस्क्रिप्ट जोड़ना {/*adding-typescript-to-an-existing-react-project*/} -To install the latest version of React's type definitions: +लेटेस्ट वर्शन की रिएक्ट के टाइप डेफिनीशन्स को स्थापित करने के लिए: npm install @types/react @types/react-dom -The following compiler options need to be set in your `tsconfig.json`: +आपके `tsconfig.json` में निम्नलिखित कंपाइलर विकल्प सेट करने की आवश्यकता है: -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` को [`lib`](https://www.typescriptlang.org/tsconfig/#lib) में शामिल किया जाना चाहिए (नोट: यदि कोई lib विकल्प निर्दिष्ट नहीं किया गया है, तो dom डिफ़ॉल्ट रूप से शामिल है). +1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) को मान्य विकल्पों में से एक पर सेट किया जाना चाहिए। अधिकांश अनुप्रयोगों के लिए, `preserve` काफी होगा। + यदि आप एक पुस्तकालय प्रकाशित कर रहे हैं, तो [`jsx` दस्तावेज़](https://www.typescriptlang.org/tsconfig/#jsx) पर आपको कौनसी मान चुननी चाहिए, उस पर परामर्श लें। -## TypeScript with React Components {/*typescript-with-react-components*/} +## रिएक्ट कंपोनेंट्स के साथ टाइपस्क्रिप्ट {/*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. +जिस भी फ़ाइल में JSX है, उसे `.tsx` फ़ाइल एक्सटेंशन का उपयोग करना चाहिए। यह एक टाइपस्क्रिप्ट-विशिष्ट एक्सटेंशन है जो टाइपस्क्रिप्ट को बताता है कि इस फ़ाइल में 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. +रिएक्ट के साथ टाइपस्क्रिप्ट लिखना रिएक्ट के साथ जावास्क्रिप्ट लिखने के बहुत मिलता-जुलता है। कंपोनेंट के साथ काम करते समय मुख्य अंतर है कि आप अपने कंपोनेंट के प्रॉप्स के लिए टाइप्स प्रदान कर सकते हैं। इन टाइप्स का उपयोग सहीता जाँच और संपादकों में इनलाइन दस्तावेज़ प्रदान करने के लिए किया जा सकता है। -Taking the [`MyButton` component](/learn#components) from the [Quick Start](/learn) guide, we can add a type describing the `title` for the button: +[Quick Start](/learn) गाइड से [`MyButton` कंपोनेंट](/learn#components) लेते हैं, हम बटन के लिए `title` का वर्णन करने के लिए एक टाइप जोड़ सकते हैं: @@ -80,11 +79,11 @@ 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. + ये सैंडबॉक्स टाइपस्क्रिप्ट को हैंडल कर सकते हैं, लेकिन वे टाइप-चेकर को चलाते नहीं हैं। इसका मतलब है कि आप टाइपस्क्रिप्ट सैंडबॉक्स को सीखने के लिए संशोधित कर सकते हैं, लेकिन आपको कोई टाइप त्रुटियाँ या चेतावनियाँ नहीं मिलेंगी। टाइप-चेकिंग प्राप्त करने के लिए, आप [टाइपस्क्रिप्ट Playground](https://www.typescriptlang.org/play) का उपयोग कर सकते हैं या एक और पूरी तरह से विशेषज्ञ ऑनलाइन सैंडबॉक्स का उपयोग कर सकते हैं। -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: +इस इनलाइन सिंटैक्स से एक कंपोनेंट के लिए टाइप्स प्रदान करने का सबसे सरल तरीका है, हालांकि जब आपको इसे विवरण देने के लिए कुछ फ़ील्ड होने लगते हैं, तो यह अनवान्य हो सकता है। इसके बजाय, आप कंपोनेंट के प्रॉप्स को विवरण देने के लिए एक इंटरफेस या टाइप का उपयोग कर सकते हैं: @@ -119,32 +118,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` या `interface` के साथ विवरणित एक ऑब्जेक्ट टाइप होना चाहिए। आप यहां [ऑब्जेक्ट टाइप्स](https://www.typescriptlang.org/docs/handbook/2/objects.html) में टाइपस्क्रिप्ट द्वारा ऑब्जेक्ट का विवरण कैसे किया जाता है के बारे में सीख सकते हैं, लेकिन आप एक प्रॉप को कुछ विभिन्न प्रकारों में से एक का विवरण देने के लिए [यूनियन टाइप्स](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) का उपयोग करने और और अधिक उन्नत उपयोग के मामलों के लिए [टाइप्स से टाइप्स बनाना](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) गाइड के लिए भी रुचि रख सकते हैं। -## Example Hooks {/*example-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. +`@types/react` से आने वाले टाइप डेफिनीशन्स में बिल्ट-इन हुक्स के लिए टाइप्स शामिल हैं, इसलिए आप उन्हें अपने कंपोनेंट्स में किसी भी अतिरिक्त सेटअप के बिना उपयोग कर सकते हैं। वे आपके कंपोनेंट में लिखे गए कोड को ध्यान में रखकर बनाए गए हैं, इसलिए आपको बहुत से समय [अनुमानित टाइप्स](https://www.typescriptlang.org/docs/handbook/type-inference.html) मिलेंगे और आपको आशा है कि आपको टाइप्स प्रदान करने के छोटे विवादों का सामना करने की आवश्यकता नहीं होगी। -However, we can look at a few examples of how to provide types for 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: +[`useState` हुक](/reference/react/useState) आपको आपके पारिवारिक स्थिति के रूप में पारित मूल स्थिति का पुनर्बच्चन करेगा ताकि वह मूल्य का प्रकार क्या होना चाहिए यह निर्धारित कर सके। उदाहरण के लिए: ```ts // Infer the type as "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: +`enabled` को `boolean` का प्रकार सौंपेगा, और `setEnabled` एक फ़ंक्शन होगा जो या एक `boolean` तर्क स्वीकार करता है, या एक `boolean` वापस करने वाले फ़ंक्शन को। यदि आप रूपयांतरित रूप से राज्य के लिए एक प्रकार प्रदान करना चाहते हैं, तो आप `useState` कॉल को एक प्रकार के तर्क से सही करके ऐसा कर सकते हैं: ```ts // Explicitly set the type to "boolean" 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: +इस मामले में यह बहुत उपयोगी नहीं है, लेकिन एक सामान्य केस जहां आप एक प्रकार प्रदान करना चाह सकते हैं, यह है जब आपके पास एक यूनियन टाइप है। उदाहरण के लिए, यहां `status` कुछ विभिन्न स्ट्रिंग्स में से एक हो सकता है: ```ts type Status = "idle" | "loading" | "success" | "error"; @@ -152,7 +151,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: +या, जैसा कि [राज्य को संरचित करने के लिए सिद्धांत](/learn/choosing-the-state-structure#principles-for-structuring-state) में सिफारिश की गई है, आप संबंधित स्थिति को एक ऑब्जेक्ट के रूप में ग्रुप कर सकते हैं और ऑब्जेक्ट टाइप्स के माध्यम से विभिन्न संभावनाओं का विवरण कर सकते हैं: ```ts type RequestState = @@ -166,7 +165,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: +[`useReducer` हुक](/reference/react/useReducer) एक और जटिल हुक है जो एक रीड्यूसर फ़ंक्शन और एक प्रारंभिक स्थिति लेता है। रीड्यूसर फ़ंक्शन के लिए टाइप्स मूल स्थिति से अनुमानित की जाती हैं। आप `useReducer` कॉल के लिए एक प्रकार तर्क प्रदान करने के लिए एक प्रकार तर्क प्रदान कर सकते हैं, लेकिन अक्सर बेहतर होता है कि आप प्रारंभिक स्थिति पर टाइप सेट करें: @@ -221,14 +220,14 @@ export default App = AppTSX; -We are using TypeScript in a few key places: +हम टाइपस्क्रिप्ट का उपयोग कुछ कुंजीय स्थानों पर कर रहे हैं: - - `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` रीड्यूसर की स्थिति का आकार वर्णन करता है। + - `type CounterAction` विभिन्न क्रियाएँ वर्णन करता है जो रीड्यूसर को डिस्पैच की जा सकती हैं। +- `const initialState: State` प्रारंभिक स्थिति के लिए एक प्रकार प्रदान करता है, और यह उस प्रकार का उपयोग `useReducer` द्वारा डिफ़ॉल्ट रूप से किया जाता है। +- `stateReducer(state: State, action: CounterAction): State` रीड्यूसर फ़ंक्शन के तर्क और वापसी मूल्य के लिए टाइप्स सेट करता है। -A more explicit alternative to setting the type on `initialState` is to provide a type argument to `useReducer`: +`initialState` पर टाइप सेट करने का और एक स्पष्ट विकल्प `useReducer` को एक प्रकार तर्क प्रदान करना है: ```ts import { stateReducer, State } from './your-reducer-implementation'; @@ -242,9 +241,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. +[`useContext` हुक](/reference/react/useContext) एक तकनीक है जिससे आप प्रोप्स को कंपोनेंट के माध्यम से पास करने के बिना डेटा को कंपोनेंट ट्री के नीचे पहुँचा सकते हैं। इसका उपयोग एक प्रोवाइडर कंपोनेंट बनाकर और सामान्यत: एक चाइल्ड कंपोनेंट में मूल्य को उपभोग करने के लिए एक हुक बनाकर किया जाता है। -The type of the value provided by the context is inferred from the value passed to the `createContext` call: +कॉन्टेक्स्ट द्वारा प्रदान किए जाने वाले मूल्य का प्रकार `createContext` कॉल को पास किए गए मूल्य से अनुमानित होता है: @@ -284,9 +283,9 @@ 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`. +यह तकनीक तब कारगर है जब आपके पास एक ऐसा मूल्य है जिसका सांविदानिक रूप से कोई डिफ़ॉल्ट मूल्य है - लेकिन कभी-कभी ऐसे केसेस हो सकते हैं जब ऐसा नहीं है, और उन केसेस में `null` को एक डिफ़ॉल्ट मूल्य के रूप में सही महसूस हो सकता है। हालांकि, अपने कोड को समझने के लिए टाइप-सिस्टम को अनुमति देने के लिए, आपको `createContext` पर `ContextShape | null` को स्पष्ट रूप से सेट करना होगा। -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: +इससे एक समस्या उत्पन्न होती है कि आपको कॉन्टेक्स्ट कंस्यूमर्स के लिए टाइप में `| null` को हटाना होता है। हमारी सिफारिश है कि हुक इसके मौजूदगी के लिए एक रनटाइम चेक करें और उपस्थित नहीं होने पर एक त्रुटि फेंके: ```js {5, 16-20} import { createContext, useContext, useState, useMemo } from 'react'; @@ -329,7 +328,7 @@ 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. +[`useMemo`](/reference/react/useMemo) हुक्स एक फ़ंक्शन कॉल से एक स्मृति मेमोराइज़्ड मूल्य बनाएगा/पुनर-पहुँचेगा, केवल जब दूसरे पैरामीटर के रूप में पास किए गए डिपेंडेंसीज़ बदले जाएँ। हुक को कॉल करने का परिणाम पहले पैरामीटर में दिए गए फ़ंक्शन से इन्फर किया जाता है। आप हुक को एक प्रकार तर्क प्रदान करके अधिक स्पष्ट हो सकते हैं। ```ts // The type of visibleTodos is inferred from the return value of filterTodos @@ -339,7 +338,7 @@ 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) दूसरे पैरामीटर में पास किए गए डिपेंडेंसीज़ के समान होते हैं, एक फ़ंक्शन के लिए एक स्थिर संदर्भ प्रदान करता है। `useMemo` की तरह, पहले पैरामीटर में दिए गए फ़ंक्शन के वापसी मूल्य से फ़ंक्शन का प्रकार इन्फर किया जाता है, और आप हुक को एक प्रकार तर्क प्रदान करके अधिक स्पष्ट हो सकते हैं। ```ts @@ -348,9 +347,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. +टाइपस्क्रिप्ट स्ट्रिक्ट मोड में काम करते समय, `useCallback` में आपको अपने कॉलबैक के पैरामीटर्स के लिए टाइप्स जोड़ना आवश्यक है। यह इसलिए है क्योंकि कॉलबैक के प्रकार को फ़ंक्शन की वापसी मूल्य से इन्फर किया जाता है, और पैरामीटर्स के बिना पूरी तरह से समझा नहीं जा सकता है। -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: +आपके कोड-स्टाइल की पसंद के आधार पर, आप `*EventHandler` फ़ंक्शन्स का उपयोग कर सकते हैं जो इवेंट हैंडलर के लिए टाइप प्रदान करने के लिए रिएक्ट टाइप्स से साथ ही कॉलबैक को परिभाषित करते हैं: ```ts import { useState, useCallback } from 'react'; @@ -371,13 +370,13 @@ export default function Form() { } ``` -## Useful Types {/*useful-types*/} +## उपयोगी टाइप्स {/*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. +`@types/react` पैकेज से एक काफी विस्तारित सेट की गई है जिसमें से कई टाइप्स शामिल हैं, जब आप रिएक्ट और टाइपस्क्रिप्ट के इंटरएक्ट के साथ सहज महसूस करते हैं तो यह पठने लायक है। आप इन्हें [DefinitelyTyped में रिएक्ट के फ़ोल्डर](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts) में पा सकते हैं। यहां हम कुछ अधिक सामान्य टाइप्स कवर करेंगे। -### DOM Events {/*typing-dom-events*/} +### DOM इवेंट्स {/*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. +रिएक्ट में DOM इवेंट्स के साथ काम करते समय, इवेंट के प्रकार को अक्सर इवेंट हैंडलर से इन्फर किया जा सकता है। हालांकि, जब आप एक फ़ंक्शन को इवेंट हैंडलर को पास करने के लिए एक्सट्रैक्ट करना चाहते हैं, तो आपको इवेंट के प्रकार को स्पष्ट रूप से सेट करना होगा। @@ -407,15 +406,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). +रिएक्ट टाइप्स में कई प्रकार के इवेंट्स हैं - पूरी सूची [यहां](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373) मिल सकती है, जो [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. +आप जिस टाइप को ढूंढ रहे हैं, उसे तय करने के लिए पहले आप जिस इवेंट हैंडलर का उपयोग कर रहे हैं, उसके लिए होवर जानकारी देख सकते हैं, जिसमें इवेंट का प्रकार दिखाया जाएगा। -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. +यदि आपको इस सूची में शामिल नहीं किया गया कोई इवेंट चाहिए हो, तो आप `React.SyntheticEvent` टाइप का उपयोग कर सकते हैं, जो सभी इवेंट्स के लिए बेस टाइप है। -### Children {/*typing-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: +किसी कॉम्पोनेंट के बच्चों को वर्णन करने के लिए दो सामान्य पथ हैं। पहला है `React.ReactNode` टाइप का उपयोग करना, जो JSX में बच्चों के रूप में पास किए जा सकने वाले सभी संभावित टाइप्स का यूनियन है: ```ts interface ModalRendererProps { @@ -424,7 +423,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: +यह बच्चों का एक बहुत व्यापक परिभाषा है। दूसरा है `React.ReactElement` टाइप का उपयोग करना, जो केवल JSX एलिमेंट्स हैं और स्ट्रिंग्स या नंबर्स जैसे जावास्क्रिप्ट प्राइमिटिव्स नहीं हैं: ```ts interface ModalRendererProps { @@ -433,13 +432,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. +ध्यान दें कि आप JSX एलिमेंट्स के किसी विशिष्ट प्रकार के होने को वर्णन करने के लिए टाइपस्क्रिप्ट का उपयोग नहीं कर सकते हैं, इसलिए आप टाइप-सिस्टम का उपयोग करके एक कॉम्पोनेंट को वर्णन करने के लिए नहीं कर सकते हैं जो केवल `
  • ` बच्चों को स्वीकार करता है। -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). +आप [इस टाइपस्क्रिप्ट प्लेग्राउंड](https://www.typescriptlang.org/play?#code/https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA) में दोनों `React.ReactNode` और `React.ReactElement` का एक उदाहरण देख सकते हैं। -### Style Props {/*typing-style-props*/} +### स्टाइल प्रॉप्स {/*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. +रिएक्ट में इनलाइन स्टाइल का उपयोग करते समय, आप `React.CSSProperties` का उपयोग कर सकते हैं ताकि आप `style` प्रॉप को पास करने वाले ऑब्जेक्ट को वर्णन कर सकें। यह टाइप सभी संभावित CSS प्रॉपर्टीज़ का यूनियन है, और यह एक अच्छा तरीका है सुनिश्चित करने के लिए कि आप `style` प्रॉप को वैध CSS प्रॉपर्टीज़ पास कर रहे हैं, और अपने एडिटर में ऑटो-कम्प्लीट प्राप्त करने के लिए। ```ts interface MyComponentProps { @@ -447,17 +446,16 @@ interface MyComponentProps { } ``` -## Further learning {/*further-learning*/} +## आगे की सीखें {/*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. +यह गाइड टाइपस्क्रिप्ट को रिएक्ट के साथ उपयोग करने के मूल तत्वों को कवर करती है, लेकिन सीखने के लिए और भी बहुत कुछ है। डॉक्स पर व्यक्तिगत API पृष्ठों पर और भी विस्तृत दस्तावेज़ हो सकती हैं कि आप उन्हें टाइपस्क्रिप्ट के साथ कैसे उपयोग कर सकते हैं। -We recommend the following resources: +हम निम्नलिखित संसाधनों की सिफारिश करते हैं: - - [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) is the official documentation for TypeScript, and covers most key language features. +- [टाइपस्क्रिप्ट हैंडबुक](https://www.typescriptlang.org/docs/handbook/): टाइपस्क्रिप्ट के लिए आधिकारिक दस्तावेज़ है और अधिकांश कुंजीय भाषा सुविधाओं को कवर करता है। - - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) cover new features in depth. +- [टाइपस्क्रिप्ट रिलीज़ नोट्स](https://devblogs.microsoft.com/typescript/) नई फीचर्स को गहराई से कवर करता है। - - [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. +- [रिएक्ट टाइपस्क्रिप्ट Cheatsheet](https://react-typescript-cheatsheet.netlify.app/): यह एक समुदाय द्वारा बनाई गई एक cheatsheet है जो रिएक्ट के साथ टाइपस्क्रिप्ट का उपयोग करने के लिए है, जिसमें कई उपयोगी एज केस को कवर किया गया है और इस सापेक्षता को प्रदान करता है जो इस दस्तावेज़ से अधिक है। - - [TypeScript Community Discord](https://discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues. +- [टाइपस्क्रिप्ट समुदाय Discord](https://discord.com/invite/typescript): टाइपस्क्रिप्ट और रिएक्ट समस्याओं के साथ सवाल पूछने और मदद प्राप्त करने के लिए एक शानदार स्थान है।