Skip to content

Commit

Permalink
fix(typescript): translated code block comments
Browse files Browse the repository at this point in the history
  • Loading branch information
srikanth-kandi committed Aug 6, 2024
1 parent e669c48 commit e6069d8
Showing 1 changed file with 26 additions and 26 deletions.
52 changes: 26 additions & 26 deletions src/content/learn/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,8 @@ function MyButton({ title }: { title: string }) {
export default function MyApp() {
return (
<div>
<h1>Welcome to my app</h1>
<MyButton title="I'm a button" />
<h1>నా యాప్‌కి స్వాగతం</h1>
<MyButton title="నేను ఒక బటన్‌ ని" />
</div>
);
}
Expand All @@ -80,7 +80,7 @@ export default App = AppTSX;

<Note>

ఈ శాండ్‌బాక్స్‌లు TypeScript కోడ్‌ ను హేండిల్ చేయగలవు, కానీ అవి టైప్-చెకర్‌ ను రన్ చేయలేవు. అంటే, మీరు TypeScript శాండ్బాక్స్లో సవరణలు చేయవచ్చు, కానీ మీకు ఏదైనా టైప్ ఎర్రర్స్ లేదా హెచ్చరికలు రావు. టైప్-చెకింగ్ పొందడానికి, మీరు [TypeScript Playground](https://www.typescriptlang.org/play) ను లేదా మరింత ఫుల్లీ-ఫీచర్డ్ ఆన్లైన్ శాండ్బాక్స్ ను ఉపయోగించవచ్చు.
ఈ శాండ్‌బాక్స్‌లు TypeScript కోడ్‌ ను హేండిల్ చేయగలవు, కానీ అవి టైప్-చెకర్‌ ను రన్ చేయలేవు. అంటే, మీరు TypeScript శాండ్బాక్స్లో సవరణలు చేయవచ్చు, కానీ మీకు ఏదైనా టైప్ ఎర్రర్స్ లేదా హెచ్చరికలు రావు. టైప్-చెకింగ్ పొందడానికి, మీరు [TypeScript ప్లేగ్రౌండ్](https://www.typescriptlang.org/play) ను లేదా మరింత ఫుల్లీ-ఫీచర్డ్ ఆన్లైన్ శాండ్బాక్స్ ను ఉపయోగించవచ్చు.

</Note>

Expand All @@ -90,9 +90,9 @@ export default App = AppTSX;

```tsx src/App.tsx active
interface MyButtonProps {
/** The text to display inside the button */
/** బటన్ లోపల చూపించాల్సిన టెక్స్ట్ */
title: string;
/** Whether the button can be interacted with */
/** బటన్‌ తో ఇంటరాక్ట్ అవవచ్చా */
disabled: boolean;
}

Expand All @@ -105,8 +105,8 @@ function MyButton({ title, disabled }: MyButtonProps) {
export default function MyApp() {
return (
<div>
<h1>Welcome to my app</h1>
<MyButton title="I'm a disabled button" disabled={true}/>
<h1>నా యాప్‌కి స్వాగతం</h1>
<MyButton title="నేను డిసేబుల్డ్ బటన్‌ ని" disabled={true}/>
</div>
);
}
Expand All @@ -132,14 +132,14 @@ export default App = AppTSX;
[`useState` Hook](/reference/react/useState) ఇనీషియల్ state గా ఇవ్వబడిన వేల్యూ ను రీ-యూజ్ చేసుకొని ఆ వేల్యూ యొక్క టైప్ ఏమిటి అని నిర్ధారిస్తుంది. ఉదాహరణకు:

```ts
// టైప్ని "boolean" గా సూచిస్తుంది
// టైప్ ను "boolean" గా సూచిస్తుంది
const [enabled, setEnabled] = useState(false);
```

ఇది `enabled` కు `boolean` టైప్ ను అసైన్ చేస్తుంది, మరియు `setEnabled` `boolean` ఆర్గుమెంట్ ను స్వీకరించే ఫంక్షన్ లేదా `boolean` ను రిటర్న్ చేసే ఫంక్షన్ అవుతుంది. మీరు state కోసం టైప్ ను ఎక్సప్లిసిట్ గా ఇవ్వాలనుకుంటే, మీరు `useState` కాల్ కు టైప్ ఆర్గుమెంట్ ను ఇవ్వవచ్చు:
ఇది `enabled` కు `boolean` టైప్ ను అసైన్ చేస్తుంది, మరియు `setEnabled` అనేది `boolean` ఆర్గుమెంట్ ను స్వీకరించే ఫంక్షన్ లేదా `boolean` ను రిటర్న్ చేసే ఫంక్షన్ అవుతుంది. మీరు state కోసం టైప్ ను ఎక్సప్లిసిట్ గా ఇవ్వాలనుకుంటే, మీరు `useState` కాల్ కు టైప్ ఆర్గుమెంట్ ను ఇవ్వవచ్చు:

```ts
// టైప్ని "boolean" కి ఎక్సప్లిసిట్ గా సెట్ చేయండి
// టైప్ ను "boolean" కి ఎక్సప్లిసిట్ గా సెట్ చేయండి
const [enabled, setEnabled] = useState<boolean>(false);
```

Expand Down Expand Up @@ -189,7 +189,7 @@ function stateReducer(state: State, action: CounterAction): State {
case "setCount":
return { ...state, count: action.value };
default:
throw new Error("Unknown action");
throw new Error("తెలియని ఆక్షన్");
}
}

Expand All @@ -201,11 +201,11 @@ export default function App() {

return (
<div>
<h1>Welcome to my counter</h1>
<h1>నా కౌంటర్‌కి స్వాగతం</h1>

<p>Count: {state.count}</p>
<button onClick={addFive}>Add 5</button>
<button onClick={reset}>Reset</button>
<p>కౌంట్: {state.count}</p>
<button onClick={addFive}>5 ని యాడ్ చేయండి</button>
<button onClick={reset}>రీసెట్</button>
</div>
);
}
Expand Down Expand Up @@ -270,7 +270,7 @@ function MyComponent() {

return (
<div>
<p>Current theme: {theme}</p>
<p>ప్రస్తుత థీమ్: {theme}</p>
</div>
)
}
Expand All @@ -290,18 +290,18 @@ export default App = AppTSX;
```js {5, 16-20}
import { createContext, useContext, useState, useMemo } from 'react';

// This is a simpler example, but you can imagine a more complex object here
// ఇది సింపుల్ ఉదాహరణ, కానీ మీరు ఇక్కడ మరింత క్లిష్టమైన ఆబ్జెక్ట్ ను ఊహించవచ్చు
type ComplexObject = {
kind: string
};

// The context is created with `| null` in the type, to accurately reflect the default value.
// సరైన డిఫాల్ట్ వేల్యూ ను ప్రతిబింబించడానికి, `| null` టైప్ తో context సృష్టించబడింది.
const Context = createContext<ComplexObject | null>(null);

// The `| null` will be removed via the check in the Hook.
// `| null` అనేది Hook లోని చెక్ ద్వారా తొలగించబడుతుంది.
const useGetComplexObject = () => {
const object = useContext(Context);
if (!object) { throw new Error("useGetComplexObject must be used within a Provider") }
if (!object) { throw new Error("useGetComplexObject ఒక provider లోనే ఉపయోగించాలి.") }
return object;
}

Expand All @@ -320,7 +320,7 @@ function MyComponent() {

return (
<div>
<p>Current object: {object.kind}</p>
<p>ప్రస్తుత ఆబ్జెక్ట్: {object.kind}</p>
</div>
)
}
Expand All @@ -331,7 +331,7 @@ function MyComponent() {
[`useMemo`](/reference/react/useMemo) Hook ఒక ఫంక్షన్ కాల్ నుండి ఒక మేమోరైజ్డ్ వేల్యూ ను సృష్టిస్తుంది/రీ-అక్సెస్ చేస్తుంది, 2వ పారామీటర్‌గా పంపబడిన డిపెండెన్సీలు మారినప్పుడు మాత్రమే ఫంక్షన్ రీ-రన్ అవుతుంది. Hook ను కాల్ చేయడం వలన వచ్చిన రిజల్ట్ అనేది మొదటి పారామీటర్‌ లోని ఫంక్షన్ నుండి రిటర్న్ అయిన వాల్యూ ద్వారా అంచనా వేయబడుతుంది. మీరు మరింత ఎక్స్ప్లిసిట్ గా టైప్ ఆర్గుమెంట్ ను Hook కు ప్రొవైడ్ చేయవచ్చు.

```ts
// The type of visibleTodos is inferred from the return value of filterTodos
// visibleTodos యొక్క టైప్, filterTodos యొక్క రిటర్న్ వేల్యూ నుండి ఊహించబడుతుంది.
const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
```

Expand All @@ -355,7 +355,7 @@ TypeScript strict mode లో పని చేస్తున్నప్పు
import { useState, useCallback } from 'react';

export default function Form() {
const [value, setValue] = useState("Change me");
const [value, setValue] = useState("నన్ను మార్చు");

const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>((event) => {
setValue(event.currentTarget.value);
Expand All @@ -364,7 +364,7 @@ export default function Form() {
return (
<>
<input value={value} onChange={handleChange} />
<p>Value: {value}</p>
<p>వేల్యూ: {value}</p>
</>
);
}
Expand All @@ -384,7 +384,7 @@ React లో DOM ఈవెంట్స్ తో పని చేస్తున
import { useState } from 'react';

export default function Form() {
const [value, setValue] = useState("Change me");
const [value, setValue] = useState("నన్ను మార్చు");

function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
setValue(event.currentTarget.value);
Expand All @@ -393,7 +393,7 @@ export default function Form() {
return (
<>
<input value={value} onChange={handleChange} />
<p>Value: {value}</p>
<p>వేల్యూ: {value}</p>
</>
);
}
Expand Down

0 comments on commit e6069d8

Please sign in to comment.