From 1910eae29ca479a98238b520e8ace4c8d7208f64 Mon Sep 17 00:00:00 2001 From: Shajahan Shaik Date: Fri, 19 Jul 2024 19:47:14 -0500 Subject: [PATCH 01/44] translated using typescript --- src/content/learn/typescript.md | 134 ++++++++++++++++---------------- 1 file changed, 66 insertions(+), 68 deletions(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 7edf8eb6..eae870b5 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -1,57 +1,57 @@ --- -title: Using TypeScript +title: 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 అనేది JavaScript కోడ్‌బేస్‌లకు టైప్ నిర్వచనాలను చేర్చడానికి ప్రాచుర్యం పొందిన విధానం. TypeScript [JSX ని మద్దతు ఇస్తుంది](/learn/writing-markup-with-jsx) మరియు మీరు మీ ప్రాజెక్ట్‌కి [`@types/react`](https://www.npmjs.com/package/@types/react) మరియు [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) ను చేర్చడం ద్వారా పూర్తి React Web మద్దతు పొందవచ్చు. -* [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) +* [React Components తో TypeScript](/learn/typescript#typescript-with-react-components) +* [Hooks తో typing examples](/learn/typescript#example-hooks) +* [`@types/react` నుండి సాధారణ types](/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: + +## ఇన్‌స్టాలేషన్ {/*installation*/} + +అన్ని [production-grade React frameworks](/learn/start-a-new-react-project#production-grade-react-frameworks) TypeScript ఉపయోగాన్ని సపోర్ట్ చేస్తాయి. ఇన్‌స్టాలేషన్ కోసం ఫ్రేమ్‌వర్క్ ప్రత్యేక గైడ్‌ను అనుసరించండి: - [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/) +### ఉన్న React ప్రాజెక్ట్‌కు 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: +React యొక్క type నిర్వచనాల తాజా వెర్షన్ ఇన్‌స్టాల్ చేయడానికి: npm install @types/react @types/react-dom -The following compiler options need to be set in your `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. +మీ `tsconfig.json` లో, క్రింది compiler ఆప్షన్స్ సెట్ చేయాలి: -## TypeScript with React Components {/*typescript-with-react-components*/} +1. [`lib`](https://www.typescriptlang.org/tsconfig/#lib) లో `dom` ఉండాలి (గమనిక: ఎలాంటి `lib` ఆప్షన్ పేర్కొనబడలేదు అంటే, `dom` డిఫాల్ట్ గా ఉంటుంది). +1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) ని సరైన ఆప్షన్‌లలో ఒకదానిపై సెట్ చేయాలి. చాలా అప్లికేషన్స్‌కి `preserve` సరిపోతుంది. + మీరు లైబ్రరీని publish చేస్తున్నట్లు అయితే, ఎలాంటి విలువను ఎంచుకోవాలో [`jsx` డాక్యుమెంటేషన్](https://www.typescriptlang.org/tsconfig/#jsx) ను సంప్రదించండి. +## React Components తో TypeScript {/*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` ఫైల్ విస్తరణను ఉపయోగించాలి. ఇది TypeScript-extension, ఈ ఫైల్ లో JSX ఉందని TypeScript కి తెలియజేస్తుంది. -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. +React తో TypeScript వ్రాయడం, React తో JavaScript వ్రాయడముతో చాలా సమానం. ఒక కాంపోనెంట్‌తో పని చేస్తున్నప్పుడు ముఖ్యమైన తేడా మీరు మీ కాంపోనెంట్ యొక్క props కోసం types అందించవచ్చు. ఈ types సరిగ్గా ఉన్నాయో లేదో చెక్ చేయడానికి మరియు editor లో inline documentation అందించడానికి ఉపయోగించవచ్చు. -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` ను వివరిస్తున్న type ని జోడించవచ్చు: @@ -80,11 +80,12 @@ 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. +ఈ sandboxes TypeScript code ను handle చేయగలవు, కానీ type-checker ను run చేయలేవు. అంటే, మీరు TypeScript sandboxes లో సవరణలు చేయవచ్చు, కానీ మీకు ఏదైనా type errors లేదా హెచ్చరికలు రావు. type-checking పొందడానికి, మీరు [TypeScript Playground](https://www.typescriptlang.org/play) ను లేదా మరింత సర్వసన్నద్ధమైన online sandbox ను ఉపయోగించవచ్చు. -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: +ఈ inline syntax ఒక కాంపోనెంట్‌కు types అందించడానికి అత్యంత సులభమైన మార్గం, కానీ మీరు కొన్ని ఫీల్డ్స్‌ను వివరిస్తూ ప్రారంభించినప్పుడు ఇది గందరగోళంగా మారవచ్చు. దీనికి బదులుగా, మీరు కాంపోనెంట్ యొక్క props ను వివరిచేందుకు `interface` లేదా `type` ఉపయోగించవచ్చు: + @@ -119,32 +120,31 @@ 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. - +మీ కాంపోనెంట్ యొక్క props ను వివరిస్తున్న type అవసరమున్నంత సులభంగా లేదా క్లిష్టంగా ఉండవచ్చు, కానీ అవి `type` లేదా `interface` తో వివరిస్తే ఒక object type గా ఉండాలి. TypeScript objects ను ఎలా వివరిస్తుందో మీరు [Object Types](https://www.typescriptlang.org/docs/handbook/2/objects.html) లో నేర్చుకోవచ్చు కానీ మీరు [Union Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) ను కూడా props వివరిస్తూ ఉపయోగించడం గురించి ఆసక్తి చూపవచ్చు, ఇది కొన్ని విభిన్న type లలో ఒకటి కావచ్చు మరియు మరింత ఆధునిక ఉపయోగకేసులకు [Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) గైడ్ ఉపయోగపడుతుంది. -## Example Hooks {/*example-hooks*/} +## ఉదాహరణ 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` నుండి type నిర్వచనలు బిల్ట్-ఇన్ Hooks కోసం types కలిగి ఉంటాయి, కాబట్టి మీరు వాటిని మీ కంపోనెంట్లలో ఎలాంటి అదనపు సెటప్ లేకుండా ఉపయోగించవచ్చు. అవి మీ కంపోనెంట్ లో మీరు వ్రాసే కోడ్ ను పరిగణనలోకి తీసుకుంటాయి, కాబట్టి చాలా సార్లు మీరు [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) పొందుతారు మరియు సాధారణంగా types ను ఇవ్వడానికి ఎటువంటి సమస్యలు ఎదుర్కొనవలసిన అవసరం లేదు. -However, we can look at a few examples of how to provide types for Hooks. +అయితే, హుక్స్ కోసం types ను అందించే కొన్ని ఉదాహరణలను చూడవచ్చు. ### `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` Hook](/reference/react/useState) initial state గా ఇవ్వబడిన value ను తిరిగి ఉపయోగించి ఆ value యొక్క type ఏమిటి అని నిర్ధారిస్తుంది. ఉదాహరణకు: ```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` type ను కేటాయిస్తుంది, మరియు `setEnabled` `boolean` argument ను లేదా `boolean` ను రిటర్న్ చేసే function ను స్వీకరించే function అవుతుంది. మీరు state కోసం type ను స్పష్టంగా ఇవ్వాలనుకుంటే, మీరు `useState` కాల్ కు type argument ను ఇవ్వవచ్చు: ```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: +ఇది ఈ సందర్భంలో అంతగా ఉపయోగకరమైనది కాదు, కానీ మీరు type ను ఇవ్వాలనుకునే సాధారణ సందర్భం యూనియన్ type ఉన్నప్పుడు. ఉదాహరణకు, `status` ఇక్కడ కొన్ని వేర్వేరు strings లో ఒకటి కావచ్చు: ```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: +లేదా, [Principles for structuring state](/learn/choosing-the-state-structure#principles-for-structuring-state) లో సిఫారసు చేసినట్లు, మీరు సంబంధిత state ను ఒక object గా కలిపి, వేర్వేరు అవకాశాలను object types ద్వారా వివరించవచ్చు: ```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: +[`useReducer` Hook](/reference/react/useReducer) ఒక కాంప్లెక్స్ Hook, ఇది ఒక reducer function మరియు ఒక initial state ను తీసుకుంటుంది. reducer function కోసం types initial state నుండి అంచనా వేయబడతాయి. మీరు `useReducer` కాల్ కు type argument ను ఇస్తూ state కోసం type అందించవచ్చు, కానీ initial state పై type సెట్ చేయడం మంచిది: @@ -221,14 +221,14 @@ export default App = AppTSX; -We are using TypeScript in a few key places: +మేము TypeScript ను కొన్ని కీలక ప్రదేశాలలో ఉపయోగిస్తున్నాము: - - `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` reducer యొక్క state యొక్క ఆకారాన్ని వర్ణిస్తుంది. + - `type CounterAction` reducer కు పంపవచ్చే వేర్వేరు actions ను వర్ణిస్తుంది. + - `const initialState: State` initial state కు type ను అందిస్తుంది, మరియు అదే type `useReducer` ద్వారా డిఫాల్ట్ గా ఉపయోగించబడుతుంది. + - `stateReducer(state: State, action: CounterAction): State` reducer function యొక్క arguments మరియు return value కు types ను సెట్ చేస్తుంది. -A more explicit alternative to setting the type on `initialState` is to provide a type argument to `useReducer`: +`initialState` పై type సెట్ చేయడానికి మరింత స్పష్టమైన ప్రత్యామ్నాయం `useReducer` కు type argument ను అందించడం: ```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. +[`useContext` Hook](/reference/react/useContext) props ను components ద్వారా పంపకుండా, డేటా ను component tree లోకి పంపించడానికి ఒక పద్ధతి. ఇది ఒక provider component ను సృష్టించడం ద్వారా ఉపయోగించబడుతుంది మరియు తరచుగా ఒక Hook ను సృష్టించడం ద్వారా చైల్డ్ component లో value ను వినియోగించడానికి ఉపయోగించబడుతుంది. -The type of the value provided by the context is inferred from the value passed to the `createContext` call: +context ద్వారా అందించబడిన value యొక్క type, `createContext` కాల్ కు పంపబడిన value నుండి అంచనా వేయబడుతుంది: @@ -284,9 +284,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`. +ఈ పద్ధతి మీకు అర్థం చేసే డిఫాల్ట్ value ఉన్నప్పుడు పనిచేస్తుంది - కానీ అప్పుడప్పుడు మీరు డిఫాల్ట్ value లేని సందర్భాలు ఉంటాయి, మరియు ఆ సందర్భాలలో `null` ఒక డిఫాల్ట్ value గా సరైనదిగా భావించవచ్చు. అయితే, type-system మీ కోడ్‌ను అర్థం చేసుకునేలా చేయడానికి, మీరు `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` ను context వినియోగదారుల type లో నుండి తొలగించాల్సిన సమస్యను కలిగిస్తుంది. మా సిఫారసు ఏమిటంటే, Hook ఒక రన్‌టైమ్ చెక్ చేసి, అది లేకపోతే ఒక తప్పును చూపిస్తుంది: ```js {5, 16-20} import { createContext, useContext, useState, useMemo } from 'react'; @@ -329,7 +329,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) Hook ఒక function కాల్ నుండి ఒక మేమోరైజ్డ్ value ను సృష్టిస్తుంది/తిరిగి యాక్సెస్ చేస్తుంది, dependencies (2వ పరామితి) మారినప్పుడు మాత్రమే function ను మళ్ళీ నడుపుతుంది. Hook ను కాల్ చేయడం వలన వచ్చిన ఫలితం మొదటి పరామితిలోని function నుండి తిరిగి వచ్చిన value నుండి అంచనా వేయబడుతుంది. మీరు type argument ను Hook కు అందించడం ద్వారా మరింత స్పష్టంగా చేయవచ్చు. ```ts // The type of visibleTodos is inferred from the return value of filterTodos @@ -339,7 +339,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) ఒక function కు dependencies మారకుండా ఉంటే స్థిరమైన రిఫరెన్స్ ను అందిస్తుంది. `useMemo` లాగా, function యొక్క type మొదటి పరామితిలోని function యొక్క return value నుండి అంచనా వేయబడుతుంది, మరియు మీరు type argument ను 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. +TypeScript strict mode లో పని చేస్తున్నప్పుడు `useCallback` లో మీ callback లోని parameters కు types ను చేర్చాలి. ఇది callback యొక్క type function యొక్క return value నుండి అంచనా వేయబడుతుంది, మరియు parameters లేకుండా type పూర్తిగా అర్థం కాలేదు. -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: +మీ కోడ్-స్టైల్ ప్రాధాన్యతలపై ఆధారపడి, callback ను నిర్వచించే సమయంలో event handler కోసం type ను అందించడానికి React types నుండి `*EventHandler` functions ను ఉపయోగించవచ్చు: ```ts import { useState, useCallback } from 'react'; @@ -371,14 +371,12 @@ export default function Form() { } ``` -## 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. - -### DOM Events {/*typing-dom-events*/} +## ఉపయోగకరమైన Types {/*useful-types*/} -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. +`@types/react` ప్యాకేజ్ నుండి చాలా విస్తృతమైన types సెట్ వస్తుంది, React మరియు TypeScript ఎలా పరస్పర చర్యలో ఉంటాయో మీరు సౌకర్యంగా భావించినప్పుడు ఇది చదవడం విలువైనది. మీరు వాటిని [DefinitelyTyped లో React యొక్క ఫోల్డర్ లో](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts) కనుగొనవచ్చు. ఇక్కడ మేము కొన్ని సాధారణంగా ఉపయోగించే types ను కవర్ చేస్తాము. +### DOM ఈవెంట్స్ {/*typing-dom-events*/} +React లో DOM ఈవెంట్స్ తో పని చేస్తున్నప్పుడు, ఈవెంట్ యొక్క type ఈవెంట్ హ్యాండ్లర్ నుండి తరచుగా అంచనా వేయబడుతుంది. అయితే, ఒక function ను ఈవెంట్ హ్యాండ్లర్ కు పంపించడానికి extraction చేయాలనుకుంటే, మీరు ఈవెంట్ యొక్క type ను స్పష్టంగా సెట్ చేయాలి. ```tsx src/App.tsx active @@ -407,15 +405,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). +React types లో చాలా రకాల ఈవెంట్స్ అందుబాటులో ఉన్నాయి - పూర్తి జాబితాను [ఇక్కడ](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. +మీరు అవసరమైన type ను నిర్ణయిస్తున్నప్పుడు, మీరు ఉపయోగిస్తున్న ఈవెంట్ హ్యాండ్లర్ కోసం హోవర్ సమాచారాన్ని మొదట చూడవచ్చు, ఇది ఈవెంట్ యొక్క type ను చూపిస్తుంది. -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` type ను ఉపయోగించవచ్చు, ఇది అన్ని ఈవెంట్స్ కోసం బేస్ type. ### 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: +ఒక కంపోనెంట్ యొక్క children ను వివరించడానికి రెండు సాధారణ మార్గాలు ఉన్నాయి. మొదటిది `React.ReactNode` type ను ఉపయోగించడం, ఇది JSX లో children గా పంపబడగల అన్ని సంభావ్య type ల యొక్క యూనియన్: ```ts interface ModalRendererProps { @@ -424,7 +422,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: +ఇది children యొక్క విస్తృత నిర్వచనం. రెండవది `React.ReactElement` type ను ఉపయోగించడం, ఇది కేవలం JSX elements మాత్రమే, JavaScript primitives వంటి strings లేదా numbers కాదు: ```ts interface ModalRendererProps { @@ -433,13 +431,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. +గమనించండి, మీరు TypeScript ను children ఒక నిర్దిష్ట రకం JSX elements అని వివరించడానికి ఉపయోగించలేరు, కాబట్టి కేవలం `
  • ` children మాత్రమే అంగీకరించే ఒక కంపోనెంట్ ను type-system ద్వారా వివరించలేరు. -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). +`React.ReactNode` మరియు `React.ReactElement` రెండింటి ఉదాహరణను type-checker తో సహా [ఈ TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA) లో చూడవచ్చు. ### 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 లో inline styles ఉపయోగిస్తున్నప్పుడు, `style` prop కు పంపబడే object ను వర్ణించడానికి మీరు `React.CSSProperties` ను ఉపయోగించవచ్చు. ఈ type అన్ని సంభావ్య CSS properties యొక్క యూనియన్, మరియు ఇది మీరు `style` prop కు సరైన CSS properties పంపిస్తున్నారని నిర్ధారించడానికి మరియు మీ ఎడిటర్ లో auto-complete పొందడానికి మంచి మార్గం. ```ts interface MyComponentProps { @@ -447,17 +445,17 @@ 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. +ఈ గైడ్ React తో TypeScript ఉపయోగించడం గురించి ప్రాథమికాలను కవర్ చేసింది, కానీ ఇంకా నేర్చుకోవడానికి చాలా ఉంది. +Docs లోని వ్యక్తిగత API పేజీలు TypeScript తో వాటిని ఎలా ఉపయోగించాలో గురించి మరింత లోతైన డాక్యుమెంటేషన్ కలిగి ఉండవచ్చు. -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. + - [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) TypeScript కోసం అధికారిక డాక్యుమెంటేషన్, మరియు అధిక భాగం కీలక భాషా లక్షణాలను కవర్ చేస్తుంది. - - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) cover new features in depth. + - [The TypeScript release notes](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. + - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) TypeScript తో React ఉపయోగించడానికి కమ్యూనిటీ-నిర్వహిత చీట్ షీట్, చాలా ఉపయోగకరమైన ఎడ్జ్ కేసులను కవర్ చేస్తూ ఈ డాక్యుమెంట్ కంటే మరింత విస్తృతతనాన్ని అందిస్తుంది. - - [TypeScript Community Discord](https://discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues. + - [TypeScript Community Discord](https://discord.com/invite/typescript) TypeScript మరియు React సమస్యలతో సహాయం కోసం ప్రశ్నలు అడగడానికి మరియు సహాయం పొందడానికి గొప్ప ప్రదేశం. \ No newline at end of file From aee1c98c9c534c0caa81356435f113ce06b39a66 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:11:55 -0500 Subject: [PATCH 02/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 eae870b5..f7b78994 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -1,5 +1,5 @@ --- -title: TypeScript ను ఉపయోగించి +title: TypeScript ని ఉపయోగించడం re: https://github.com/reactjs/react.dev/issues/5960 --- From 483dce77838446320809001901b6e2516c1200ec Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:16:00 -0500 Subject: [PATCH 03/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 f7b78994..9d41dfe4 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -5,7 +5,7 @@ re: https://github.com/reactjs/react.dev/issues/5960 -TypeScript అనేది JavaScript కోడ్‌బేస్‌లకు టైప్ నిర్వచనాలను చేర్చడానికి ప్రాచుర్యం పొందిన విధానం. TypeScript [JSX ని మద్దతు ఇస్తుంది](/learn/writing-markup-with-jsx) మరియు మీరు మీ ప్రాజెక్ట్‌కి [`@types/react`](https://www.npmjs.com/package/@types/react) మరియు [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) ను చేర్చడం ద్వారా పూర్తి React Web మద్దతు పొందవచ్చు. +TypeScript అనేది JavaScript కోడ్‌బేస్‌లకు టైప్ డెఫినిషన్‌లను జోడించడానికి ఒక ప్రసిద్ధ మార్గం. TypeScript [JSX ని సపోర్ట్ చేస్తుంది](/learn/writing-markup-with-jsx) మరియు మీరు మీ ప్రాజెక్ట్‌కి [`@types/react`](https://www.npmjs.com/package/@types/react) మరియు [`@types/react-dom`](https://www.npmjs.com/package/@types/react-dom) ను చేర్చడం ద్వారా పూర్తి React Web సపోర్ట్ని పొందవచ్చు. From bbf6568d31590ae14f3f4a5d4241efd12352cca1 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:26:03 -0500 Subject: [PATCH 04/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- src/content/learn/typescript.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 9d41dfe4..cd5c01bb 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -38,10 +38,11 @@ npm install @types/react @types/react-dom మీ `tsconfig.json` లో, క్రింది compiler ఆప్షన్స్ సెట్ చేయాలి: -1. [`lib`](https://www.typescriptlang.org/tsconfig/#lib) లో `dom` ఉండాలి (గమనిక: ఎలాంటి `lib` ఆప్షన్ పేర్కొనబడలేదు అంటే, `dom` డిఫాల్ట్ గా ఉంటుంది). -1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) ని సరైన ఆప్షన్‌లలో ఒకదానిపై సెట్ చేయాలి. చాలా అప్లికేషన్స్‌కి `preserve` సరిపోతుంది. - మీరు లైబ్రరీని publish చేస్తున్నట్లు అయితే, ఎలాంటి విలువను ఎంచుకోవాలో [`jsx` డాక్యుమెంటేషన్](https://www.typescriptlang.org/tsconfig/#jsx) ను సంప్రదించండి. -## React Components తో TypeScript {/*typescript-with-react-components*/} +1. [`lib`](https://www.typescriptlang.org/tsconfig/#lib) లో `dom` ఉండాలి (గమనిక: ఎలాంటి `lib` ఆప్షన్ స్పెసిఫ్య్ చేయలేదు అంటే, `dom` డిఫాల్ట్ గా ఉంటుంది). +1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) ని తప్పనిసరిగా వెలిడ్ అయ్యే ఆప్షన్లలో ఒకదానికి సెట్ చేయాలి. చాలా అప్లికేషన్స్‌కి `preserve` సరిపోతుంది. + మీరు లైబ్రరీని పబ్లిష్ చేస్తున్నట్లు అయితే, ఎలాంటి వేల్యూ ను ఎంచుకోవాలో తెలుసుకోవడానికి [`jsx` డాక్యుమెంటేషన్](https://www.typescriptlang.org/tsconfig/#jsx) ను సంప్రదించండి. + +## TypeScript లో React కాంపోనెంట్లను ఎలా రాయడం {/*typescript-with-react-components*/} From d67707454df0b5f49025bc1b3ba971630bc6f784 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:26:32 -0500 Subject: [PATCH 05/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 cd5c01bb..8566aab0 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -52,7 +52,7 @@ JSX కలిగి ఉన్న ప్రతి ఫైల్ `.tsx` ఫైల React తో TypeScript వ్రాయడం, React తో JavaScript వ్రాయడముతో చాలా సమానం. ఒక కాంపోనెంట్‌తో పని చేస్తున్నప్పుడు ముఖ్యమైన తేడా మీరు మీ కాంపోనెంట్ యొక్క props కోసం types అందించవచ్చు. ఈ types సరిగ్గా ఉన్నాయో లేదో చెక్ చేయడానికి మరియు editor లో inline documentation అందించడానికి ఉపయోగించవచ్చు. -[Quick Start](/learn) గైడ్ నుండి [`MyButton` కాంపోనెంట్](/learn#components) తీసుకుని, బటన్ కోసం `title` ను వివరిస్తున్న type ని జోడించవచ్చు: +[క్విక్ స్టార్ట్](/learn) గైడ్ నుండి [`MyButton` కాంపోనెంట్](/learn#components) తీసుకుని, బటన్ కోసం `title` ను వివరిస్తున్న టైప్ ని జోడించవచ్చు: From c61b6fb6df2435f0ed40eecd7a8566ba25fe5fc4 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:26:51 -0500 Subject: [PATCH 06/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 8566aab0..196acad3 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -123,7 +123,7 @@ export default App = AppTSX; మీ కాంపోనెంట్ యొక్క props ను వివరిస్తున్న type అవసరమున్నంత సులభంగా లేదా క్లిష్టంగా ఉండవచ్చు, కానీ అవి `type` లేదా `interface` తో వివరిస్తే ఒక object type గా ఉండాలి. TypeScript objects ను ఎలా వివరిస్తుందో మీరు [Object Types](https://www.typescriptlang.org/docs/handbook/2/objects.html) లో నేర్చుకోవచ్చు కానీ మీరు [Union Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) ను కూడా props వివరిస్తూ ఉపయోగించడం గురించి ఆసక్తి చూపవచ్చు, ఇది కొన్ని విభిన్న type లలో ఒకటి కావచ్చు మరియు మరింత ఆధునిక ఉపయోగకేసులకు [Creating Types from Types](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) గైడ్ ఉపయోగపడుతుంది. -## ఉదాహరణ Hooks {/*example-hooks*/} +## Hooks తో టైప్ ఉదాహరణలు {/*example-hooks*/} `@types/react` నుండి type నిర్వచనలు బిల్ట్-ఇన్ Hooks కోసం types కలిగి ఉంటాయి, కాబట్టి మీరు వాటిని మీ కంపోనెంట్లలో ఎలాంటి అదనపు సెటప్ లేకుండా ఉపయోగించవచ్చు. అవి మీ కంపోనెంట్ లో మీరు వ్రాసే కోడ్ ను పరిగణనలోకి తీసుకుంటాయి, కాబట్టి చాలా సార్లు మీరు [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) పొందుతారు మరియు సాధారణంగా types ను ఇవ్వడానికి ఎటువంటి సమస్యలు ఎదుర్కొనవలసిన అవసరం లేదు. From 0f04e8f825165db59495c26f99efab5d4baef019 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:27:12 -0500 Subject: [PATCH 07/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 196acad3..773a0dce 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -125,7 +125,7 @@ export default App = AppTSX; ## Hooks తో టైప్ ఉదాహరణలు {/*example-hooks*/} -`@types/react` నుండి type నిర్వచనలు బిల్ట్-ఇన్ Hooks కోసం types కలిగి ఉంటాయి, కాబట్టి మీరు వాటిని మీ కంపోనెంట్లలో ఎలాంటి అదనపు సెటప్ లేకుండా ఉపయోగించవచ్చు. అవి మీ కంపోనెంట్ లో మీరు వ్రాసే కోడ్ ను పరిగణనలోకి తీసుకుంటాయి, కాబట్టి చాలా సార్లు మీరు [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) పొందుతారు మరియు సాధారణంగా types ను ఇవ్వడానికి ఎటువంటి సమస్యలు ఎదుర్కొనవలసిన అవసరం లేదు. +`@types/react` నుండి టైప్ డెఫినిషన్‌లు బిల్ట్-ఇన్ Hooks కోసం టైప్లను కలిగి ఉంటాయి, కాబట్టి మీరు వాటిని ఎలాంటి అదనపు సెటప్ లేకుండానే మీ కాంపోనెంట్లలో ఉపయోగించవచ్చు. అవి మీ కాంపోనెంట్ లో మీరు వ్రాసే కోడ్ ను పరిగణనలోకి తీసుకుంటాయి, కాబట్టి చాలా సార్లు మీరు [ఇన్ఫెరెడ్ టైప్స్](https://www.typescriptlang.org/docs/handbook/type-inference.html) పొందుతారు మరియు సాధారణంగా టైప్స్ ను ఇవ్వడానికి ఎటువంటి సమస్యలు ఎదుర్కొనవలసిన అవసరం లేదు. అయితే, హుక్స్ కోసం types ను అందించే కొన్ని ఉదాహరణలను చూడవచ్చు. From e2de566dc5c0e8c6465948e850170a1752c26045 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:27:36 -0500 Subject: [PATCH 08/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 773a0dce..777f0d0b 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -127,7 +127,7 @@ export default App = AppTSX; `@types/react` నుండి టైప్ డెఫినిషన్‌లు బిల్ట్-ఇన్ Hooks కోసం టైప్లను కలిగి ఉంటాయి, కాబట్టి మీరు వాటిని ఎలాంటి అదనపు సెటప్ లేకుండానే మీ కాంపోనెంట్లలో ఉపయోగించవచ్చు. అవి మీ కాంపోనెంట్ లో మీరు వ్రాసే కోడ్ ను పరిగణనలోకి తీసుకుంటాయి, కాబట్టి చాలా సార్లు మీరు [ఇన్ఫెరెడ్ టైప్స్](https://www.typescriptlang.org/docs/handbook/type-inference.html) పొందుతారు మరియు సాధారణంగా టైప్స్ ను ఇవ్వడానికి ఎటువంటి సమస్యలు ఎదుర్కొనవలసిన అవసరం లేదు. -అయితే, హుక్స్ కోసం types ను అందించే కొన్ని ఉదాహరణలను చూడవచ్చు. +అయితే, Hooks కోసం టైప్స్ ను ఎలా అందించాలో కొన్ని ఉదాహరణలను చూద్దాం. ### `useState` {/*typing-usestate*/} From 2d460a32105207301b69cbaa5bd068ef9130430f Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:28:11 -0500 Subject: [PATCH 09/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 777f0d0b..f2db07f1 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -131,7 +131,7 @@ export default App = AppTSX; ### `useState` {/*typing-usestate*/} -[`useState` Hook](/reference/react/useState) initial state గా ఇవ్వబడిన value ను తిరిగి ఉపయోగించి ఆ value యొక్క type ఏమిటి అని నిర్ధారిస్తుంది. ఉదాహరణకు: +[`useState` Hook](/reference/react/useState) ఇనీషియల్ state గా ఇవ్వబడిన వేల్యూ ను రీ-యూజ్ చేసుకొని ఆ వేల్యూ యొక్క టైప్ ఏమిటి అని నిర్ధారిస్తుంది. ఉదాహరణకు: ```ts // Infer the type as "boolean" From 2510e88aa4874367469e65cc758b5e21f4622dd2 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:28:38 -0500 Subject: [PATCH 10/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 f2db07f1..f1e2f196 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -134,7 +134,7 @@ export default App = AppTSX; [`useState` Hook](/reference/react/useState) ఇనీషియల్ state గా ఇవ్వబడిన వేల్యూ ను రీ-యూజ్ చేసుకొని ఆ వేల్యూ యొక్క టైప్ ఏమిటి అని నిర్ధారిస్తుంది. ఉదాహరణకు: ```ts -// Infer the type as "boolean" +// టైప్ని "boolean" గా సూచిస్తుంది const [enabled, setEnabled] = useState(false); ``` From 6f78c9ca17546c4d6620c6ac9c4ede318676126e Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:28:55 -0500 Subject: [PATCH 11/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 f1e2f196..cbcdbbd8 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -138,7 +138,7 @@ export default App = AppTSX; const [enabled, setEnabled] = useState(false); ``` -ఇది `enabled` కు `boolean` type ను కేటాయిస్తుంది, మరియు `setEnabled` `boolean` argument ను లేదా `boolean` ను రిటర్న్ చేసే function ను స్వీకరించే function అవుతుంది. మీరు state కోసం type ను స్పష్టంగా ఇవ్వాలనుకుంటే, మీరు `useState` కాల్ కు type argument ను ఇవ్వవచ్చు: +ఇది `enabled` కు `boolean` టైప్ ను అసైన్ చేస్తుంది, మరియు `setEnabled` `boolean` ఆర్గుమెంట్ ను స్వీకరించే ఫంక్షన్ లేదా `boolean` ను రిటర్న్ చేసే ఫంక్షన్ అవుతుంది. మీరు state కోసం టైప్ ను ఎక్సప్లిసిట్ గా ఇవ్వాలనుకుంటే, మీరు `useState` కాల్ కు టైప్ ఆర్గుమెంట్ ను ఇవ్వవచ్చు: ```ts // Explicitly set the type to "boolean" From 7d24591c22674f963708dbac451c9e22f42373c0 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:29:13 -0500 Subject: [PATCH 12/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 cbcdbbd8..d7c59d3d 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -141,7 +141,7 @@ const [enabled, setEnabled] = useState(false); ఇది `enabled` కు `boolean` టైప్ ను అసైన్ చేస్తుంది, మరియు `setEnabled` `boolean` ఆర్గుమెంట్ ను స్వీకరించే ఫంక్షన్ లేదా `boolean` ను రిటర్న్ చేసే ఫంక్షన్ అవుతుంది. మీరు state కోసం టైప్ ను ఎక్సప్లిసిట్ గా ఇవ్వాలనుకుంటే, మీరు `useState` కాల్ కు టైప్ ఆర్గుమెంట్ ను ఇవ్వవచ్చు: ```ts -// Explicitly set the type to "boolean" +// టైప్ని "boolean" కి ఎక్సప్లిసిట్ గా సెట్ చేయండి const [enabled, setEnabled] = useState(false); ``` From 0cd8a798e1bd4385a30c0a469f4665f85eab5f3b Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:29:49 -0500 Subject: [PATCH 13/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 d7c59d3d..c35ac668 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -145,7 +145,7 @@ const [enabled, setEnabled] = useState(false); const [enabled, setEnabled] = useState(false); ``` -ఇది ఈ సందర్భంలో అంతగా ఉపయోగకరమైనది కాదు, కానీ మీరు type ను ఇవ్వాలనుకునే సాధారణ సందర్భం యూనియన్ type ఉన్నప్పుడు. ఉదాహరణకు, `status` ఇక్కడ కొన్ని వేర్వేరు strings లో ఒకటి కావచ్చు: +ఇది ఈ సందర్భంలో అంతగా ఉపయోగకరమైనది కాదు, కానీ మీరు `type` ను ఇవ్వాలనుకునే సాధారణ సందర్భం యూనియన్ టైప్ ఉన్నప్పుడు. ఉదాహరణకు, `status` ఇక్కడ కొన్ని వేర్వేరు స్ట్రింగ్స్ లో ఒకటి కావచ్చు: ```ts type Status = "idle" | "loading" | "success" | "error"; From b09213f736cb4a45dd6b9ab6cc36229dc517c05f Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:30:18 -0500 Subject: [PATCH 14/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 c35ac668..b28e5f2b 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -153,7 +153,7 @@ type Status = "idle" | "loading" | "success" | "error"; const [status, setStatus] = useState("idle"); ``` -లేదా, [Principles for structuring state](/learn/choosing-the-state-structure#principles-for-structuring-state) లో సిఫారసు చేసినట్లు, మీరు సంబంధిత state ను ఒక object గా కలిపి, వేర్వేరు అవకాశాలను object types ద్వారా వివరించవచ్చు: +లేదా, [ప్రిన్సిపుల్స్ ఫర్ స్తృక్చరింగ్ state](/learn/choosing-the-state-structure#principles-for-structuring-state) లో సిఫారసు చేసినట్లు, మీరు సంబంధిత state ను ఒక ఆబ్జెక్ట్ గా గ్రూప్ చేసి, వేర్వేరు అవకాశాలను ఆబ్జెక్ట్ టైప్స్ ద్వారా వివరించవచ్చు: ```ts type RequestState = From 757a696f17e9d01c059baa1286fc9fae13abc56d Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:30:31 -0500 Subject: [PATCH 15/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 b28e5f2b..5c2fea02 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -167,7 +167,7 @@ const [requestState, setRequestState] = useState({ status: 'idle' ### `useReducer` {/*typing-usereducer*/} -[`useReducer` Hook](/reference/react/useReducer) ఒక కాంప్లెక్స్ Hook, ఇది ఒక reducer function మరియు ఒక initial state ను తీసుకుంటుంది. reducer function కోసం types initial state నుండి అంచనా వేయబడతాయి. మీరు `useReducer` కాల్ కు type argument ను ఇస్తూ state కోసం type అందించవచ్చు, కానీ initial state పై type సెట్ చేయడం మంచిది: +[`useReducer` Hook](/reference/react/useReducer) ఒక కాంప్లెక్స్ Hook, ఇది ఒక reducer ఫంక్షన్ మరియు ఒక ఇనీషియల్ state ను తీసుకుంటుంది. reducer ఫంక్షన్ కోసం టైప్స్ అనేవి ఇనీషియల్ state నుండి అంచనా వేయబడతాయి. మీరు `useReducer` కాల్ కు టైప్ ఆర్గుమెంట్ ను ఇస్తూ state కోసం టైప్ ను ప్రొవైడ్ చేయవచ్చు, కానీ ఇనీషియల్ state పై టైప్ సెట్ చేయడం మంచిది: From 589a864a92ee3beef8537f07ef788519729d8640 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:30:56 -0500 Subject: [PATCH 16/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- src/content/learn/typescript.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 5c2fea02..1a7b3b4f 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -224,10 +224,10 @@ export default App = AppTSX; మేము TypeScript ను కొన్ని కీలక ప్రదేశాలలో ఉపయోగిస్తున్నాము: - - `interface State` reducer యొక్క state యొక్క ఆకారాన్ని వర్ణిస్తుంది. - - `type CounterAction` reducer కు పంపవచ్చే వేర్వేరు actions ను వర్ణిస్తుంది. - - `const initialState: State` initial state కు type ను అందిస్తుంది, మరియు అదే type `useReducer` ద్వారా డిఫాల్ట్ గా ఉపయోగించబడుతుంది. - - `stateReducer(state: State, action: CounterAction): State` reducer function యొక్క arguments మరియు return value కు types ను సెట్ చేస్తుంది. + - `interface State` reducer యొక్క state షేప్ ని డిస్క్రైబ్ చేస్తుంది. + - `type CounterAction` reducer కు dispatch చేసే వేర్వేరు actions ను డిస్క్రైబ్ చేస్తుంది. + - `const initialState: State` ఇనీషియల్ state కు టైప్ ను అందిస్తుంది, మరియు అదే టైప్ `useReducer` ద్వారా డిఫాల్ట్ గా ఉపయోగించబడుతుంది. + - `stateReducer(state: State, action: CounterAction): State` reducer ఫంక్షన్ యొక్క అర్గుమెంత్స్ మరియు రిటర్న్ వేల్యూ కు టైప్స్ ను సెట్ చేస్తుంది. `initialState` పై type సెట్ చేయడానికి మరింత స్పష్టమైన ప్రత్యామ్నాయం `useReducer` కు type argument ను అందించడం: From 231f4ff6aa94ea43295c08175c39d805c75a4bd6 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:31:04 -0500 Subject: [PATCH 17/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 1a7b3b4f..0bfec87c 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -451,7 +451,7 @@ interface MyComponentProps { ఈ గైడ్ React తో TypeScript ఉపయోగించడం గురించి ప్రాథమికాలను కవర్ చేసింది, కానీ ఇంకా నేర్చుకోవడానికి చాలా ఉంది. Docs లోని వ్యక్తిగత API పేజీలు TypeScript తో వాటిని ఎలా ఉపయోగించాలో గురించి మరింత లోతైన డాక్యుమెంటేషన్ కలిగి ఉండవచ్చు. -మేము ఈ కింది వనరులను సిఫారసు చేస్తున్నాము: +మేము ఈ కింది రిసోర్సెస్ ను సిఫార్సు చేస్తున్నాము: - [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) TypeScript కోసం అధికారిక డాక్యుమెంటేషన్, మరియు అధిక భాగం కీలక భాషా లక్షణాలను కవర్ చేస్తుంది. From 69b258e4efd9af0cbea25a4d8cca6fc7c7575887 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:31:12 -0500 Subject: [PATCH 18/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 0bfec87c..2d3faa79 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -453,7 +453,7 @@ Docs లోని వ్యక్తిగత API పేజీలు TypeScript మేము ఈ కింది రిసోర్సెస్ ను సిఫార్సు చేస్తున్నాము: - - [The TypeScript handbook](https://www.typescriptlang.org/docs/handbook/) TypeScript కోసం అధికారిక డాక్యుమెంటేషన్, మరియు అధిక భాగం కీలక భాషా లక్షణాలను కవర్ చేస్తుంది. + - [TypeScript హ్యాండ్‌బుక్](https://www.typescriptlang.org/docs/handbook/) TypeScript కోసం ఆఫిసిఅల్ డాక్యుమెంటేషన్, మరియు అధిక భాగం కీలక లాంగ్వేజ్ ఫీచర్లను కవర్ చేస్తుంది. - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) కొత్త లక్షణాలను లోతుగా కవర్ చేస్తాయి. From 4fcbd9708d9c76a0da83eb0cc3634a4952627e96 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:31:47 -0500 Subject: [PATCH 19/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 2d3faa79..46baeeb6 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -229,7 +229,7 @@ export default App = AppTSX; - `const initialState: State` ఇనీషియల్ state కు టైప్ ను అందిస్తుంది, మరియు అదే టైప్ `useReducer` ద్వారా డిఫాల్ట్ గా ఉపయోగించబడుతుంది. - `stateReducer(state: State, action: CounterAction): State` reducer ఫంక్షన్ యొక్క అర్గుమెంత్స్ మరియు రిటర్న్ వేల్యూ కు టైప్స్ ను సెట్ చేస్తుంది. -`initialState` పై type సెట్ చేయడానికి మరింత స్పష్టమైన ప్రత్యామ్నాయం `useReducer` కు type argument ను అందించడం: +`initialState` పై టైప్ని సెట్ చేయడానికి మరింత ఎక్స్ప్లిసిట్ ఆల్టర్నేటివ్ `useReducer` కు టైప్ ఆర్గుమెంట్ ను అందించడం: ```ts import { stateReducer, State } from './your-reducer-implementation'; From 1306b12457cc5d22f390b1df4c3f008924e336c5 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:32:30 -0500 Subject: [PATCH 20/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 46baeeb6..7eab674c 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -243,7 +243,7 @@ export default function App() { ### `useContext` {/*typing-usecontext*/} -[`useContext` Hook](/reference/react/useContext) props ను components ద్వారా పంపకుండా, డేటా ను component tree లోకి పంపించడానికి ఒక పద్ధతి. ఇది ఒక provider component ను సృష్టించడం ద్వారా ఉపయోగించబడుతుంది మరియు తరచుగా ఒక Hook ను సృష్టించడం ద్వారా చైల్డ్ component లో value ను వినియోగించడానికి ఉపయోగించబడుతుంది. +[`useContext` Hook](/reference/react/useContext) props ను కాంపోనెంట్స్ ద్వారా పంపకుండా, డేటా ను కాంపోనెంట్ ట్రీ లోకి పంపించడానికి ఒక పద్ధతి. ఇది ఒక provider కాంపోనెంట్ ను సృష్టించడం ద్వారా ఉపయోగించబడుతుంది మరియు తరచుగా ఒక Hook ను సృష్టించడం ద్వారా చైల్డ్ కాంపోనెంట్లో వేల్యూ ను వినియోగించడానికి ఉపయోగించబడుతుంది. context ద్వారా అందించబడిన value యొక్క type, `createContext` కాల్ కు పంపబడిన value నుండి అంచనా వేయబడుతుంది: From 0723d7b28a477ecfab889c58d0ea00daeaa5afe4 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:32:51 -0500 Subject: [PATCH 21/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 7eab674c..09db998e 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -245,7 +245,7 @@ export default function App() { [`useContext` Hook](/reference/react/useContext) props ను కాంపోనెంట్స్ ద్వారా పంపకుండా, డేటా ను కాంపోనెంట్ ట్రీ లోకి పంపించడానికి ఒక పద్ధతి. ఇది ఒక provider కాంపోనెంట్ ను సృష్టించడం ద్వారా ఉపయోగించబడుతుంది మరియు తరచుగా ఒక Hook ను సృష్టించడం ద్వారా చైల్డ్ కాంపోనెంట్లో వేల్యూ ను వినియోగించడానికి ఉపయోగించబడుతుంది. -context ద్వారా అందించబడిన value యొక్క type, `createContext` కాల్ కు పంపబడిన value నుండి అంచనా వేయబడుతుంది: +context ద్వారా ప్రొవైడ్ చేయబడిన వేల్యూ యొక్క టైప్, `createContext` కాల్ కు పంపబడిన వేల్యూ నుండి అంచనా వేయబడుతుంది: From 702f9d46fbf387f04798a1e3aa094a29e9c0c52b Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:33:36 -0500 Subject: [PATCH 22/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 09db998e..0169785a 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -285,7 +285,7 @@ export default App = AppTSX; -ఈ పద్ధతి మీకు అర్థం చేసే డిఫాల్ట్ value ఉన్నప్పుడు పనిచేస్తుంది - కానీ అప్పుడప్పుడు మీరు డిఫాల్ట్ value లేని సందర్భాలు ఉంటాయి, మరియు ఆ సందర్భాలలో `null` ఒక డిఫాల్ట్ value గా సరైనదిగా భావించవచ్చు. అయితే, type-system మీ కోడ్‌ను అర్థం చేసుకునేలా చేయడానికి, మీరు `createContext` లో `ContextShape | null` ను స్పష్టంగా సెట్ చేయాలి. +మీకు అర్థమయ్యే డిఫాల్ట్ వేల్యూ ఉన్నప్పుడు ఈ టెక్నిక్ పని చేస్తుంది - కానీ అప్పుడప్పుడు మీకు డిఫాల్ట్ వేల్యూ లేని సందర్భాలు ఉంటాయి, మరియు ఆ సందర్భాలలో `null` ఒక డిఫాల్ట్ వేల్యూ గా సరైనదిగా భావించవచ్చు. అయితే, టైప్-సిస్టం మీ కోడ్‌ ను అర్థం చేసుకునేలా చేయడానికి, మీరు `createContext` లో `ContextShape | null` ను ఎక్సప్లిసిట్ గా సెట్ చేయాలి. ఇది `| null` ను context వినియోగదారుల type లో నుండి తొలగించాల్సిన సమస్యను కలిగిస్తుంది. మా సిఫారసు ఏమిటంటే, Hook ఒక రన్‌టైమ్ చెక్ చేసి, అది లేకపోతే ఒక తప్పును చూపిస్తుంది: From 50dacc0f1c13d08251bb1a7f713f4044e2129e2a Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:33:57 -0500 Subject: [PATCH 23/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 0169785a..7c47dec2 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -287,7 +287,7 @@ export default App = AppTSX; మీకు అర్థమయ్యే డిఫాల్ట్ వేల్యూ ఉన్నప్పుడు ఈ టెక్నిక్ పని చేస్తుంది - కానీ అప్పుడప్పుడు మీకు డిఫాల్ట్ వేల్యూ లేని సందర్భాలు ఉంటాయి, మరియు ఆ సందర్భాలలో `null` ఒక డిఫాల్ట్ వేల్యూ గా సరైనదిగా భావించవచ్చు. అయితే, టైప్-సిస్టం మీ కోడ్‌ ను అర్థం చేసుకునేలా చేయడానికి, మీరు `createContext` లో `ContextShape | null` ను ఎక్సప్లిసిట్ గా సెట్ చేయాలి. -ఇది `| null` ను context వినియోగదారుల type లో నుండి తొలగించాల్సిన సమస్యను కలిగిస్తుంది. మా సిఫారసు ఏమిటంటే, Hook ఒక రన్‌టైమ్ చెక్ చేసి, అది లేకపోతే ఒక తప్పును చూపిస్తుంది: +ఇది `| null` ను context కన్స్యూమర్ల టైప్ లో నుండి తొలగించాల్సిన సమస్యను కలిగిస్తుంది. మా సిఫార్సు ఏమిటంటే, Hook ఒక రన్‌టైమ్ చెక్ చేసి, అది లేకపోతే ఒక ఎర్రర్ ని throw చేస్తుంది: ```js {5, 16-20} import { createContext, useContext, useState, useMemo } from 'react'; From ffc55bc29d3c0b92862a6f6dab6113116090c70f Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:34:31 -0500 Subject: [PATCH 24/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 7c47dec2..e76713c9 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -330,7 +330,7 @@ function MyComponent() { ### `useMemo` {/*typing-usememo*/} -[`useMemo`](/reference/react/useMemo) Hook ఒక function కాల్ నుండి ఒక మేమోరైజ్డ్ value ను సృష్టిస్తుంది/తిరిగి యాక్సెస్ చేస్తుంది, dependencies (2వ పరామితి) మారినప్పుడు మాత్రమే function ను మళ్ళీ నడుపుతుంది. Hook ను కాల్ చేయడం వలన వచ్చిన ఫలితం మొదటి పరామితిలోని function నుండి తిరిగి వచ్చిన value నుండి అంచనా వేయబడుతుంది. మీరు type argument ను Hook కు అందించడం ద్వారా మరింత స్పష్టంగా చేయవచ్చు. +[`useMemo`](/reference/react/useMemo) Hook ఒక ఫంక్షన్ కాల్ నుండి ఒక మేమోరైజ్డ్ వేల్యూ ను సృష్టిస్తుంది/రీ-అక్సెస్ చేస్తుంది, 2వ పారామీటర్‌గా పంపబడిన డిపెండెన్సీలు మారినప్పుడు మాత్రమే ఫంక్షన్ రీ-రన్ అవుతుంది. Hook ను కాల్ చేయడం వలన వచ్చిన రిజల్ట్ అనేది మొదటి పారామీటర్‌ లోని ఫంక్షన్ నుండి రిటర్న్ అయిన వాల్యూ ద్వారా అంచనా వేయబడుతుంది. మీరు మరింత ఎక్స్ప్లిసిట్ గా టైప్ ఆర్గుమెంట్ ను Hook కు ప్రొవైడ్ చేయవచ్చు. ```ts // The type of visibleTodos is inferred from the return value of filterTodos From 3d0035b67bf3d41c056782a70387632ea1d91283 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:34:56 -0500 Subject: [PATCH 25/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 e76713c9..eca3c776 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -340,7 +340,7 @@ const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]); ### `useCallback` {/*typing-usecallback*/} -[`useCallback`](/reference/react/useCallback) ఒక function కు dependencies మారకుండా ఉంటే స్థిరమైన రిఫరెన్స్ ను అందిస్తుంది. `useMemo` లాగా, function యొక్క type మొదటి పరామితిలోని function యొక్క return value నుండి అంచనా వేయబడుతుంది, మరియు మీరు type argument ను Hook కు అందించడం ద్వారా మరింత స్పష్టంగా చేయవచ్చు. +[`useCallback`](/reference/react/useCallback) రెండవ పారామీటర్లోకి పంపబడిన డిపెండెన్సీలు ఒకేలా ఉన్నంత వరకు ఒక ఫంక్షన్‌కు స్టేబుల్ రిఫరెన్స్ ను అందిస్తాయి. `useMemo` లాగా, ఫంక్షన్ యొక్క టైప్ మొదటి పారామీటర్లోని ఫంక్షన్ యొక్క రిటర్న్ వేల్యూ నుండి అంచనా వేయబడుతుంది, మరియు మీరు మరింత ఎక్స్ప్లిసిట్ గా టైప్ ఆర్గుమెంట్ ను Hook కు ప్రొవైడ్ చేయవచ్చు. ```ts From 845e91823e7ea0083b1afe2fb80789de55afc470 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:35:13 -0500 Subject: [PATCH 26/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 eca3c776..9f51c497 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -349,7 +349,7 @@ const handleClick = useCallback(() => { }, [todos]); ``` -TypeScript strict mode లో పని చేస్తున్నప్పుడు `useCallback` లో మీ callback లోని parameters కు types ను చేర్చాలి. ఇది callback యొక్క type function యొక్క return value నుండి అంచనా వేయబడుతుంది, మరియు parameters లేకుండా type పూర్తిగా అర్థం కాలేదు. +TypeScript strict mode లో పని చేస్తున్నప్పుడు `useCallback` లో మీ కాల్ బ్యాక్ లోని పారామీటర్స్ కు టైప్స్ ను చేర్చాలి. ఇది ఎందుకంటే కాల్ బ్యాక్ యొక్క టైప్ అనేది ఫంక్షన్ యొక్క రిటర్న్ వేల్యూ నుండి అంచనా వేయబడుతుంది, మరియు పారామీటర్స్ లేకుండా టైప్ అనేది పూర్తిగా అర్థం కాదు. మీ కోడ్-స్టైల్ ప్రాధాన్యతలపై ఆధారపడి, callback ను నిర్వచించే సమయంలో event handler కోసం type ను అందించడానికి React types నుండి `*EventHandler` functions ను ఉపయోగించవచ్చు: From 75e74dcfb87e03cdbf74e036a5ca1007f1c48541 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:35:37 -0500 Subject: [PATCH 27/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 9f51c497..f2bd3c80 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -351,7 +351,7 @@ const handleClick = useCallback(() => { TypeScript strict mode లో పని చేస్తున్నప్పుడు `useCallback` లో మీ కాల్ బ్యాక్ లోని పారామీటర్స్ కు టైప్స్ ను చేర్చాలి. ఇది ఎందుకంటే కాల్ బ్యాక్ యొక్క టైప్ అనేది ఫంక్షన్ యొక్క రిటర్న్ వేల్యూ నుండి అంచనా వేయబడుతుంది, మరియు పారామీటర్స్ లేకుండా టైప్ అనేది పూర్తిగా అర్థం కాదు. -మీ కోడ్-స్టైల్ ప్రాధాన్యతలపై ఆధారపడి, callback ను నిర్వచించే సమయంలో event handler కోసం type ను అందించడానికి React types నుండి `*EventHandler` functions ను ఉపయోగించవచ్చు: +మీ కోడ్-స్టైల్ ప్రిఫరెన్సెస్ పై ఆధారపడి, కాల్ బ్యాక్ ను డిఫైన్ చేసే సమయంలో ఈవెంట్ హ్యాండ్లర్ కోసం టైప్ ను అందించడానికి React టైప్స్ నుండి `*EventHandler` ఫంక్షన్స్ ను ఉపయోగించవచ్చు: ```ts import { useState, useCallback } from 'react'; From 333b622ad42b20679e8718abe031cc166dc398f5 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:36:18 -0500 Subject: [PATCH 28/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 f2bd3c80..44bbae51 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -372,7 +372,7 @@ export default function Form() { } ``` -## ఉపయోగకరమైన Types {/*useful-types*/} +## ఉపయోగకరమైన టైప్స్ {/*useful-types*/} `@types/react` ప్యాకేజ్ నుండి చాలా విస్తృతమైన types సెట్ వస్తుంది, React మరియు TypeScript ఎలా పరస్పర చర్యలో ఉంటాయో మీరు సౌకర్యంగా భావించినప్పుడు ఇది చదవడం విలువైనది. మీరు వాటిని [DefinitelyTyped లో React యొక్క ఫోల్డర్ లో](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts) కనుగొనవచ్చు. ఇక్కడ మేము కొన్ని సాధారణంగా ఉపయోగించే types ను కవర్ చేస్తాము. ### DOM ఈవెంట్స్ {/*typing-dom-events*/} From 556a422d8eac80ccc1c4866a5a899c37ff77a96f Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:37:01 -0500 Subject: [PATCH 29/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- src/content/learn/typescript.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 44bbae51..0f8e06a2 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -374,7 +374,8 @@ export default function Form() { ## ఉపయోగకరమైన టైప్స్ {/*useful-types*/} -`@types/react` ప్యాకేజ్ నుండి చాలా విస్తృతమైన types సెట్ వస్తుంది, React మరియు TypeScript ఎలా పరస్పర చర్యలో ఉంటాయో మీరు సౌకర్యంగా భావించినప్పుడు ఇది చదవడం విలువైనది. మీరు వాటిని [DefinitelyTyped లో React యొక్క ఫోల్డర్ లో](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts) కనుగొనవచ్చు. ఇక్కడ మేము కొన్ని సాధారణంగా ఉపయోగించే types ను కవర్ చేస్తాము. +`@types/react` ప్యాకేజ్ నుండి చాలా విస్తృతమైన టైప్స్ సెట్ వస్తుంది, React మరియు TypeScript ఎలా ఇంటరాక్ట్ అవుతాయి అనే దాని గురించి మీరు సౌకర్యంగా భావించినప్పుడు ఇది చదవడం విలువైనది. మీరు వాటిని [DefinitelyTyped లో React యొక్క ఫోల్డర్ లో](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts) కనుగొనవచ్చు. ఇక్కడ మేము కొన్ని సాధారణంగా ఉపయోగించే టైప్స్ ను కవర్ చేస్తాము. + ### DOM ఈవెంట్స్ {/*typing-dom-events*/} React లో DOM ఈవెంట్స్ తో పని చేస్తున్నప్పుడు, ఈవెంట్ యొక్క type ఈవెంట్ హ్యాండ్లర్ నుండి తరచుగా అంచనా వేయబడుతుంది. అయితే, ఒక function ను ఈవెంట్ హ్యాండ్లర్ కు పంపించడానికి extraction చేయాలనుకుంటే, మీరు ఈవెంట్ యొక్క type ను స్పష్టంగా సెట్ చేయాలి. From 4ce1bb4d321d38a31fffe4e9e4b7d6dd84793a0e Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:37:22 -0500 Subject: [PATCH 30/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 0f8e06a2..dcc94cb6 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -378,7 +378,7 @@ export default function Form() { ### DOM ఈవెంట్స్ {/*typing-dom-events*/} -React లో DOM ఈవెంట్స్ తో పని చేస్తున్నప్పుడు, ఈవెంట్ యొక్క type ఈవెంట్ హ్యాండ్లర్ నుండి తరచుగా అంచనా వేయబడుతుంది. అయితే, ఒక function ను ఈవెంట్ హ్యాండ్లర్ కు పంపించడానికి extraction చేయాలనుకుంటే, మీరు ఈవెంట్ యొక్క type ను స్పష్టంగా సెట్ చేయాలి. +React లో DOM ఈవెంట్స్ తో పని చేస్తున్నప్పుడు, ఈవెంట్ యొక్క టైప్ అనేది ఈవెంట్ హ్యాండ్లర్ నుండి తరచుగా అంచనా వేయబడుతుంది. అయితే, ఒక ఫంక్షన్ ను ఈవెంట్ హ్యాండ్లర్ కు పంపించడానికి ఎక్స్ట్రాక్ట్ చేయాలనుకుంటే, మీరు ఈవెంట్ యొక్క టైప్ ను ఎక్సప్లిసిట్ గా సెట్ చేయాలి. ```tsx src/App.tsx active From a240d864d90a6ef51a5861f1f8e8275e60d15532 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:37:42 -0500 Subject: [PATCH 31/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 dcc94cb6..6343ed30 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -407,7 +407,7 @@ export default App = AppTSX; -React types లో చాలా రకాల ఈవెంట్స్ అందుబాటులో ఉన్నాయి - పూర్తి జాబితాను [ఇక్కడ](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373) చూడవచ్చు, ఇది [DOM నుండి ప్రసిద్ధమైన ఈవెంట్స్](https://developer.mozilla.org/en-US/docs/Web/Events) పై ఆధారపడి ఉంటుంది. +React టైప్స్ లో చాలా రకాల ఈవెంట్స్ అందుబాటులో ఉన్నాయి - పూర్తి లిస్ట్ ను [ఇక్కడ](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373) చూడవచ్చు, ఇవి [DOM నుండి పాపులర్ ఈవెంట్స్](https://developer.mozilla.org/en-US/docs/Web/Events) పై ఆధారపడి ఉంటాయి. మీరు అవసరమైన type ను నిర్ణయిస్తున్నప్పుడు, మీరు ఉపయోగిస్తున్న ఈవెంట్ హ్యాండ్లర్ కోసం హోవర్ సమాచారాన్ని మొదట చూడవచ్చు, ఇది ఈవెంట్ యొక్క type ను చూపిస్తుంది. From 97760bfd8a560104c329359f6d8dbb71a5847c35 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:38:08 -0500 Subject: [PATCH 32/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 6343ed30..c80dcfd0 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -409,7 +409,7 @@ export default App = AppTSX; React టైప్స్ లో చాలా రకాల ఈవెంట్స్ అందుబాటులో ఉన్నాయి - పూర్తి లిస్ట్ ను [ఇక్కడ](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b580df54c0819ec9df62b0835a315dd48b8594a9/types/react/index.d.ts#L1247C1-L1373) చూడవచ్చు, ఇవి [DOM నుండి పాపులర్ ఈవెంట్స్](https://developer.mozilla.org/en-US/docs/Web/Events) పై ఆధారపడి ఉంటాయి. -మీరు అవసరమైన type ను నిర్ణయిస్తున్నప్పుడు, మీరు ఉపయోగిస్తున్న ఈవెంట్ హ్యాండ్లర్ కోసం హోవర్ సమాచారాన్ని మొదట చూడవచ్చు, ఇది ఈవెంట్ యొక్క type ను చూపిస్తుంది. +మీరు వెతుకుతున్న టైప్ ను నిర్ణయించేటప్పుడు మీరు ముందుగా మీరు ఉపయోగిస్తున్న ఈవెంట్ హ్యాండ్లర్ కోసం హోవర్ ఇన్ఫర్మేషన్ ని చూడవచ్చు, ఇది ఈవెంట్ టైప్ ని చూపిస్తుంది. ఈ జాబితాలో లేని ఈవెంట్ ను ఉపయోగించాల్సి వస్తే, మీరు `React.SyntheticEvent` type ను ఉపయోగించవచ్చు, ఇది అన్ని ఈవెంట్స్ కోసం బేస్ type. From 9d1f61e26bf89683f07344843d53774c72675d83 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:38:36 -0500 Subject: [PATCH 33/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 c80dcfd0..85853a34 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -411,7 +411,7 @@ React టైప్స్ లో చాలా రకాల ఈవెంట్స మీరు వెతుకుతున్న టైప్ ను నిర్ణయించేటప్పుడు మీరు ముందుగా మీరు ఉపయోగిస్తున్న ఈవెంట్ హ్యాండ్లర్ కోసం హోవర్ ఇన్ఫర్మేషన్ ని చూడవచ్చు, ఇది ఈవెంట్ టైప్ ని చూపిస్తుంది. -ఈ జాబితాలో లేని ఈవెంట్ ను ఉపయోగించాల్సి వస్తే, మీరు `React.SyntheticEvent` type ను ఉపయోగించవచ్చు, ఇది అన్ని ఈవెంట్స్ కోసం బేస్ type. +ఈ లిస్టులో లేని ఈవెంట్ ను ఉపయోగించాల్సి వస్తే, మీరు `React.SyntheticEvent` టైప్ ను ఉపయోగించవచ్చు, ఇది అన్ని ఈవెంట్స్ కోసం బేస్ టైప్. ### Children {/*typing-children*/} From 35ef2d146a5a79099fea23c3b1b8298b9362ebfc Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:38:52 -0500 Subject: [PATCH 34/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 85853a34..0abfc8ea 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -413,7 +413,7 @@ React టైప్స్ లో చాలా రకాల ఈవెంట్స ఈ లిస్టులో లేని ఈవెంట్ ను ఉపయోగించాల్సి వస్తే, మీరు `React.SyntheticEvent` టైప్ ను ఉపయోగించవచ్చు, ఇది అన్ని ఈవెంట్స్ కోసం బేస్ టైప్. -### Children {/*typing-children*/} +### చైల్డ్ ఎలిమెంట్ {/*typing-children*/} ఒక కంపోనెంట్ యొక్క children ను వివరించడానికి రెండు సాధారణ మార్గాలు ఉన్నాయి. మొదటిది `React.ReactNode` type ను ఉపయోగించడం, ఇది JSX లో children గా పంపబడగల అన్ని సంభావ్య type ల యొక్క యూనియన్: From e545bd9b60b44fbcf425a7cff94fdd6efa3f4610 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:39:14 -0500 Subject: [PATCH 35/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 0abfc8ea..4c99ea87 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -415,7 +415,7 @@ React టైప్స్ లో చాలా రకాల ఈవెంట్స ### చైల్డ్ ఎలిమెంట్ {/*typing-children*/} -ఒక కంపోనెంట్ యొక్క children ను వివరించడానికి రెండు సాధారణ మార్గాలు ఉన్నాయి. మొదటిది `React.ReactNode` type ను ఉపయోగించడం, ఇది JSX లో children గా పంపబడగల అన్ని సంభావ్య type ల యొక్క యూనియన్: +ఒక కాంపోనెంట్ యొక్క చైల్డ్ ఎలిమెంట్ ను వివరించడానికి రెండు సాధారణ మార్గాలు ఉన్నాయి. మొదటిది `React.ReactNode` టైప్ ను ఉపయోగించడం, ఇది JSX లో చైల్డ్ ఎలిమెంట్ గా పంపబడగల అన్ని పోసిబుల్ టైప్ల యొక్క యూనియన్: ```ts interface ModalRendererProps { From 98cbef4d0e21abcb18865a5351a3d6c97db71f54 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:39:51 -0500 Subject: [PATCH 36/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 4c99ea87..de12da5b 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -424,7 +424,7 @@ interface ModalRendererProps { } ``` -ఇది children యొక్క విస్తృత నిర్వచనం. రెండవది `React.ReactElement` type ను ఉపయోగించడం, ఇది కేవలం JSX elements మాత్రమే, JavaScript primitives వంటి strings లేదా numbers కాదు: +ఇది చైల్డ్ ఎలిమెంట్ యొక్క బ్రాడ్ డెఫినిషన్. రెండవది `React.ReactElement` టైప్ ను ఉపయోగించడం, ఇది కేవలం JSX ఎలెమెంట్స్ మాత్రమే, JavaScript primitives వంటి strings లేదా numbers కాదు: ```ts interface ModalRendererProps { From 468524d3789bcbdcda76840f7ca59eccdd8b635c Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:40:10 -0500 Subject: [PATCH 37/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 de12da5b..0318a1c8 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -433,7 +433,7 @@ interface ModalRendererProps { } ``` -గమనించండి, మీరు TypeScript ను children ఒక నిర్దిష్ట రకం JSX elements అని వివరించడానికి ఉపయోగించలేరు, కాబట్టి కేవలం `
  • ` children మాత్రమే అంగీకరించే ఒక కంపోనెంట్ ను type-system ద్వారా వివరించలేరు. +గమనించండి, మీరు TypeScript ను చైల్డ్ ఎలిమెంట్ ఒక నిర్దిష్ట టైప్ JSX ఎలిమెంట్స్ ని వివరించడానికి ఉపయోగించలేరు, కాబట్టి కేవలం `
  • ` చైల్డ్ ఎలిమెంట్ మాత్రమే అంగీకరించే ఒక కంపోనెంట్ ను టైప్-సిస్టమ్‌ ద్వారా వివరించలేరు. `React.ReactNode` మరియు `React.ReactElement` రెండింటి ఉదాహరణను type-checker తో సహా [ఈ TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA) లో చూడవచ్చు. From 17d3d7a0e764dd8f257bac084cfec2aab83accb2 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:40:29 -0500 Subject: [PATCH 38/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 0318a1c8..0b007438 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -435,7 +435,7 @@ interface ModalRendererProps { గమనించండి, మీరు TypeScript ను చైల్డ్ ఎలిమెంట్ ఒక నిర్దిష్ట టైప్ JSX ఎలిమెంట్స్ ని వివరించడానికి ఉపయోగించలేరు, కాబట్టి కేవలం `
  • ` చైల్డ్ ఎలిమెంట్ మాత్రమే అంగీకరించే ఒక కంపోనెంట్ ను టైప్-సిస్టమ్‌ ద్వారా వివరించలేరు. -`React.ReactNode` మరియు `React.ReactElement` రెండింటి ఉదాహరణను type-checker తో సహా [ఈ TypeScript playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA) లో చూడవచ్చు. +`React.ReactNode` మరియు `React.ReactElement` రెండింటి ఉదాహరణను టైప్-చెక్కర్ తో సహా [ఈ TypeScript ప్లేగ్రౌండ్](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA) లో చూడవచ్చు. ### Style Props {/*typing-style-props*/} From 187991e7bd8996465e4bae03d70a1bd96fc8b0f6 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:40:50 -0500 Subject: [PATCH 39/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 0b007438..a103a22e 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -437,7 +437,7 @@ interface ModalRendererProps { `React.ReactNode` మరియు `React.ReactElement` రెండింటి ఉదాహరణను టైప్-చెక్కర్ తో సహా [ఈ TypeScript ప్లేగ్రౌండ్](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA) లో చూడవచ్చు. -### Style Props {/*typing-style-props*/} +### స్టైల్ props {/*typing-style-props*/} React లో inline styles ఉపయోగిస్తున్నప్పుడు, `style` prop కు పంపబడే object ను వర్ణించడానికి మీరు `React.CSSProperties` ను ఉపయోగించవచ్చు. ఈ type అన్ని సంభావ్య CSS properties యొక్క యూనియన్, మరియు ఇది మీరు `style` prop కు సరైన CSS properties పంపిస్తున్నారని నిర్ధారించడానికి మరియు మీ ఎడిటర్ లో auto-complete పొందడానికి మంచి మార్గం. From 8b84820cca1da6bf30175e4b0f653bf08077deda Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:41:18 -0500 Subject: [PATCH 40/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 a103a22e..8376a091 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -439,7 +439,7 @@ interface ModalRendererProps { ### స్టైల్ props {/*typing-style-props*/} -React లో inline styles ఉపయోగిస్తున్నప్పుడు, `style` prop కు పంపబడే object ను వర్ణించడానికి మీరు `React.CSSProperties` ను ఉపయోగించవచ్చు. ఈ type అన్ని సంభావ్య CSS properties యొక్క యూనియన్, మరియు ఇది మీరు `style` prop కు సరైన CSS properties పంపిస్తున్నారని నిర్ధారించడానికి మరియు మీ ఎడిటర్ లో auto-complete పొందడానికి మంచి మార్గం. +React లో ఇన్లైన్ స్టైల్స్ ఉపయోగిస్తున్నప్పుడు, `style` prop కు పంపబడే ఆబ్జెక్ట్ ను డిస్క్రైబ్ చేయడానికి మీరు `React.CSSProperties` ను ఉపయోగించవచ్చు. ఈ టైప్ అన్ని పాసిబుల్ CSS ప్రాపర్టీస్ యొక్క యూనియన్, మరియు ఇది మీరు `style` prop కు సరైన CSS ప్రాపర్టీస్ పంపిస్తున్నారని నిర్ధారించడానికి మరియు మీ ఎడిటర్ లో ఆటో-కంప్లీట్ పొందడానికి మంచి మార్గం. ```ts interface MyComponentProps { From 29aa96771aba8d0b78c82cabdc077ebeae92b0d0 Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:41:38 -0500 Subject: [PATCH 41/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- src/content/learn/typescript.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 8376a091..0460d069 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -449,8 +449,8 @@ interface MyComponentProps { ## మరింత నేర్చుకోవడానికి {/*further-learning*/} -ఈ గైడ్ React తో TypeScript ఉపయోగించడం గురించి ప్రాథమికాలను కవర్ చేసింది, కానీ ఇంకా నేర్చుకోవడానికి చాలా ఉంది. -Docs లోని వ్యక్తిగత API పేజీలు TypeScript తో వాటిని ఎలా ఉపయోగించాలో గురించి మరింత లోతైన డాక్యుమెంటేషన్ కలిగి ఉండవచ్చు. +ఈ గైడ్ React తో TypeScript ఉపయోగించడం గురించి బేసిక్స్ ను కవర్ చేసింది, కానీ ఇంకా నేర్చుకోవడానికి చాలా ఉంది. +డాక్స్ లోని ఇండివిడ్యుఅల్ API పేజీలలో TypeScript తో వాటిని ఎలా ఉపయోగించాలి అనే దాని గురించి మరింత ఇన్-డెప్త్ డాక్యుమెంటేషన్ కలిగి ఉండవచ్చు. మేము ఈ కింది రిసోర్సెస్ ను సిఫార్సు చేస్తున్నాము: From 753a743cf00a5f33e829a82a821381e69625108d Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:42:20 -0500 Subject: [PATCH 42/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 0460d069..2d4ea78f 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -456,7 +456,7 @@ interface MyComponentProps { - [TypeScript హ్యాండ్‌బుక్](https://www.typescriptlang.org/docs/handbook/) TypeScript కోసం ఆఫిసిఅల్ డాక్యుమెంటేషన్, మరియు అధిక భాగం కీలక లాంగ్వేజ్ ఫీచర్లను కవర్ చేస్తుంది. - - [The TypeScript release notes](https://devblogs.microsoft.com/typescript/) కొత్త లక్షణాలను లోతుగా కవర్ చేస్తాయి. + - [TypeScript రిలీజ్ నోట్స్](https://devblogs.microsoft.com/typescript/) కొత్త ఫీచర్లను ఇన్-డెప్త్ గా కవర్ చేస్తాయి. - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) TypeScript తో React ఉపయోగించడానికి కమ్యూనిటీ-నిర్వహిత చీట్ షీట్, చాలా ఉపయోగకరమైన ఎడ్జ్ కేసులను కవర్ చేస్తూ ఈ డాక్యుమెంట్ కంటే మరింత విస్తృతతనాన్ని అందిస్తుంది. From 5e937e0107199bbdd570e6b1556b9fd226b4240f Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:42:57 -0500 Subject: [PATCH 43/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 2d4ea78f..c87efbaf 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -458,6 +458,6 @@ interface MyComponentProps { - [TypeScript రిలీజ్ నోట్స్](https://devblogs.microsoft.com/typescript/) కొత్త ఫీచర్లను ఇన్-డెప్త్ గా కవర్ చేస్తాయి. - - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) TypeScript తో React ఉపయోగించడానికి కమ్యూనిటీ-నిర్వహిత చీట్ షీట్, చాలా ఉపయోగకరమైన ఎడ్జ్ కేసులను కవర్ చేస్తూ ఈ డాక్యుమెంట్ కంటే మరింత విస్తృతతనాన్ని అందిస్తుంది. + - [React TypeScript చీట్ షీట్](https://react-typescript-cheatsheet.netlify.app/) TypeScript తో React ఉపయోగించడానికి కమ్యూనిటీ-మైన్టైన్డ్ చీట్ షీట్, చాలా ఉపయోగకరమైన ఎడ్జ్ కేసులను కవర్ చేస్తూ ఈ డాక్యుమెంట్ కంటే మరింత విస్తృత తనాన్ని అందిస్తుంది. - [TypeScript Community Discord](https://discord.com/invite/typescript) TypeScript మరియు React సమస్యలతో సహాయం కోసం ప్రశ్నలు అడగడానికి మరియు సహాయం పొందడానికి గొప్ప ప్రదేశం. \ No newline at end of file From 54cd8008dc6f25f2a93301f4ffa93a5c607e261c Mon Sep 17 00:00:00 2001 From: shajahanshaik915 <154284298+shajahanshaik915@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:43:27 -0500 Subject: [PATCH 44/44] Update src/content/learn/typescript.md Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com> --- 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 c87efbaf..15c52ee6 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -460,4 +460,4 @@ interface MyComponentProps { - [React TypeScript చీట్ షీట్](https://react-typescript-cheatsheet.netlify.app/) TypeScript తో React ఉపయోగించడానికి కమ్యూనిటీ-మైన్టైన్డ్ చీట్ షీట్, చాలా ఉపయోగకరమైన ఎడ్జ్ కేసులను కవర్ చేస్తూ ఈ డాక్యుమెంట్ కంటే మరింత విస్తృత తనాన్ని అందిస్తుంది. - - [TypeScript Community Discord](https://discord.com/invite/typescript) TypeScript మరియు React సమస్యలతో సహాయం కోసం ప్రశ్నలు అడగడానికి మరియు సహాయం పొందడానికి గొప్ప ప్రదేశం. \ No newline at end of file + - [TypeScript కమ్యూనిటీ Discord](https://discord.com/invite/typescript) TypeScript మరియు React సమస్యలతో సహాయం కోసం ప్రశ్నలు అడగడానికి మరియు సహాయం పొందడానికి గొప్ప ప్రదేశం. \ No newline at end of file