Skip to content

Commit e669c48

Browse files
fix(typescript): commiting pending un-implemented suggestions of #116
1 parent 21120f3 commit e669c48

File tree

1 file changed

+16
-17
lines changed

1 file changed

+16
-17
lines changed

src/content/learn/typescript.md

+16-17
Original file line numberDiff line numberDiff line change
@@ -11,32 +11,31 @@ TypeScript అనేది JavaScript కోడ్‌బేస్‌లకు
1111

1212
<YouWillLearn>
1313

14-
* [React Components తో TypeScript](/learn/typescript#typescript-with-react-components)
15-
* [Hooks తో typing examples](/learn/typescript#example-hooks)
16-
* [`@types/react` నుండి సాధారణ types](/learn/typescript/#useful-types)
17-
* [మరింత తెలుసుకోడానికి స్థానాలు](/learn/typescript/#further-learning)
14+
* [TypeScript లో React కాంపోనెంట్లను ఎలా రాయడం](/learn/typescript#typescript-with-react-components)
15+
* [Hooks తో టైప్ ఉదాహరణలు](/learn/typescript#example-hooks)
16+
* [`@types/react` నుండి సాధారణ టైప్స్](/learn/typescript/#useful-types)
17+
* [మరింత నేర్చుకోవడానికి రిసోర్సెస్](/learn/typescript/#further-learning)
1818

1919
</YouWillLearn>
2020

21-
22-
2321
## ఇన్‌స్టాలేషన్ {/*installation*/}
2422

25-
అన్ని [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 ని ఉపయోగించడం కోసం సపోర్ట్ను అందిస్తాయి. ఇన్‌స్టాలేషన్ కోసం ఫ్రేమ్‌వర్క్ యొక్క ప్రత్యేక గైడ్‌ను అనుసరించండి:
2624

2725
- [Next.js](https://nextjs.org/docs/app/building-your-application/configuring/typescript)
2826
- [Remix](https://remix.run/docs/en/1.19.2/guides/typescript)
2927
- [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/)
3028
- [Expo](https://docs.expo.dev/guides/typescript/)
31-
### ఉన్న React ప్రాజెక్ట్‌కు TypeScript ను చేర్చడం {/*adding-typescript-to-an-existing-react-project*/}
3229

33-
React యొక్క type నిర్వచనాల తాజా వెర్షన్ ఇన్‌స్టాల్ చేయడానికి:
30+
### ఇప్పటికే ఉన్న React ప్రాజెక్ట్‌కి TypeScript ని జోడించడం {/*adding-typescript-to-an-existing-react-project*/}
31+
32+
React యొక్క టైప్ డెఫినిషన్ల లేటెస్ట్ వెర్షన్ను ఇన్‌స్టాల్ చేయడానికి:
3433

3534
<TerminalBlock>
3635
npm install @types/react @types/react-dom
3736
</TerminalBlock>
3837

39-
మీ `tsconfig.json` లో, క్రింది compiler ఆప్షన్స్ సెట్ చేయాలి:
38+
మీ `tsconfig.json` లో, క్రింది కంపైలర్ ఆప్షన్స్ ని సెట్ చేయాలి:
4039

4140
1. [`lib`](https://www.typescriptlang.org/tsconfig/#lib) లో `dom` ఉండాలి (గమనిక: ఎలాంటి `lib` ఆప్షన్ స్పెసిఫ్య్ చేయలేదు అంటే, `dom` డిఫాల్ట్ గా ఉంటుంది).
4241
1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) ని తప్పనిసరిగా వెలిడ్ అయ్యే ఆప్షన్లలో ఒకదానికి సెట్ చేయాలి. చాలా అప్లికేషన్స్‌కి `preserve` సరిపోతుంది.
@@ -46,11 +45,11 @@ npm install @types/react @types/react-dom
4645

4746
<Note>
4847

49-
JSX కలిగి ఉన్న ప్రతి ఫైల్ `.tsx` ఫైల్ విస్తరణను ఉపయోగించాలి. ఇది TypeScript-extension, ఈ ఫైల్ లో JSX ఉందని TypeScript కి తెలియజేస్తుంది.
48+
JSX ని కలిగి ఉన్న ప్రతి ఫైల్ తప్పనిసరిగా `.tsx` ఫైల్ ఎక్స్‌టెన్షన్‌ ని ఉపయోగించాలి. ఇది TypeScript స్పెసిఫిక్ ఎక్స్‌టెన్షన్‌, ఇది ఈ ఫైల్లో JSX ఉందని TypeScript కు తెలియజేస్తుంది.
5049

5150
</Note>
5251

53-
React తో TypeScript వ్రాయడం, React తో JavaScript వ్రాయడముతో చాలా సమానం. ఒక కాంపోనెంట్‌తో పని చేస్తున్నప్పుడు ముఖ్యమైన తేడా మీరు మీ కాంపోనెంట్ యొక్క props కోసం types అందించవచ్చు. ఈ types సరిగ్గా ఉన్నాయో లేదో చెక్ చేయడానికి మరియు editor లో inline documentation అందించడానికి ఉపయోగించవచ్చు.
52+
React లో TypeScript వ్రాయడం అనేది React లో JavaScript వ్రాయడముతో సమానం. ఒక కాంపోనెంట్‌తో పని చేస్తున్నప్పుడు ముఖ్యమైన తేడా ఏమిటంటే మీరు మీ కాంపోనెంట్ యొక్క props కోసం టైప్స్ ను అందించవచ్చు. ఈ టైప్స్ అనేవి సరిగ్గా ఉన్నాయో లేదో చెక్ చేయడానికి మరియు మీ ఎడిటర్ కు ఇన్లైన్ డాక్యుమెంటేషన్ ని అందించడానికి ఉపయోగించవచ్చు.
5453

5554
[క్విక్ స్టార్ట్](/learn) గైడ్ నుండి [`MyButton` కాంపోనెంట్](/learn#components) తీసుకుని, బటన్ కోసం `title` ను వివరిస్తున్న టైప్ ని జోడించవచ్చు:
5655

@@ -81,12 +80,11 @@ export default App = AppTSX;
8180

8281
<Note>
8382

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) ను లేదా మరింత ఫుల్లీ-ఫీచర్డ్ ఆన్లైన్ శాండ్బాక్స్ ను ఉపయోగించవచ్చు.
8584

8685
</Note>
8786

88-
ఈ inline syntax ఒక కాంపోనెంట్‌కు types అందించడానికి అత్యంత సులభమైన మార్గం, కానీ మీరు కొన్ని ఫీల్డ్స్‌ను వివరిస్తూ ప్రారంభించినప్పుడు ఇది గందరగోళంగా మారవచ్చు. దీనికి బదులుగా, మీరు కాంపోనెంట్ యొక్క props ను వివరిచేందుకు `interface` లేదా `type` ఉపయోగించవచ్చు:
89-
87+
ఈ ఇన్లైన్ సింటాక్స్ అనేది ఒక కాంపోనెంట్‌కు టైప్స్ ని అందించడానికి అత్యంత సులభమైన మార్గం, కానీ మీరు కొన్ని ఫీల్డ్స్‌ను వివరిస్తూ ప్రారంభించినప్పుడు ఇది గందరగోళంగా మారవచ్చు. దీనికి బదులుగా, మీరు కాంపోనెంట్ యొక్క props ను వివరిచేందుకు `interface` లేదా `type` ని ఉపయోగించవచ్చు:
9088

9189
<Sandpack>
9290

@@ -121,7 +119,7 @@ export default App = AppTSX;
121119

122120
</Sandpack>
123121

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) అనే గైడ్ ఉపయోగపడుతుంది.
125123

126124
## Hooks తో టైప్ ఉదాహరణలు {/*example-hooks*/}
127125

@@ -379,6 +377,7 @@ export default function Form() {
379377
### DOM ఈవెంట్స్ {/*typing-dom-events*/}
380378

381379
React లో DOM ఈవెంట్స్ తో పని చేస్తున్నప్పుడు, ఈవెంట్ యొక్క టైప్ అనేది ఈవెంట్ హ్యాండ్లర్ నుండి తరచుగా అంచనా వేయబడుతుంది. అయితే, ఒక ఫంక్షన్ ను ఈవెంట్ హ్యాండ్లర్ కు పంపించడానికి ఎక్స్ట్రాక్ట్ చేయాలనుకుంటే, మీరు ఈవెంట్ యొక్క టైప్ ను ఎక్సప్లిసిట్ గా సెట్ చేయాలి.
380+
382381
<Sandpack>
383382

384383
```tsx src/App.tsx active
@@ -447,7 +446,7 @@ interface MyComponentProps {
447446
}
448447
```
449448

450-
## మరింత నేర్చుకోవడానికి {/*further-learning*/}
449+
## మరింత నేర్చుకోవడానికి రిసోర్సెస్ {/*further-learning*/}
451450

452451
ఈ గైడ్ React తో TypeScript ఉపయోగించడం గురించి బేసిక్స్ ను కవర్ చేసింది, కానీ ఇంకా నేర్చుకోవడానికి చాలా ఉంది.
453452
డాక్స్ లోని ఇండివిడ్యుఅల్ API పేజీలలో TypeScript తో వాటిని ఎలా ఉపయోగించాలి అనే దాని గురించి మరింత ఇన్-డెప్త్ డాక్యుమెంటేషన్ కలిగి ఉండవచ్చు.

0 commit comments

Comments
 (0)