ரியாக்டுடன் டைப்ஸ்கிரிப்ட்: அளவிடக்கூடிய மற்றும் பராமரிக்கக்கூடிய பயன்பாடுகளுக்கான சிறந்த நடைமுறைகள்

நவீன வலைப் பயன்பாடுகளை உருவாக்குவதற்கு டைப்ஸ்கிரிப்ட் மற்றும் ரியாக்ட் ஒரு சக்திவாய்ந்த கலவையாகும். டைப்ஸ்கிரிப்ட் ஜாவாஸ்கிரிப்டிற்கு ஸ்டேடிக் டைப்பிங்கை கொண்டுவருகிறது, இது குறியீட்டின் தரம் மற்றும் பராமரிப்பை மேம்படுத்துகிறது, அதே நேரத்தில் ரியாக்ட் பயனர் இடைமுகங்களை உருவாக்குவதற்கு ஒரு அறிவிப்பு மற்றும் கூறு அடிப்படையிலான அணுகுமுறையை வழங்குகிறது. இந்த வலைப்பதிவு உலகளாவிய பார்வையாளர்களுக்கு ஏற்ற வலுவான, அளவிடக்கூடிய மற்றும் பராமரிக்கக்கூடிய பயன்பாடுகளை உருவாக்க ரியாக்டுடன் டைப்ஸ்கிரிப்ட்டைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகளை ஆராய்கிறது.

ரியாக்டுடன் டைப்ஸ்கிரிப்டை ஏன் பயன்படுத்த வேண்டும்?

சிறந்த நடைமுறைகளுக்குள் செல்வதற்கு முன், ரியாக்ட் மேம்பாட்டிற்கு டைப்ஸ்கிரிப்ட் ஏன் ஒரு மதிப்புமிக்க கூடுதலாக இருக்கிறது என்பதைப் புரிந்துகொள்வோம்:

• மேம்படுத்தப்பட்ட குறியீட்டின் தரம்: டைப்ஸ்கிரிப்டின் ஸ்டேடிக் டைப்பிங் மேம்பாட்டு செயல்முறையின் ஆரம்பத்திலேயே பிழைகளைக் கண்டறிய உதவுகிறது, இது ரன்டைம் சிக்கல்களைக் குறைத்து குறியீட்டின் நம்பகத்தன்மையை மேம்படுத்துகிறது.
• மேம்படுத்தப்பட்ட பராமரிப்புத்திறன்: டைப் சிறுகுறிப்புகள் மற்றும் இடைமுகங்கள் குறியீட்டைப் புரிந்துகொள்வதையும் மறுசீரமைப்பதையும் எளிதாக்குகின்றன, இது சிறந்த நீண்ட கால பராமரிப்புக்கு வழிவகுக்கிறது.
• சிறந்த 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 மாற்றத்தை செயல்படுத்துகிறது, இது ரியாக்ட் குறியீட்டை எளிதாக்குகிறது மற்றும் செயல்திறனை மேம்படுத்துகிறது.

டைப்ஸ்கிரிப்ட்டுடன் ரியாக்ட் கூறுகளுக்கான சிறந்த நடைமுறைகள்

கூறு Props-களுக்கு டைப்பிங் செய்தல்

ரியாக்டுடன் டைப்ஸ்கிரிப்டைப் பயன்படுத்துவதில் மிக முக்கியமான அம்சங்களில் ஒன்று உங்கள் கூறு Props-களை சரியாக டைப்பிங் செய்வதாகும். Props ஆப்ஜெக்ட்டின் வடிவத்தை வரையறுக்க இடைமுகங்கள் அல்லது டைப் மாற்றுப்பெயர்களைப் பயன்படுத்தவும்.

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

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

      
வணக்கம், {name}!
      {age && 
உங்களுக்கு {age} வயது.
}
      என்னை கிளிக் செய்யவும்
    
  );
};

React.FC<MyComponentProps>-ஐப் பயன்படுத்துவது கூறு ஒரு செயல்பாட்டுக் கூறு என்பதையும், Props-கள் சரியாக டைப் செய்யப்பட்டுள்ளன என்பதையும் உறுதி செய்கிறது.

கூறு ஸ்டேட்டிற்கு டைப்பிங் செய்தல்

நீங்கள் கிளாஸ் கூறுகளைப் பயன்படுத்துகிறீர்கள் என்றால், கூறின் ஸ்டேட்டையும் டைப் செய்ய வேண்டும். ஸ்டேட் ஆப்ஜெக்ட்டிற்கு ஒரு இடைமுகம் அல்லது டைப் மாற்றுப்பெயரை வரையறுத்து, அதை கூறு வரையறையில் பயன்படுத்தவும்.

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

முக்கிய குறிப்புகள்:

• கூறுகள்: தொடர்புடைய கூறுகளை கோப்பகங்களில் குழுவாக்கவும். ஒவ்வொரு கோப்பகத்திலும் கூறின் டைப்ஸ்கிரிப்ட் கோப்பு, CSS தொகுதிகள் (பயன்படுத்தப்பட்டால்), மற்றும் கூறை ஏற்றுமதி செய்ய ஒரு index.ts கோப்பு இருக்க வேண்டும்.
• பக்கங்கள்: உங்கள் பயன்பாட்டின் வெவ்வேறு பக்கங்களைக் குறிக்கும் உயர்-நிலை கூறுகளை சேமிக்கவும்.
• சேவைகள்: API அழைப்புகள் மற்றும் பிற சேவைகளை இந்த கோப்பகத்தில் செயல்படுத்தவும்.
• வகைகள்: உலகளாவிய டைப் வரையறைகள் மற்றும் இடைமுகங்களை இந்த கோப்பகத்தில் வரையறுக்கவும்.
• பயன்பாடுகள்: உதவி செயல்பாடுகள் மற்றும் மாறிலிகளை சேமிக்கவும்.
• 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('சரியான பெயருடன் கூறை வழங்குகிறது', () => {
    render();
    expect(screen.getByText('வணக்கம், John!')).toBeInTheDocument();
  });

  it('பொத்தானை கிளிக் செய்யும் போது onClick ஹேண்ட்லரை அழைக்கிறது', () => {
    const onClick = jest.fn();
    render();
    fireEvent.click(screen.getByRole('button'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});

டைப்ஸ்கிரிப்டின் டைப் சரிபார்ப்பு உங்கள் சோதனைகளில் பிழைகளைக் கண்டறிய உதவுகிறது, அதாவது தவறான props-களை அனுப்புவது அல்லது தவறான நிகழ்வு கையாளுபவர்களைப் பயன்படுத்துவது போன்றவை.

ஒருங்கிணைப்பு சோதனை

ஒருங்கிணைப்பு சோதனைகள் உங்கள் பயன்பாட்டின் வெவ்வேறு பகுதிகள் சரியாக ஒன்றாக வேலை செய்கின்றன என்பதை சரிபார்க்கின்றன. எண்ட்-டு-எண்ட் சோதனைக்கு Cypress அல்லது Playwright போன்ற கருவிகளைப் பயன்படுத்தவும்.

செயல்திறன் மேம்படுத்தல்

டைப்ஸ்கிரிப்ட் மேம்பாட்டு செயல்முறையின் ஆரம்பத்திலேயே சாத்தியமான செயல்திறன் தடைகளைக் கண்டறிவதன் மூலம் செயல்திறன் மேம்படுத்தலுக்கும் உதவும்.

மெமோசேஷன்

செயல்பாட்டுக் கூறுகளை மெமோஸ் செய்யவும் மற்றும் தேவையற்ற மறு-ரெண்டர்களைத் தடுக்கவும் 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);

Props-கள் மாறியிருந்தால் மட்டுமே React.memo கூறை மீண்டும் ரெண்டர் செய்யும். இது குறிப்பாக சிக்கலான கூறுகளுக்கு செயல்திறனை கணிசமாக மேம்படுத்தும்.

குறியீடு பிரித்தல்

உங்கள் குறியீட்டை சிறிய துண்டுகளாகப் பிரிக்கவும் மற்றும் தேவைக்கேற்ப ஏற்றவும் டைனமிக் இறக்குமதிகளைப் பயன்படுத்தவும். இது உங்கள் பயன்பாட்டின் ஆரம்ப ஏற்றுதல் நேரத்தைக் குறைக்கும்.

import React, { Suspense } from 'react';

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

const App: React.FC = () => {
  return (
    ஏற்றுகிறது...