You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
అన్ని [production-grade React frameworks](/learn/start-a-new-react-project#production-grade-react-frameworks) TypeScript ఉపయోగాన్ని సపోర్ట్ చేస్తాయి. ఇన్స్టాలేషన్ కోసం ఫ్రేమ్వర్క్ ప్రత్యేక గైడ్ను అనుసరించండి:
23
+
అన్ని [ప్రొడక్షన్-గ్రేడ్ React ఫ్రేమ్వర్క్లు](/learn/start-a-new-react-project#production-grade-react-frameworks) TypeScript ని ఉపయోగించడం కోసం సపోర్ట్ను అందిస్తాయి. ఇన్స్టాలేషన్ కోసం ఫ్రేమ్వర్క్ యొక్క ప్రత్యేక గైడ్ను అనుసరించండి:
### ఉన్న React ప్రాజెక్ట్కు TypeScript ను చేర్చడం {/*adding-typescript-to-an-existing-react-project*/}
32
29
33
-
React యొక్క type నిర్వచనాల తాజా వెర్షన్ ఇన్స్టాల్ చేయడానికి:
30
+
### ఇప్పటికే ఉన్న React ప్రాజెక్ట్కి TypeScript ని జోడించడం {/*adding-typescript-to-an-existing-react-project*/}
31
+
32
+
React యొక్క టైప్ డెఫినిషన్ల లేటెస్ట్ వెర్షన్ను ఇన్స్టాల్ చేయడానికి:
34
33
35
34
<TerminalBlock>
36
35
npm install @types/react@types/react-dom
37
36
</TerminalBlock>
38
37
39
-
మీ `tsconfig.json` లో, క్రింది compiler ఆప్షన్స్ సెట్ చేయాలి:
38
+
మీ `tsconfig.json` లో, క్రింది కంపైలర్ ఆప్షన్స్ ని సెట్ చేయాలి:
40
39
41
40
1.[`lib`](https://www.typescriptlang.org/tsconfig/#lib) లో `dom` ఉండాలి (గమనిక: ఎలాంటి `lib` ఆప్షన్ స్పెసిఫ్య్ చేయలేదు అంటే, `dom` డిఫాల్ట్ గా ఉంటుంది).
42
41
1.[`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) ని తప్పనిసరిగా వెలిడ్ అయ్యే ఆప్షన్లలో ఒకదానికి సెట్ చేయాలి. చాలా అప్లికేషన్స్కి `preserve` సరిపోతుంది.
JSX కలిగి ఉన్న ప్రతి ఫైల్ `.tsx` ఫైల్ విస్తరణను ఉపయోగించాలి. ఇది TypeScript-extension, ఈ ఫైల్లో JSX ఉందని TypeScript కి తెలియజేస్తుంది.
48
+
JSX ని కలిగి ఉన్న ప్రతి ఫైల్ తప్పనిసరిగా `.tsx` ఫైల్ ఎక్స్టెన్షన్ ని ఉపయోగించాలి. ఇది TypeScript స్పెసిఫిక్ ఎక్స్టెన్షన్, ఇది ఈ ఫైల్లో JSX ఉందని TypeScript కు తెలియజేస్తుంది.
50
49
51
50
</Note>
52
51
53
-
React తో TypeScript వ్రాయడం, React తో JavaScript వ్రాయడముతో చాలా సమానం. ఒక కాంపోనెంట్తో పని చేస్తున్నప్పుడు ముఖ్యమైన తేడా మీరు మీ కాంపోనెంట్ యొక్క props కోసం types అందించవచ్చు. ఈ types సరిగ్గా ఉన్నాయో లేదో చెక్ చేయడానికి మరియు editor లో inline documentation అందించడానికి ఉపయోగించవచ్చు.
52
+
React లో TypeScript వ్రాయడం అనేది React లో JavaScript వ్రాయడముతో సమానం. ఒక కాంపోనెంట్తో పని చేస్తున్నప్పుడు ముఖ్యమైన తేడా ఏమిటంటే మీరు మీ కాంపోనెంట్ యొక్క props కోసం టైప్స్ ను అందించవచ్చు. ఈ టైప్స్ అనేవి సరిగ్గా ఉన్నాయో లేదో చెక్ చేయడానికి మరియు మీ ఎడిటర్ కు ఇన్లైన్ డాక్యుమెంటేషన్ ని అందించడానికి ఉపయోగించవచ్చు.
54
53
55
54
[క్విక్ స్టార్ట్](/learn) గైడ్ నుండి [`MyButton` కాంపోనెంట్](/learn#components) తీసుకుని, బటన్ కోసం `title` ను వివరిస్తున్న టైప్ ని జోడించవచ్చు:
56
55
@@ -81,12 +80,11 @@ export default App = AppTSX;
81
80
82
81
<Note>
83
82
84
-
ఈ sandboxes TypeScript code ను handle చేయగలవు, కానీ type-checker ను run చేయలేవు. అంటే, మీరు TypeScript sandboxes లో సవరణలు చేయవచ్చు, కానీ మీకు ఏదైనా type errors లేదా హెచ్చరికలు రావు. type-checking పొందడానికి, మీరు [TypeScript Playground](https://www.typescriptlang.org/play) ను లేదా మరింత సర్వసన్నద్ధమైన online sandbox ను ఉపయోగించవచ్చు.
83
+
ఈ శాండ్బాక్స్లు TypeScript కోడ్ ను హేండిల్ చేయగలవు, కానీ అవి టైప్-చెకర్ ను రన్ చేయలేవు. అంటే, మీరు TypeScript శాండ్బాక్స్లో సవరణలు చేయవచ్చు, కానీ మీకు ఏదైనా టైప్ ఎర్రర్స్ లేదా హెచ్చరికలు రావు. టైప్-చెకింగ్ పొందడానికి, మీరు [TypeScript Playground](https://www.typescriptlang.org/play) ను లేదా మరింత ఫుల్లీ-ఫీచర్డ్ ఆన్లైన్ శాండ్బాక్స్ ను ఉపయోగించవచ్చు.
85
84
86
85
</Note>
87
86
88
-
ఈ inline syntax ఒక కాంపోనెంట్కు types అందించడానికి అత్యంత సులభమైన మార్గం, కానీ మీరు కొన్ని ఫీల్డ్స్ను వివరిస్తూ ప్రారంభించినప్పుడు ఇది గందరగోళంగా మారవచ్చు. దీనికి బదులుగా, మీరు కాంపోనెంట్ యొక్క props ను వివరిచేందుకు `interface` లేదా `type` ఉపయోగించవచ్చు:
89
-
87
+
ఈ ఇన్లైన్ సింటాక్స్ అనేది ఒక కాంపోనెంట్కు టైప్స్ ని అందించడానికి అత్యంత సులభమైన మార్గం, కానీ మీరు కొన్ని ఫీల్డ్స్ను వివరిస్తూ ప్రారంభించినప్పుడు ఇది గందరగోళంగా మారవచ్చు. దీనికి బదులుగా, మీరు కాంపోనెంట్ యొక్క props ను వివరిచేందుకు `interface` లేదా `type` ని ఉపయోగించవచ్చు:
90
88
91
89
<Sandpack>
92
90
@@ -121,7 +119,7 @@ export default App = AppTSX;
121
119
122
120
</Sandpack>
123
121
124
-
మీ కాంపోనెంట్ యొక్క 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) గైడ్ ఉపయోగపడుతుంది.
122
+
మీ కాంపోనెంట్ యొక్క props ను వివరిస్తున్న టైప్ అవసరమైనంత సులభంగా లేదా క్లిష్టంగా ఉండవచ్చు, కానీ అవి `type` లేదా `interface` తో వివరించబడిన ఆబ్జెక్ట్ టైప్ అయి ఉండాలి. TypeScript ఆబ్జెక్ట్స్ ను ఎలా వివరిస్తుందో మీరు [ఆబ్జెక్ట్ టైప్స్](https://www.typescriptlang.org/docs/handbook/2/objects.html) లో నేర్చుకోవచ్చు కానీ మీరు [యూనియన్ టైప్స్](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) ను కూడా props గా వివరిస్తూ ఉపయోగించడం గురించి ఆసక్తి చూపవచ్చు, ఇది కొన్ని విభిన్న టైప్లలో ఒకటి కావచ్చు మరియు మరింత ఆధునిక యూజ్ కేసుల కోసం [టైప్స్ నుండి టైప్లను సృష్టించడం](https://www.typescriptlang.org/docs/handbook/2/types-from-types.html) అనే గైడ్ ఉపయోగపడుతుంది.
125
123
126
124
## Hooks తో టైప్ ఉదాహరణలు {/*example-hooks*/}
127
125
@@ -379,6 +377,7 @@ export default function Form() {
379
377
### DOM ఈవెంట్స్ {/*typing-dom-events*/}
380
378
381
379
React లో DOM ఈవెంట్స్ తో పని చేస్తున్నప్పుడు, ఈవెంట్ యొక్క టైప్ అనేది ఈవెంట్ హ్యాండ్లర్ నుండి తరచుగా అంచనా వేయబడుతుంది. అయితే, ఒక ఫంక్షన్ ను ఈవెంట్ హ్యాండ్లర్ కు పంపించడానికి ఎక్స్ట్రాక్ట్ చేయాలనుకుంటే, మీరు ఈవెంట్ యొక్క టైప్ ను ఎక్సప్లిసిట్ గా సెట్ చేయాలి.
380
+
382
381
<Sandpack>
383
382
384
383
```tsx src/App.tsx active
@@ -447,7 +446,7 @@ interface MyComponentProps {
447
446
}
448
447
```
449
448
450
-
## మరింత నేర్చుకోవడానికి {/*further-learning*/}
449
+
## మరింత నేర్చుకోవడానికి రిసోర్సెస్ {/*further-learning*/}
451
450
452
451
ఈ గైడ్ React తో TypeScript ఉపయోగించడం గురించి బేసిక్స్ ను కవర్ చేసింది, కానీ ఇంకా నేర్చుకోవడానికి చాలా ఉంది.
453
452
డాక్స్ లోని ఇండివిడ్యుఅల్ API పేజీలలో TypeScript తో వాటిని ఎలా ఉపయోగించాలి అనే దాని గురించి మరింత ఇన్-డెప్త్ డాక్యుమెంటేషన్ కలిగి ఉండవచ్చు.
0 commit comments