Skip to content

Commit

Permalink
fix(typescript): commiting pending un-implemented suggestions of #116
Browse files Browse the repository at this point in the history
  • Loading branch information
srikanth-kandi committed Aug 5, 2024
1 parent 21120f3 commit e669c48
Showing 1 changed file with 16 additions and 17 deletions.
33 changes: 16 additions & 17 deletions src/content/learn/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,32 +11,31 @@ TypeScript అనేది JavaScript కోడ్‌బేస్‌లకు

<YouWillLearn>

* [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)
* [TypeScript లో React కాంపోనెంట్లను ఎలా రాయడం](/learn/typescript#typescript-with-react-components)
* [Hooks తో టైప్ ఉదాహరణలు](/learn/typescript#example-hooks)
* [`@types/react` నుండి సాధారణ టైప్స్](/learn/typescript/#useful-types)
* [మరింత నేర్చుకోవడానికి రిసోర్సెస్](/learn/typescript/#further-learning)

</YouWillLearn>



## ఇన్‌స్టాలేషన్ {/*installation*/}

అన్ని [production-grade React frameworks](/learn/start-a-new-react-project#production-grade-react-frameworks) TypeScript ఉపయోగాన్ని సపోర్ట్ చేస్తాయి. ఇన్‌స్టాలేషన్ కోసం ఫ్రేమ్‌వర్క్ ప్రత్యేక గైడ్‌ను అనుసరించండి:
అన్ని [ప్రొడక్షన్-గ్రేడ్ React ఫ్రేమ్‌వర్క్‌లు](/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*/}

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

React యొక్క టైప్ డెఫినిషన్ల లేటెస్ట్ వెర్షన్ను ఇన్‌స్టాల్ చేయడానికి:

<TerminalBlock>
npm install @types/react @types/react-dom
</TerminalBlock>

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

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

<Note>

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

</Note>

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

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

Expand Down Expand Up @@ -81,12 +80,11 @@ export default App = AppTSX;

<Note>

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

</Note>

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

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

<Sandpack>

Expand Down Expand Up @@ -121,7 +119,7 @@ export default App = AppTSX;

</Sandpack>

మీ కాంపోనెంట్ యొక్క 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) గైడ్ ఉపయోగపడుతుంది.
మీ కాంపోనెంట్ యొక్క 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) అనే గైడ్ ఉపయోగపడుతుంది.

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

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

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

<Sandpack>

```tsx src/App.tsx active
Expand Down Expand Up @@ -447,7 +446,7 @@ interface MyComponentProps {
}
```

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

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

0 comments on commit e669c48

Please sign in to comment.