వెబ్ అప్లికేషన్‌ను టైప్‌స్క్రిప్ట్‌కు ఎలా బదిలీ చేయాలి – క్లౌడ్‌సావీ ఐటి

టైప్‌స్క్రిప్ట్ జావాస్క్రిప్ట్‌కు స్టాటిక్ టైపింగ్‌ను జోడిస్తుంది, IDE అనుభవాన్ని మెరుగుపరుస్తుంది మరియు దోషాలను తగ్గిస్తుంది. ఇది నేర్చుకోవడం చాలా సులభం, కానీ ఇప్పటికే ఉన్న అప్లికేషన్‌ను టైప్‌స్క్రిప్ట్‌కు మార్చడం చాలా కష్టమైన ప్రక్రియ. మీ అనువర్తనంలో దానితో పనిచేయడానికి కొన్ని పద్ధతులను మేము చర్చిస్తాము.

టైప్‌స్క్రిప్ట్ అంటే ఏమిటి?

టైప్‌స్క్రిప్ట్ అనేది వాక్యనిర్మాణ జావాస్క్రిప్ట్ సూపర్‌సెట్, ఇది స్టాటిక్ టైపింగ్‌కు మద్దతునిస్తుంది. ఇది ఏ బ్రౌజర్‌లోనైనా పనిచేసే JS వనిల్లాపై నేరుగా కంపైల్ చేస్తుంది.

వనిల్లా JS డైనమిక్‌గా టైప్ చేయబడింది. రన్‌టైమ్‌లో వేరియబుల్స్ రకాన్ని మార్చవచ్చు మరియు JS దీన్ని అంగీకరిస్తుంది. ఇది చాలా సరళంగా చేస్తుంది, కానీ తరచుగా పెద్ద ప్రాజెక్టులలో గందరగోళానికి దారితీస్తుంది. టైప్‌స్క్రిప్ట్ రకం భద్రతను వర్తిస్తుంది: మీరు పాస్ చేయలేరు int అంగీకరించే ఫంక్షన్ కోసం విలువ a string.

ఇది ఒక్కటే కొన్ని గొప్ప ప్రయోజనాలను కలిగి ఉంది. ప్రతి ఫంక్షన్ వారు ఏ వాదనలు తీసుకుంటుందో స్పష్టంగా నిర్వచిస్తుంది కాబట్టి, వారితో పనిచేయడం చాలా సులభం చేస్తుంది. టైప్‌స్క్రిప్ట్ IDE సాధనాలతో బాగా కలిసిపోతుంది, పూర్తి ఆటో-కంప్లీట్ మరియు టైప్ చెకింగ్‌ను అందిస్తుంది, ఇక్కడ JS వనిల్లా ప్రాథమిక సింటాక్స్ హైలైటింగ్ మాత్రమే ఉంటుంది.

ఇది IDE కోసం ప్రాథమిక లోపం తనిఖీని కూడా సులభతరం చేస్తుంది. మీరు ఒక ఫంక్షన్ కోసం వాదనను కోల్పోతే, సంకలనం చేయడానికి ముందే VS కోడ్ మీకు వెంటనే తెలియజేస్తుంది.

టైప్‌స్క్రిప్ట్ మరియు వెబ్‌ప్యాక్ యొక్క సంస్థాపన

ప్రారంభించడానికి ముందు గమనిక: మీరు సృష్టించిన రియాక్ట్ ప్రాజెక్ట్ ఉపయోగిస్తుంటే create-react-app, వెబ్‌ప్యాక్ కాన్ఫిగరేషన్ మీ కోసం భాగంగా నిర్వహించబడుతుంది react-scripts. మీరు దీన్ని మార్చాలనుకుంటే, మీరు మీ కాన్ఫిగరేషన్‌ను తొలగించవచ్చు (ప్రస్తుత కాన్ఫిగరేషన్‌ను మీరే నిర్వహించకూడదనుకుంటే సిఫారసు చేయబడలేదు), ఫోర్క్ react-scriptsలేదా లైబ్రరీని ఉపయోగించండి rewired నవీకరణలకు అంతరాయం లేకుండా పరోక్షంగా సవరించడానికి.

అయితే, మీరు క్రొత్త ప్రాజెక్ట్‌ను ప్రారంభిస్తుంటే, మీరు దాన్ని ఉపయోగించవచ్చు create-react-appక్రొత్త ప్రాజెక్ట్ను నిర్మించేటప్పుడు టైప్‌స్క్రిప్ట్ మోడల్.

npx create-react-app --template typescript

టైప్‌స్క్రిప్ట్‌కు వెంటనే మద్దతు ఇవ్వడానికి ఇది ముందే కాన్ఫిగర్ చేయబడుతుంది. ఇది మీ కోసం పనిచేస్తే, మీరు ఈ విభాగంలో మిగిలిన వాటిని దాటవేయవచ్చు. మీరు ఇప్పటికే ఉన్న ప్రాజెక్ట్ను a కి బదిలీ చేయవచ్చు create-react-app ఈ పద్ధతిని ఉపయోగించే టైప్‌స్క్రిప్ట్ మోడల్.

మీరు రియాక్ట్ ఉపయోగించకపోతే, మీరు దీన్ని మాన్యువల్‌గా ఇన్‌స్టాల్ చేయాలి. మీ ప్రాజెక్ట్ కోసం డెవలప్‌మెంట్ డిపెండెన్సీగా టైప్‌స్క్రిప్ట్‌ను ఇన్‌స్టాల్ చేయండి:

npm install --save-dev typescript

మీ కంప్యూటర్‌లో ప్రపంచవ్యాప్తంగా టైప్‌స్క్రిప్ట్‌ను ఇన్‌స్టాల్ చేయాలని మేము సిఫార్సు చేస్తున్నాము, ఇది కమాండ్ లైన్ ఇంటర్‌ఫేస్‌ను ఉపయోగించడానికి మిమ్మల్ని అనుమతిస్తుంది:

npm install -g typescript

దీన్ని ప్రయత్నించడానికి, మీరు ఈ క్రింది విధంగా ప్రాథమిక ఫంక్షన్‌ను సృష్టించవచ్చు:

function Hello(object: string) { console.log(`Hello, ${object}!`);}Hello('World')

గా సేవ్ చేయబడింది test.ts. అన్ని టైప్‌స్క్రిప్ట్ ఫైల్‌లు a కలిగి ఉండాలి .ts పొడిగింపు (o .tsx JSX కోసం). మీరు దీన్ని మానవీయంగా ఉపయోగించి పూరించవచ్చు tsc:

tsc test.ts

దీన్ని చేయడం ద్వారా -w జెండా చేస్తుంది tsc క్రొత్త మార్పుల కోసం చూడండి మరియు మీరు సేవ్ చేసిన ప్రతిసారీ కంపైల్ చేయండి, కానీ మీరు దీన్ని బిల్డ్ ప్రాసెస్‌లో భాగంగా వెబ్‌ప్యాక్‌లోకి అనుసంధానించాలనుకోవచ్చు. మీకు వెబ్‌ప్యాక్ లేకపోతే, దాన్ని ఇన్‌స్టాల్ చేయండి npm:

npm install --save-dev webpack webpack-cli

టైప్‌స్క్రిప్ట్ కాన్ఫిగరేషన్ ఫైల్‌ను సృష్టించండి tsconfig.json ఇది మీ కంపైలర్ సెట్టింగులను నిల్వ చేస్తుంది:

{ "compilerOptions": { "outDir": "./dist/", "sourceMap": true, "skipLibCheck": true, "noImplicitAny": true, "module": "commonjs", "target": "es6", "jsx": "react" }}

కాబట్టి, మీది సృష్టించడానికి లేదా సవరించడానికి మేము మీకు సలహా ఇస్తున్నాము webpack.config.json పొడిగింపులను పరిష్కరించడానికి మరియు టైప్‌స్క్రిప్ట్ యొక్క ఉపయోగం ts-loader. అధునాతన డీబగ్గింగ్ కోసం మీరు సోర్స్ మ్యాప్‌లను ఆన్ చేయాలని మేము సిఫార్సు చేస్తున్నాము.

module.exports = { mode: "production", devtool: "source-map", resolve: { extensions: [".ts", ".tsx"] }, module: { rules: [ { test: /.ts(x?)$/, exclude: /node_modules/, use: [ { loader: "ts-loader" } ] }, { enforce: "pre", test: /.js$/, loader: "source-map-loader" } ] }, externals: { "react": "React", "react-dom": "ReactDOM" }};

ఇప్పుడు, నడుస్తోంది npx webpack లేదా webpack-dev-server మీ కోసం టైప్‌స్క్రిప్ట్ ఫైల్‌ల లోడింగ్‌ను స్వయంచాలకంగా నిర్వహిస్తుంది.

JS ఆధారిత ప్యాకేజీలతో ఎలా పని చేయాలి

మీరు టైప్‌స్క్రిప్ట్‌ను ఇన్‌స్టాల్ చేస్తే, మీ పొడిగింపులలో కొన్నింటిని మార్చండి .tsమరియు ఇప్పుడు అంతా మంటల్లో ఉందని నేను గమనించాను, చింతించకండి. చాలా JS లైబ్రరీలకు టైప్‌స్క్రిప్ట్ ఉపయోగించడానికి సిద్ధంగా లేదు, కానీ మూడవ పార్టీ రకాలు సాధారణంగా డెఫినిట్లీ టైప్డ్ నుండి లభిస్తాయి, ఇవి చాలా సాధారణమైన లైబ్రరీల కోసం టైపోలాజీలను నిర్వహించడానికి అంకితం చేయబడిన కమ్యూనిటీ రిపోజిటరీ, అవి విడిగా ఇన్‌స్టాల్ చేయబడతాయి npm ఆధారపడటం. ఉదాహరణకు, రియాక్ట్ నుండి అందుబాటులో ఉంది @types/react:

npm install --save-dev @types/react @types/react-dom

అనుబంధ ప్యాకేజీని ఉపయోగిస్తున్నప్పుడు ఇది వెంటనే సమస్యలను తొలగిస్తుంది. క్రొత్త ప్యాకేజీని ఇన్‌స్టాల్ చేసిన తర్వాత మీకు కంపైలర్ లోపాలు వస్తే, ఇన్‌స్టాల్ చేయడానికి ప్రయత్నించండి @types/package.

అదృష్టవశాత్తూ, టైప్‌స్క్రిప్ట్ ఏమైనప్పటికీ స్థానిక JS తో కంపైల్ చేయడం మరియు సరిగ్గా పనిచేయడం కొనసాగుతుంది: ఇది ఒక సమస్య అని మీకు చెప్పే కొన్ని ఎర్రటి స్క్విగల్స్ మీరు చూడవచ్చు. మీరు నిజంగా టైపింగ్‌ను సరిచేయాలనుకుంటే a npm బహిరంగంగా అందుబాటులో ఉన్న రకాలు లేని ప్యాకేజీ, మీరు దాని కోసం డిక్లరేషన్ ఫైల్‌ను వ్రాయవచ్చు, ఐచ్ఛికంగా ఖచ్చితంగా టైప్ చేయబడి ఉంటుంది (మరియు మీ క్రొత్త ఎంట్రీలను కమ్యూనిటీ రిపోజిటరీకి పంపడం).

డిక్లరేషన్ ఫైల్ కింది వాటికి సమానంగా ఉంటుంది, సాధారణంగా ఇలా సేవ్ చేయబడుతుంది package.d.ts ఎక్కడో మీదే src:

export as namespace Packageexport = Packagedeclare namespace Package { interface Type { value: boolean } // etc...}

ఆ ప్యాకేజీని ఉపయోగించి ఏదైనా కోడ్ ఎగువన ఒక సూచనను జోడించడం ద్వారా మీరు డిక్లరేషన్‌ను ఉపయోగించవచ్చు:

///

లెగసీ కోడ్‌ను ఎలా టైప్ చేయాలి

లెగసీ కోడ్‌ను టైప్ చేయడం అనేది మీ వ్యాపార తర్కానికి ప్రత్యేకమైన మాన్యువల్ ప్రక్రియ, కాబట్టి మీ ప్రాజెక్ట్ పరిమాణాన్ని బట్టి కొంత సమయం పడుతుంది. ఏదేమైనా, ప్రాథమిక భావన చాలా కష్టం కాదు మరియు మీరు అమలు చేసిన ఫంక్షన్ల ద్వారా ఆమోదించబడిన మరియు తిరిగి వచ్చిన విలువలకు అనుకూల ఇంటర్‌ఫేస్‌లను సృష్టించడం.

ఉదాహరణకు, మనకు కొన్ని ఆధారాలను అంగీకరించే మరియు కొన్ని JSX ను అందించే రియాక్ట్ భాగం ఉందని అనుకుందాం:

దీన్ని టైప్ చేయడానికి, ఫంక్షన్ ఉపయోగించడానికి మీరు కొత్త ఇంటర్‌ఫేస్‌ను నిర్వచించవచ్చు. మీరు ఒక కీని సూచించినప్పుడల్లా props కోడ్‌లో, ఉదాహరణకు props.divCustomColor ఇక్కడ, సంబంధిత రకంతో పాటు ఇంటర్‌ఫేస్‌కు జోడించండి.

కాబట్టి మీరు ఈ ఫంక్షన్‌ను మరొక ఫైల్‌లో ఉపయోగించినప్పుడు, మీరు దానిని నిర్వచించకపోతే లోపం వస్తుంది props.divCustomColorలేదా అతన్ని తప్పు వ్యక్తిగా పంపించడానికి ప్రయత్నించండి. మీ అనువర్తనం ఇప్పటికే విలువలను సురక్షితంగా నిర్వహిస్తే, మీ అనేక భాగాలను టైప్ చేయాల్సిన అవసరం ఉంది. అయినప్పటికీ, కఠినమైన టైపింగ్‌ను బాగా నిర్వహించడానికి కొన్ని విషయాలు మార్చాల్సిన అవసరం ఉంది.

మీరు నిజంగా ఏదైనా మీ తలపై గోకడం చేస్తుంటే, మీరు ఎప్పుడైనా టైప్‌స్క్రిప్ట్ కంపైలర్ హెచ్చరికలను వదులుకోవచ్చు మరియు నిలిపివేయవచ్చు ts-ignore జెండా:

//@ts-ignore

OR ts-nocheck మొత్తం ఫైల్ కోసం.

ప్రాజెక్ట్ స్థాయి రకాలను కలుపుతోంది

మీరు ప్రాజెక్ట్ స్థాయిలో అనుకూల రకాలను జోడించాలనుకుంటే, మీరు గ్లోబల్ డిక్లరేషన్ ఫైల్‌ను సృష్టించాలని మేము సిఫార్సు చేస్తున్నాము. ఉదాహరణకు, మీరు మీ అనువర్తనం యొక్క రంగులను నిల్వ చేసే రిఫరెన్స్ ఎనుమ్‌ను సృష్టించాలనుకుంటే, వాటిని నేరుగా పేరుతో ఉపయోగించడానికి అనుమతిస్తుంది, మీరు ఈ క్రింది వాటిని ఇలా సేవ్ చేయవచ్చు global.d.ts మీలో src ఫోల్డర్:

declare global {    enum Color {        primary = "#6ca583",        accent = "#9b8dab",    }}export {};

మీకు నిజంగా సమస్యలు ఉంటే ఏదైనా తనిఖీలను అవ్యక్తంగా నిలిపివేయండి

మీరు ఎదుర్కొనే అత్యంత సాధారణ తప్పు టైప్‌స్క్రిప్ట్ “అవ్యక్తంగా ఏదైనా” గురించి ఫిర్యాదు చేయడం. మీరు ఏ రకాన్ని ఉపయోగించి ఫంక్షన్లను అంగీకరించేలా చేయవచ్చు ఏదైనా స్పష్టంగా, లేదా val: any. ఇది మంచిది, మరియు మీరు సాధారణంగా మరింత కఠినంగా వ్రాయవలసి ఉండగా, టైప్‌స్క్రిప్ట్‌ను విశ్రాంతి తీసుకోమని చెప్పడం కొన్నిసార్లు మంచిది.

అప్రమేయంగా, అన్ని విలువలు అవ్యక్తంగా విలువను కలిగి ఉంటాయి any రకం, ఇది డిఫాల్ట్ జావాస్క్రిప్ట్ డైనమిక్ టైపింగ్ సిస్టమ్ మాత్రమే. టైప్‌స్క్రిప్ట్ దీని గురించి చాలా ఫిర్యాదు చేస్తుంది. మీరు కోరుకుంటే, మీరు సెట్టింగ్ ద్వారా ఫిర్యాదును నిలిపివేయవచ్చు noImplicitAny తప్పుడు:

{ "compilerOptions": { "noImplicitAny": false }}

అయినప్పటికీ జాగ్రత్తగా ఉండండి: ఇది లోపాన్ని మాత్రమే నిశ్శబ్దం చేస్తుంది మరియు మూల సమస్యను పరిష్కరించదు. ఏదేమైనా, మీరు ప్రతిదాన్ని టైప్ చేసేటప్పుడు తాత్కాలికంగా దీన్ని ప్రారంభించాలనుకుంటే, ఈ సమయంలో కోడ్ కంపైల్ చేయడానికి ఇది అనుమతిస్తుంది.