ರಿಯಾಕ್ಟ್‌ನೊಂದಿಗೆ ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್: ವಿಸ್ತರಿಸಬಲ್ಲ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ರಿಯಾಕ್ಟ್ ಒಂದು ಶಕ್ತಿಯುತ ಸಂಯೋಜನೆಯಾಗಿದೆ. ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಗೆ ಸ್ಟ್ಯಾಟಿಕ್ ಟೈಪಿಂಗ್ ಅನ್ನು ತರುತ್ತದೆ, ಕೋಡ್ ಗುಣಮಟ್ಟ ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ, ಆದರೆ ರಿಯಾಕ್ಟ್ ಯೂಸರ್ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಡಿಕ್ಲರೇಟಿವ್ ಮತ್ತು ಕಾಂಪೊನೆಂಟ್-ಆಧಾರಿತ ವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಈ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಸೂಕ್ತವಾದ ದೃಢವಾದ, ವಿಸ್ತರಿಸಬಲ್ಲ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಲು ರಿಯಾಕ್ಟ್‌ನೊಂದಿಗೆ ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸುವ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತದೆ.

ರಿಯಾಕ್ಟ್‌ನೊಂದಿಗೆ ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಏಕೆ ಬಳಸಬೇಕು?

ಉತ್ತಮ ಅಭ್ಯಾಸಗಳಿಗೆ ಧುಮುಕುವ ಮೊದಲು, ರಿಯಾಕ್ಟ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ಗೆ ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಏಕೆ ಒಂದು ಮೌಲ್ಯಯುತ ಸೇರ್ಪಡೆಯಾಗಿದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳೋಣ:

• ಸುಧಾರಿತ ಕೋಡ್ ಗುಣಮಟ್ಟ: ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್‌ನ ಸ್ಟ್ಯಾಟಿಕ್ ಟೈಪಿಂಗ್ ಅಭಿವೃದ್ಧಿ ಪ್ರಕ್ರಿಯೆಯ ಆರಂಭದಲ್ಲಿ ದೋಷಗಳನ್ನು ಹಿಡಿಯಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ರನ್‌ಟೈಮ್ ಸಮಸ್ಯೆಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಕೋಡ್ ವಿಶ್ವಾಸಾರ್ಹತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
• ವರ್ಧಿತ ನಿರ್ವಹಣೆ: ಟೈಪ್ ಟಿಪ್ಪಣಿಗಳು ಮತ್ತು ಇಂಟರ್ಫೇಸ್‌ಗಳು ಕೋಡ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ರಿಫ್ಯಾಕ್ಟರ್ ಮಾಡಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ, ಇದು ಉತ್ತಮ ದೀರ್ಘಕಾಲೀನ ನಿರ್ವಹಣೆಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
• ಉತ್ತಮ IDE ಬೆಂಬಲ: ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಅತ್ಯುತ್ತಮ IDE ಬೆಂಬಲವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದರಲ್ಲಿ ಆಟೋಕಂಪ್ಲೀಷನ್, ಕೋಡ್ ನ್ಯಾವಿಗೇಷನ್ ಮತ್ತು ರಿಫ್ಯಾಕ್ಟರಿಂಗ್ ಪರಿಕರಗಳು ಸೇರಿವೆ, ಇದು ಡೆವಲಪರ್ ಉತ್ಪಾದಕತೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.
• ಕಡಿಮೆ ದೋಷಗಳು: ಸ್ಟ್ಯಾಟಿಕ್ ಟೈಪಿಂಗ್ ಅನೇಕ ಸಾಮಾನ್ಯ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ದೋಷಗಳನ್ನು ರನ್‌ಟೈಮ್‌ಗಿಂತ ಮೊದಲು ಹಿಡಿಯುತ್ತದೆ, ಇದು ಹೆಚ್ಚು ಸ್ಥಿರ ಮತ್ತು ದೋಷ-ಮುಕ್ತ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
• ಸುಧಾರಿತ ಸಹಯೋಗ: ಸ್ಪಷ್ಟ ಟೈಪ್ ವ್ಯಾಖ್ಯಾನಗಳು ತಂಡಗಳಿಗೆ ದೊಡ್ಡ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ ಸಹಯೋಗಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ, ಏಕೆಂದರೆ ಡೆವಲಪರ್‌ಗಳು ವಿಭಿನ್ನ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಮತ್ತು ಫಂಕ್ಷನ್‌ಗಳ ಉದ್ದೇಶ ಮತ್ತು ಬಳಕೆಯನ್ನು ತ್ವರಿತವಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬಹುದು.

ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ರಿಯಾಕ್ಟ್ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಸ್ಥಾಪಿಸುವುದು

Create React App ಬಳಸುವುದು

ಹೊಸ ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ರಿಯಾಕ್ಟ್ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಲು ಸುಲಭವಾದ ಮಾರ್ಗವೆಂದರೆ ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಟೆಂಪ್ಲೇಟ್‌ನೊಂದಿಗೆ Create React App ಅನ್ನು ಬಳಸುವುದು:

npx create-react-app my-typescript-react-app --template typescript

ಈ ಕಮಾಂಡ್ ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಕಾನ್ಫಿಗರ್ ಮಾಡಲಾದ ಮೂಲ ರಿಯಾಕ್ಟ್ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ, ಇದರಲ್ಲಿ ಅಗತ್ಯ ಡಿಪೆಂಡೆನ್ಸಿಗಳು ಮತ್ತು tsconfig.json ಫೈಲ್ ಸೇರಿವೆ.

tsconfig.json ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡುವುದು

tsconfig.json ಫೈಲ್ ನಿಮ್ಮ ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಕಾನ್ಫಿಗರೇಶನ್‌ನ ಹೃದಯವಾಗಿದೆ. ಇಲ್ಲಿ ಕೆಲವು ಶಿಫಾರಸು ಮಾಡಲಾದ ಸೆಟ್ಟಿಂಗ್‌ಗಳಿವೆ:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

ಪರಿಗಣಿಸಬೇಕಾದ ಪ್ರಮುಖ ಆಯ್ಕೆಗಳು:

• "strict": true: ಕಟ್ಟುನಿಟ್ಟಾದ ಟೈಪ್ ಪರಿಶೀಲನೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ, ಇದು ಸಂಭಾವ್ಯ ದೋಷಗಳನ್ನು ಹಿಡಿಯಲು ಹೆಚ್ಚು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ.
• "esModuleInterop": true: CommonJS ಮತ್ತು ES ಮಾಡ್ಯೂಲ್‌ಗಳ ನಡುವೆ ಪರಸ್ಪರ ಕಾರ್ಯಸಾಧ್ಯತೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.
• "jsx": "react-jsx": ಹೊಸ JSX ಟ್ರಾನ್ಸ್‌ಫಾರ್ಮ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ, ಇದು ರಿಯಾಕ್ಟ್ ಕೋಡ್ ಅನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.

ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಕಾಂಪೊನೆಂಟ್ ಪ್ರೊಪ್ಸ್ ಟೈಪಿಂಗ್

ರಿಯಾಕ್ಟ್‌ನೊಂದಿಗೆ ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸುವಾಗ ಪ್ರಮುಖ ಅಂಶವೆಂದರೆ ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ಪ್ರೊಪ್ಸ್ ಅನ್ನು ಸರಿಯಾಗಿ ಟೈಪ್ ಮಾಡುವುದು. ಪ್ರೊಪ್ಸ್ ಆಬ್ಜೆಕ್ಟ್‌ನ ಆಕಾರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಇಂಟರ್ಫೇಸ್‌ಗಳು ಅಥವಾ ಟೈಪ್ ಅಲಿಯಾಸ್‌ಗಳನ್ನು ಬಳಸಿ.

interface MyComponentProps {
  name: string;
  age?: number; // Optional prop
  onClick: () => void;
}

const MyComponent: React.FC = ({ name, age, onClick }) => {
  return (
    

      
Hello, {name}!
      {age && 
You are {age} years old.
}
      Click me
    
  );
};

React.FC<MyComponentProps> ಬಳಸುವುದರಿಂದ ಕಾಂಪೊನೆಂಟ್ ಒಂದು ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್ ಆಗಿದೆ ಮತ್ತು ಅದರ ಪ್ರೊಪ್ಸ್ ಸರಿಯಾಗಿ ಟೈಪ್ ಮಾಡಲ್ಪಟ್ಟಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಕಾಂಪೊನೆಂಟ್ ಸ್ಟೇಟ್ ಟೈಪಿಂಗ್

ನೀವು ಕ್ಲಾಸ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, ನೀವು ಕಾಂಪೊನೆಂಟ್‌ನ ಸ್ಟೇಟ್ ಅನ್ನು ಸಹ ಟೈಪ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ಸ್ಟೇಟ್ ಆಬ್ಜೆಕ್ಟ್‌ಗಾಗಿ ಒಂದು ಇಂಟರ್ಫೇಸ್ ಅಥವಾ ಟೈಪ್ ಅಲಿಯಾಸ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ ಮತ್ತು ಅದನ್ನು ಕಾಂಪೊನೆಂಟ್ ವ್ಯಾಖ್ಯಾನದಲ್ಲಿ ಬಳಸಿ.

interface MyComponentState {
  count: number;
}

class MyComponent extends React.Component<{}, MyComponentState> {
  state: MyComponentState = {
    count: 0
  };

  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

  render() {
    return (
      

        
Count: {this.state.count}
        Increment
      
    );
  }
}

useState ಹುಕ್ ಬಳಸುವ ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗಾಗಿ, ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಸಾಮಾನ್ಯವಾಗಿ ಸ್ಟೇಟ್ ವೇರಿಯಬಲ್‌ನ ಟೈಪ್ ಅನ್ನು ಊಹಿಸಬಹುದು, ಆದರೆ ನೀವು ಅದನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಒದಗಿಸಬಹುದು:

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
};

ಟೈಪ್ ಗಾರ್ಡ್‌ಗಳನ್ನು ಬಳಸುವುದು

ಟೈಪ್ ಗಾರ್ಡ್‌ಗಳು ಒಂದು ನಿರ್ದಿಷ್ಟ ಸ್ಕೋಪ್‌ನಲ್ಲಿ ವೇರಿಯಬಲ್‌ನ ಟೈಪ್ ಅನ್ನು ಸಂಕುಚಿತಗೊಳಿಸುವ ಫಂಕ್ಷನ್‌ಗಳಾಗಿವೆ. ಯೂನಿಯನ್ ಟೈಪ್‌ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ ಅಥವಾ ಕಾರ್ಯಾಚರಣೆಯನ್ನು ನಿರ್ವಹಿಸುವ ಮೊದಲು ವೇರಿಯಬಲ್ ಒಂದು ನಿರ್ದಿಷ್ಟ ಟೈಪ್ ಅನ್ನು ಹೊಂದಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬೇಕಾದಾಗ ಇವು ಉಪಯುಕ್ತವಾಗಿವೆ.

interface Circle {
  kind: "circle";
  radius: number;
}

interface Square {
  kind: "square";
  side: number;
}

type Shape = Circle | Square;

function isCircle(shape: Shape): shape is Circle {
  return shape.kind === "circle";
}

function getArea(shape: Shape): number {
  if (isCircle(shape)) {
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.side ** 2;
  }
}

isCircle ಫಂಕ್ಷನ್ ಒಂದು ಟೈಪ್ ಗಾರ್ಡ್ ಆಗಿದ್ದು, ಅದು Shape ಒಂದು Circle ಆಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ. if ಬ್ಲಾಕ್ ಒಳಗೆ, ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್‌ಗೆ shape ಒಂದು Circle ಎಂದು ತಿಳಿದಿದೆ ಮತ್ತು ಅದರ radius ಪ್ರಾಪರ್ಟಿಯನ್ನು ಪ್ರವೇಶಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಈವೆಂಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು

ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ಈವೆಂಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವಾಗ, ಈವೆಂಟ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಸರಿಯಾಗಿ ಟೈಪ್ ಮಾಡುವುದು ಮುಖ್ಯ. React ನೇಮ್‌ಸ್ಪೇಸ್‌ನಿಂದ ಸೂಕ್ತವಾದ ಈವೆಂಟ್ ಟೈಪ್ ಅನ್ನು ಬಳಸಿ.

const MyComponent: React.FC = () => {
  const handleChange = (event: React.ChangeEvent) => {
    console.log(event.target.value);
  };

  return (
    
  );
};

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, React.ChangeEvent<HTMLInputElement> ಅನ್ನು ಇನ್ಪುಟ್ ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ ಚೇಂಜ್ ಈವೆಂಟ್‌ಗಾಗಿ ಈವೆಂಟ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಟೈಪ್ ಮಾಡಲು ಬಳಸಲಾಗುತ್ತದೆ. ಇದು target ಪ್ರಾಪರ್ಟಿಗೆ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಅದು ಒಂದು HTMLInputElement ಆಗಿದೆ.

ಪ್ರಾಜೆಕ್ಟ್ ರಚನೆ

ಚೆನ್ನಾಗಿ ರಚನಾತ್ಮಕವಾದ ಪ್ರಾಜೆಕ್ಟ್ ನಿರ್ವಹಣೆ ಮತ್ತು ವಿಸ್ತರಣೀಯತೆಗೆ ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಾಗಿ ಸೂಚಿಸಲಾದ ಪ್ರಾಜೆಕ್ಟ್ ರಚನೆ ಇಲ್ಲಿದೆ:

src/
├── components/
│   ├── MyComponent/
│   │   ├── MyComponent.tsx
│   │   ├── MyComponent.module.css
│   │   └── index.ts
├── pages/
│   ├── HomePage.tsx
│   └── AboutPage.tsx
├── services/
│   ├── api.ts
│   └── auth.ts
├── types/
│   ├── index.ts
│   └── models.ts
├── utils/
│   ├── helpers.ts
│   └── constants.ts
├── App.tsx
├── index.tsx
├── react-app-env.d.ts
└── tsconfig.json

ಪ್ರಮುಖ ಅಂಶಗಳು:

• ಕಾಂಪೊನೆಂಟ್‌ಗಳು: ಸಂಬಂಧಿತ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಡೈರೆಕ್ಟರಿಗಳಲ್ಲಿ ಗುಂಪು ಮಾಡಿ. ಪ್ರತಿಯೊಂದು ಡೈರೆಕ್ಟರಿಯು ಕಾಂಪೊನೆಂಟ್‌ನ ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್, CSS ಮಾಡ್ಯೂಲ್‌ಗಳು (ಬಳಸಿದರೆ), ಮತ್ತು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರಫ್ತು ಮಾಡಲು index.ts ಫೈಲ್ ಅನ್ನು ಹೊಂದಿರಬೇಕು.
• ಪುಟಗಳು: ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ವಿಭಿನ್ನ ಪುಟಗಳನ್ನು ಪ್ರತಿನಿಧಿಸುವ ಉನ್ನತ ಮಟ್ಟದ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಸಂಗ್ರಹಿಸಿ.
• ಸೇವೆಗಳು: ಈ ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ API ಕರೆಗಳು ಮತ್ತು ಇತರ ಸೇವೆಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ.
• ಟೈಪ್ಸ್: ಈ ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ ಜಾಗತಿಕ ಟೈಪ್ ವ್ಯಾಖ್ಯಾನಗಳು ಮತ್ತು ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ.
• ಯುಟಿಲ್ಸ್: ಸಹಾಯಕ ಫಂಕ್ಷನ್‌ಗಳು ಮತ್ತು ಕಾನ್ಸ್ಟಂಟ್‌ಗಳನ್ನು ಸಂಗ್ರಹಿಸಿ.
• index.ts: ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಆಮದು ಮಾಡಲು ಸ್ವಚ್ಛ ಮತ್ತು ಸಂಘಟಿತ API ಒದಗಿಸುವ ಮೂಲಕ, ಡೈರೆಕ್ಟರಿಯಿಂದ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಮರು-ರಫ್ತು ಮಾಡಲು index.ts ಫೈಲ್‌ಗಳನ್ನು ಬಳಸಿ.

ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ಹುಕ್ಸ್ ಬಳಸುವುದು

ರಿಯಾಕ್ಟ್ ಹುಕ್ಸ್ ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಸ್ಟೇಟ್ ಮತ್ತು ಇತರ ರಿಯಾಕ್ಟ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬಳಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಹುಕ್ಸ್‌ಗಳೊಂದಿಗೆ ಮನಬಂದಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಟೈಪ್ ಸುರಕ್ಷತೆ ಮತ್ತು ಸುಧಾರಿತ ಡೆವಲಪರ್ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತದೆ.

useState

ಹಿಂದೆ ತೋರಿಸಿದಂತೆ, useState ಬಳಸುವಾಗ ನೀವು ಸ್ಟೇಟ್ ವೇರಿಯಬಲ್ ಅನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಟೈಪ್ ಮಾಡಬಹುದು:

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
};

useEffect

useEffect ಬಳಸುವಾಗ, ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇ ಬಗ್ಗೆ ಗಮನವಿರಲಿ. ಎಫೆಕ್ಟ್ ಒಳಗೆ ಬಳಸಿದ ಡಿಪೆಂಡೆನ್ಸಿಯನ್ನು ನೀವು ಸೇರಿಸಲು ಮರೆತರೆ ದೋಷಗಳನ್ನು ಹಿಡಿಯಲು ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.

import React, { useState, useEffect } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]); // 'count' ಅನ್ನು ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇಗೆ ಸೇರಿಸಿ

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
};

ನೀವು ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇಯಿಂದ count ಅನ್ನು ಬಿಟ್ಟರೆ, ಕಾಂಪೊನೆಂಟ್ ಮೌಂಟ್ ಆದಾಗ ಎಫೆಕ್ಟ್ ಒಮ್ಮೆ ಮಾತ್ರ ರನ್ ಆಗುತ್ತದೆ, ಮತ್ತು ಎಣಿಕೆ ಬದಲಾದಾಗ ಡಾಕ್ಯುಮೆಂಟ್ ಶೀರ್ಷಿಕೆ ಅಪ್‌ಡೇಟ್ ಆಗುವುದಿಲ್ಲ. ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಈ ಸಂಭಾವ್ಯ ಸಮಸ್ಯೆಯ ಬಗ್ಗೆ ನಿಮಗೆ ಎಚ್ಚರಿಕೆ ನೀಡುತ್ತದೆ.

useContext

useContext ಬಳಸುವಾಗ, ನೀವು ಕಾಂಟೆಕ್ಸ್ಟ್ ಮೌಲ್ಯಕ್ಕಾಗಿ ಒಂದು ಟೈಪ್ ಅನ್ನು ಒದಗಿಸಬೇಕಾಗುತ್ತದೆ.

import React, { createContext, useContext } from 'react';

interface ThemeContextType {
  theme: string;
  toggleTheme: () => void;
}

const ThemeContext = createContext(undefined);

const ThemeProvider: React.FC = ({ children }) => {
  // ಇಲ್ಲಿ ಥೀಮ್ ತರ್ಕವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ
  return (
     {} }}>
      {children}
    
  );
};

const MyComponent: React.FC = () => {
  const { theme, toggleTheme } = useContext(ThemeContext) as ThemeContextType;

  return (
    

      
Theme: {theme}
      Toggle Theme
    
  );
};

export { ThemeProvider, MyComponent };

ಕಾಂಟೆಕ್ಸ್ಟ್ ಮೌಲ್ಯಕ್ಕಾಗಿ ಒಂದು ಟೈಪ್ ಅನ್ನು ಒದಗಿಸುವ ಮೂಲಕ, useContext ಹುಕ್ ಸರಿಯಾದ ಟೈಪ್‌ನೊಂದಿಗೆ ಮೌಲ್ಯವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ ಎಂದು ನೀವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುತ್ತೀರಿ.

ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸುವುದು

ದೃಢವಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವಲ್ಲಿ ಪರೀಕ್ಷೆಯು ಅತ್ಯಗತ್ಯ ಭಾಗವಾಗಿದೆ. ಟೈಪ್ ಸುರಕ್ಷತೆ ಮತ್ತು ಸುಧಾರಿತ ಕೋಡ್ ಕವರೇಜ್ ಒದಗಿಸುವ ಮೂಲಕ ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಪರೀಕ್ಷೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.

ಯುನಿಟ್ ಟೆಸ್ಟಿಂಗ್

ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಯುನಿಟ್ ಟೆಸ್ಟ್ ಮಾಡಲು ಜೆಸ್ಟ್ ಮತ್ತು ರಿಯಾಕ್ಟ್ ಟೆಸ್ಟಿಂಗ್ ಲೈಬ್ರರಿಯಂತಹ ಪರೀಕ್ಷಾ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳನ್ನು ಬಳಸಿ.

// MyComponent.test.tsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders the component with the correct name', () => {
    render();
    expect(screen.getByText('Hello, John!')).toBeInTheDocument();
  });

  it('calls the onClick handler when the button is clicked', () => {
    const onClick = jest.fn();
    render();
    fireEvent.click(screen.getByRole('button'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});

ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್‌ನ ಟೈಪ್ ಪರಿಶೀಲನೆಯು ನಿಮ್ಮ ಪರೀಕ್ಷೆಗಳಲ್ಲಿನ ದೋಷಗಳನ್ನು ಹಿಡಿಯಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಉದಾಹರಣೆಗೆ ತಪ್ಪು ಪ್ರೊಪ್ಸ್ ರವಾನಿಸುವುದು ಅಥವಾ ತಪ್ಪು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಬಳಸುವುದು.

ಇಂಟಿಗ್ರೇಷನ್ ಟೆಸ್ಟಿಂಗ್

ಇಂಟಿಗ್ರೇಷನ್ ಪರೀಕ್ಷೆಗಳು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ವಿವಿಧ ಭಾಗಗಳು ಸರಿಯಾಗಿ ಒಟ್ಟಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತವೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತವೆ. ಎಂಡ್-ಟು-ಎಂಡ್ ಪರೀಕ್ಷೆಗಾಗಿ ಸೈಪ್ರೆಸ್ ಅಥವಾ ಪ್ಲೇರೈಟ್‌ನಂತಹ ಸಾಧನಗಳನ್ನು ಬಳಸಿ.

ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್

ಅಭಿವೃದ್ಧಿ ಪ್ರಕ್ರಿಯೆಯ ಆರಂಭದಲ್ಲಿ ಸಂಭಾವ್ಯ ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಹಿಡಿಯುವ ಮೂಲಕ ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗೆ ಸಹ ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಮೆಮೋೈಸೇಶನ್

ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಮೆಮೋಯಿಸ್ ಮಾಡಲು ಮತ್ತು ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯಲು React.memo ಬಳಸಿ.

import React from 'react';

interface MyComponentProps {
  name: string;
}

const MyComponent: React.FC = ({ name }) => {
  console.log('Rendering MyComponent');
  return (
    
Hello, {name}!
  );
};

export default React.memo(MyComponent);

ಪ್ರೊಪ್ಸ್ ಬದಲಾಗಿದ್ದರೆ ಮಾತ್ರ React.memo ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಮರು-ರೆಂಡರ್ ಮಾಡುತ್ತದೆ. ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಬಹುದು, ವಿಶೇಷವಾಗಿ ಸಂಕೀರ್ಣ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ.

ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್

ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಸಣ್ಣ ಭಾಗಗಳಾಗಿ ವಿಭಜಿಸಲು ಮತ್ತು ಬೇಡಿಕೆಯ ಮೇಲೆ ಅವುಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಡೈನಾಮಿಕ್ ಆಮದುಗಳನ್ನು ಬಳಸಿ. ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡಬಹುದು.

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

const App: React.FC = () => {
  return (
    Loading...