ટાઇપસ્ક્રીપ્ટ સાથે રિએક્ટ: સ્કેલેબલ અને જાળવણીક્ષમ એપ્લિકેશન્સ માટે શ્રેષ્ઠ પદ્ધતિઓ

આધુનિક વેબ એપ્લિકેશન્સ બનાવવા માટે ટાઇપસ્ક્રીપ્ટ અને રિએક્ટ એક શક્તિશાળી સંયોજન છે. ટાઇપસ્ક્રીપ્ટ જાવાસ્ક્રીપ્ટમાં સ્ટેટિક ટાઇપિંગ લાવે છે, જે કોડની ગુણવત્તા અને જાળવણીક્ષમતામાં સુધારો કરે છે, જ્યારે રિએક્ટ યુઝર ઇન્ટરફેસ બનાવવા માટે એક ઘોષણાત્મક અને કમ્પોનન્ટ-આધારિત અભિગમ પૂરો પાડે છે. આ બ્લોગ પોસ્ટ વૈશ્વિક પ્રેક્ષકો માટે યોગ્ય, મજબૂત, સ્કેલેબલ અને જાળવણીક્ષમ એપ્લિકેશન્સ બનાવવા માટે રિએક્ટ સાથે ટાઇપસ્ક્રીપ્ટનો ઉપયોગ કરવા માટેની શ્રેષ્ઠ પદ્ધતિઓ શોધે છે.

રિએક્ટ સાથે ટાઇપસ્ક્રીપ્ટ શા માટે વાપરવું?

શ્રેષ્ઠ પદ્ધતિઓ પર ધ્યાન આપતા પહેલા, ચાલો સમજીએ કે રિએક્ટ ડેવલપમેન્ટમાં ટાઇપસ્ક્રીપ્ટ શા માટે એક મૂલ્યવાન ઉમેરો છે:

• સુધારેલી કોડ ગુણવત્તા: ટાઇપસ્ક્રીપ્ટનું સ્ટેટિક ટાઇપિંગ વિકાસ પ્રક્રિયાની શરૂઆતમાં જ ભૂલો પકડવામાં મદદ કરે છે, જેનાથી રનટાઇમ સમસ્યાઓ ઓછી થાય છે અને કોડની વિશ્વસનીયતા વધે છે.
• વધારેલી જાળવણીક્ષમતા: ટાઇપ એનોટેશન્સ અને ઇન્ટરફેસ કોડને સમજવા અને રિફેક્ટર કરવાનું સરળ બનાવે છે, જે લાંબા ગાળે વધુ સારી જાળવણીક્ષમતા તરફ દોરી જાય છે.
• વધુ સારું IDE સપોર્ટ: ટાઇપસ્ક્રીપ્ટ ઉત્તમ IDE સપોર્ટ પૂરો પાડે છે, જેમાં ઓટોકમ્પ્લીશન, કોડ નેવિગેશન અને રિફેક્ટરિંગ ટૂલ્સનો સમાવેશ થાય છે, જે ડેવલપરની ઉત્પાદકતામાં વધારો કરે છે.
• ઘટાડેલા બગ્સ: સ્ટેટિક ટાઇપિંગ ઘણી સામાન્ય જાવાસ્ક્રીપ્ટ ભૂલોને રનટાઇમ પહેલાં પકડી લે છે, જે વધુ સ્થિર અને બગ-ફ્રી એપ્લિકેશન તરફ દોરી જાય છે.
• સુધારેલું સહયોગ: સ્પષ્ટ ટાઇપ ડેફિનેશન્સ ટીમો માટે મોટા પ્રોજેક્ટ્સ પર સહયોગ કરવાનું સરળ બનાવે છે, કારણ કે ડેવલપર્સ વિવિધ કમ્પોનન્ટ્સ અને ફંક્શન્સના હેતુ અને ઉપયોગને ઝડપથી સમજી શકે છે.

ટાઇપસ્ક્રીપ્ટ રિએક્ટ પ્રોજેક્ટ સેટ કરવો

ક્રિએટ રિએક્ટ એપનો ઉપયોગ

નવો ટાઇપસ્ક્રીપ્ટ રિએક્ટ પ્રોજેક્ટ શરૂ કરવાનો સૌથી સહેલો રસ્તો ક્રિએટ રિએક્ટ એપનો ઉપયોગ ટાઇપસ્ક્રીપ્ટ ટેમ્પલેટ સાથે કરવો છે:

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; // વૈકલ્પિક પ્રોપ
  onClick: () => void;
}

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

      
નમસ્કાર, {name}!
      {age && 
તમારી ઉંમર {age} વર્ષ છે.
}
      મને ક્લિક કરો
    
  );
};

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 (
      

        
ગણતરી: {this.state.count}
        વધારો
      
    );
  }
}

useState હુકનો ઉપયોગ કરતા ફંક્શનલ કમ્પોનન્ટ્સ માટે, ટાઇપસ્ક્રીપ્ટ ઘણીવાર સ્ટેટ વેરિયેબલના ટાઇપનો અંદાજ લગાવી શકે છે, પરંતુ તમે તેને સ્પષ્ટપણે પણ પ્રદાન કરી શકો છો:

import React, { useState } from 'react';

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

  return (
    

      
ગણતરી: {count}
       setCount(count + 1)}>વધારો
    
  );
};

ટાઇપ ગાર્ડ્સનો ઉપયોગ

ટાઇપ ગાર્ડ્સ એવા ફંક્શન્સ છે જે ચોક્કસ સ્કોપમાં વેરિયેબલના ટાઇપને સંકુચિત કરે છે. જ્યારે યુનિયન ટાઇપ્સ સાથે કામ કરતા હોવ અથવા જ્યારે તમારે ખાતરી કરવાની જરૂર હોય કે ઓપરેશન કરતા પહેલા વેરિયેબલનો ચોક્કસ ટાઇપ હોય ત્યારે તે ઉપયોગી છે.

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

મુખ્ય મુદ્દાઓ:

• Components: સંબંધિત કમ્પોનન્ટ્સને ડિરેક્ટરીઓમાં જૂથબદ્ધ કરો. દરેક ડિરેક્ટરીમાં કમ્પોનન્ટની ટાઇપસ્ક્રીપ્ટ ફાઇલ, CSS મોડ્યુલ્સ (જો વપરાયેલ હોય), અને કમ્પોનન્ટને એક્સપોર્ટ કરવા માટે index.ts ફાઇલ હોવી જોઈએ.
• Pages: તમારી એપ્લિકેશનના વિવિધ પૃષ્ઠોનું પ્રતિનિધિત્વ કરતા ટોપ-લેવલ કમ્પોનન્ટ્સ સ્ટોર કરો.
• Services: આ ડિરેક્ટરીમાં API કોલ્સ અને અન્ય સેવાઓ અમલમાં મૂકો.
• Types: આ ડિરેક્ટરીમાં વૈશ્વિક ટાઇપ ડેફિનેશન્સ અને ઇન્ટરફેસ વ્યાખ્યાયિત કરો.
• Utils: હેલ્પર ફંક્શન્સ અને કોન્સ્ટન્ટ્સ સ્ટોર કરો.
• index.ts: ડિરેક્ટરીમાંથી મોડ્યુલ્સને ફરીથી એક્સપોર્ટ કરવા માટે index.ts ફાઇલોનો ઉપયોગ કરો, જે મોડ્યુલ્સ ઇમ્પોર્ટ કરવા માટે સ્વચ્છ અને સંગઠિત API પ્રદાન કરે છે.

ટાઇપસ્ક્રીપ્ટ સાથે હુક્સનો ઉપયોગ

રિએક્ટ હુક્સ તમને ફંક્શનલ કમ્પોનન્ટ્સમાં સ્ટેટ અને અન્ય રિએક્ટ ફીચર્સનો ઉપયોગ કરવાની મંજૂરી આપે છે. ટાઇપસ્ક્રીપ્ટ હુક્સ સાથે સરળતાથી કામ કરે છે, જે ટાઇપ સેફ્ટી અને સુધારેલ ડેવલપર અનુભવ પ્રદાન કરે છે.

useState

પહેલાં બતાવ્યા પ્રમાણે, તમે useState નો ઉપયોગ કરતી વખતે સ્ટેટ વેરિયેબલને સ્પષ્ટપણે ટાઇપ કરી શકો છો:

import React, { useState } from 'react';

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

  return (
    

      
ગણતરી: {count}
       setCount(count + 1)}>વધારો
    
  );
};

useEffect

useEffect નો ઉપયોગ કરતી વખતે, ડિપેન્ડન્સી એરેનું ધ્યાન રાખો. જો તમે ઇફેક્ટમાં ઉપયોગમાં લેવાતી ડિપેન્ડન્સીનો સમાવેશ કરવાનું ભૂલી જાઓ તો ટાઇપસ્ક્રીપ્ટ તમને ભૂલો પકડવામાં મદદ કરી શકે છે.

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

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

  useEffect(() => {
    document.title = `ગણતરી: ${count}`;
  }, [count]); // ડિપેન્ડન્સી એરેમાં 'count' ઉમેરો

  return (
    

      
ગણતરી: {count}
       setCount(count + 1)}>વધારો
    
  );
};

જો તમે ડિપેન્ડન્સી એરેમાંથી 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}
      થીમ બદલો
    
  );
};

export { ThemeProvider, MyComponent };

કન્ટેક્સ્ટ વેલ્યુ માટે ટાઇપ પ્રદાન કરીને, તમે સુનિશ્ચિત કરો છો કે useContext હુક સાચા ટાઇપ સાથે વેલ્યુ પરત કરે છે.

ટાઇપસ્ક્રીપ્ટ રિએક્ટ કમ્પોનન્ટ્સનું પરીક્ષણ

મજબૂત એપ્લિકેશન્સ બનાવવા માટે પરીક્ષણ એક આવશ્યક ભાગ છે. ટાઇપસ્ક્રીપ્ટ ટાઇપ સેફ્ટી અને સુધારેલ કોડ કવરેજ પ્રદાન કરીને પરીક્ષણને વધારે છે.

યુનિટ ટેસ્ટિંગ

તમારા કમ્પોનન્ટ્સનું યુનિટ ટેસ્ટ કરવા માટે Jest અને React Testing Library જેવા પરીક્ષણ ફ્રેમવર્કનો ઉપયોગ કરો.

// 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);
  });
});

ટાઇપસ્ક્રીપ્ટનું ટાઇપ ચેકિંગ તમારા પરીક્ષણોમાં ભૂલો પકડવામાં મદદ કરે છે, જેમ કે ખોટા પ્રોપ્સ પસાર કરવા અથવા ખોટા ઇવેન્ટ હેન્ડલર્સનો ઉપયોગ કરવો.

ઇન્ટિગ્રેશન ટેસ્ટિંગ

ઇન્ટિગ્રેશન પરીક્ષણો ચકાસે છે કે તમારી એપ્લિકેશનના વિવિધ ભાગો એકસાથે યોગ્ય રીતે કામ કરે છે. એન્ડ-ટુ-એન્ડ પરીક્ષણ માટે Cypress અથવા Playwright જેવા ટૂલ્સનો ઉપયોગ કરો.

પર્ફોર્મન્સ ઓપ્ટિમાઇઝેશન

ટાઇપસ્ક્રીપ્ટ વિકાસ પ્રક્રિયાની શરૂઆતમાં જ સંભવિત પર્ફોર્મન્સ અવરોધોને પકડીને પર્ફોર્મન્સ ઓપ્ટિમાઇઝેશનમાં પણ મદદ કરી શકે છે.

મેમોઇઝેશન (Memoization)

ફંક્શનલ કમ્પોનન્ટ્સને મેમોઇઝ કરવા અને બિનજરૂરી રી-રેન્ડર્સને રોકવા માટે React.memo નો ઉપયોગ કરો.

import React from 'react';

interface MyComponentProps {
  name: string;
}

const MyComponent: React.FC = ({ name }) => {
  console.log('Rendering MyComponent');
  return (
    
નમસ્કાર, {name}!
  );
};

export default React.memo(MyComponent);

React.memo ફક્ત ત્યારે જ કમ્પોનન્ટને ફરીથી રેન્ડર કરશે જો પ્રોપ્સ બદલાયા હોય. આ પર્ફોર્મન્સમાં નોંધપાત્ર સુધારો કરી શકે છે, ખાસ કરીને જટિલ કમ્પોનન્ટ્સ માટે.

કોડ સ્પ્લિટિંગ (Code Splitting)

તમારા કોડને નાના ટુકડાઓમાં વિભાજીત કરવા અને તેમને માંગ પર લોડ કરવા માટે ડાયનેમિક ઇમ્પોર્ટ્સનો ઉપયોગ કરો. આ તમારી એપ્લિકેશનનો પ્રારંભિક લોડ સમય ઘટાડી શકે છે.

import React, { Suspense } from 'react';

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

const App: React.FC = () => {
  return (
    લોડ થઈ રહ્યું છે...