TypeScript vositalari (tooling)

TypeScript ishlab chiqish ekotizimi

TypeScript-ning asboblar ekotizimi uning eng kuchli tomonlaridan biri bo‘lib, ishlab chiquvchilarga rivojlanishning har bir bosqichi uchun kuchli vositalarni taqdim etadi:

Kod sifati

TypeScript-ni qo‘llab-quvvatlaydigan ESLint
Turni tekshirish va linting
Kod uslubini qo‘llash

Rivojlanish

VS Code integratsiyasi
Nosozliklarni tuzatish vositalari
Hot Module Replacement (HMR)

Qurish va joylashtirish

Bundlers (Vite, Webpack, Parcel)
Modullarni birlashtirish
Ishlab chiqarishni optimallashtirish

ESLint bilan bo‘yash

Set

ESLint TypeScript sintaksisi va qoidalarini tushunishi uchun ESLint va rasmiy TypeScript plaginini/parserini o‘rnating.

Misol

# Install ESLint with TypeScript support
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Konfiguratsiya

Ushbu konfiguratsiya TypeScript uchun tavsiya etilgan ESLint qoidalarini yoqadi, ESLint-ni tsconfig-ga turini bilish uchun liniyalash uchun ulaydi va bir nechta umumiy qoidalarni o‘zgartiradi.

Misol

// .eslintrc.json
{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ],
  "parserOptions": {
    "project": "./tsconfig.json",
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "rules": {
    "@typescript-eslint/explicit-function-return-type": "warn",
    "@typescript-eslint/no-explicit-any": "warn",
    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
  }
}

NPM skriptlari

Linting va faqat turdagi tekshiruvni ishga tushirish uchun skriptlarni qo‘shing.

Oddiy muammolarni avtomatik tuzatish uchun lint:fix dan foydalaning.

Misol

// package.json
{
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx",
    "lint:fix": "eslint . --ext .ts,.tsx --fix",
    "type-check": "tsc --noEmit"
  }
}

Prettier bilan kodni formatlash

Prettier sizning jamoangiz bo‘ylab izchil kod uslubini qo‘llaydi.

Formatlash bilan bog‘liq lint xatolarining oldini olish uchun uni ESLint bilan birlashtiring.

Set

ESLint orqali qarama-qarshi qoidalar va sirt formatlash muammolarini o‘chiradigan Prettier plus ESLint plaginlarini o‘rnating.

Misol

# Install Prettier and related packages
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

Konfiguratsiya

.prettierrc da Prettier afzalliklarini belgilang va .prettierignore da yaratilgan jildlarga e’tibor bermang.

Misol

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 100,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

// .prettierignore
node_modules
build
dist
.next
.vscode

ESLint bilan integratsiya

plugin:prettier/recommended kengaytiring, shunda formatlash muammolari ESLint muammolari sifatida xabar qilinadi.

Misol

// .eslintrc.json
{
  "extends": [
    // ... other configs
    "plugin:prettier/recommended" // Must be last in the array
  ]
}

Misol: Prettierni ESLint bilan birlashtiring

npm install --save-dev eslint-config-prettier eslint-plugin-prettier
# In your .eslintrc.js or .eslintrc.json, add:
{
"extends": ["plugin:prettier/recommended"]
}

Zamonaviy qurilish asboblari

Vite tez ishlab chiqaruvchi server va zamonaviy tuzilmalar uchun tavsiya etilgan tanlovdir.

Veb-paket keng tarqalgan va yuqori darajada sozlanishi mumkin.

Vite (tavsiya etiladi)

Vite yordamida yangi React + TypeScript loyihasini yarating.

Tez fikr-mulohaza uchun HMR bilan ishlab chiqaruvchi serverni ishga tushiradi.

Misol

# Create a new project with React + TypeScript
npm create vite@latest my-app -- --template react-ts

# Navigate to project directory
cd my-app

# Install dependencies
npm install

# Start development server
npm run dev

Webpack konfiguratsiyasi

Agar siz Webpack-ni tanlasangiz, bu minimal sozlash TypeScript-ni o‘tkazadi, CSS-ni boshqaradi va ilovangizga webpack-dev-server bilan xizmat qiladi.

Misol

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  devServer: {
    static: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
    hot: true,
  },
};

TypeScript konfiguratsiyasi

Zamonaviy brauzerlarga mo‘ljallangan qat’iy tsconfig.json.

Ixtiyoriy baseUrl va paths @/components/Button kabi mutlaq importlarga yordam beradi.

Misol

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

Rivojlanish muhitini sozlash

Tahrirlovchingizni lint xatolarini aniqlash, saqlash vaqtida formatlash va samarali debug qilish uchun sozlang.

VS kod kengaytmalari

VS kodi uchun tavsiya etilgan kengaytmalar:

TypeScript + Webpack Problem Matchers - Xatolar haqida yaxshiroq hisobot berish uchun
ESLint - ESLintni VS kodiga birlashtiradi
Prettier - Code formatter - Kodni izchil formatlash uchun
Path IntelliSense - Fayl nomlarini avtomatik to‘ldirish
Error Lens - Inline xatolarni ko‘rsatish

VS kod sozlamalari

Prettier-dan standart formatlovchi sifatida foydalaning, saqlashda ESLint muammolarini tuzating va nisbiy bo‘lmagan import yo‘llarini afzal ko‘ring.

Misol

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.preferences.importModuleSpecifier": "non-relative"
}

Nosozliklarni tuzatish konfiguratsiyasi

Chrome-ni ishlab chiqaruvchi serveringizga qarshi ishga tushiring va Node.js-ga asoslangan test tuzatishni to‘g‘ridan-to‘g‘ri VS kodidan ishga tushiring.

Misol

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./*": "${workspaceFolder}/src/*"
      }
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Tests",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/jest",
      "args": ["--runInBand", "--watchAll=false"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "sourceMaps": true
    }
  ]
}

Sinovni sozlash

Jest with Testing Library - bu React + TypeScript ilovalarini sinab ko‘rish uchun mashhur sozlama.

Jest + Test kutubxonasi

DOM tasdiqlari va foydalanuvchi o‘zaro ta’siri uchun Jest, TypeScript qo‘llab-quvvatlash va React Testing Library yordam dasturlarini o‘rnating.

Misol

# Install testing dependencies
npm install --save-dev jest @types/jest ts-jest @testing-library/react @testing-library/jest-dom @testing-library/user-event

Jest konfiguratsiyasi

ts-jest dan foydalanish, CSS modullarini xaritalash va @/ kabi taxallus yo‘llarini hal qilish uchun Jestni sozlang.

Misol

// jest.config.js
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['@testing-library/jest-dom'],
  moduleNameMapper: {
    '^@/(.*)$': '/src/$1',
    '\\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
  transform: {
    '^.+\\\.tsx?$': 'ts-jest',
  },
  testMatch: ['**/__tests__/**/*.test.(ts|tsx)'],
};

Sinov namunasi

Sinov kutubxonasi yordamida renderlash va bosish harakatlarini tekshiradigan oddiy komponent testi.

Misol

// src/__tests__/Button.test.tsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import Button from '../components/Button';

describe('Button', () => {
  it('renders button with correct text', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
  });

  it('calls onClick when clicked', () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Click me</Button>);

    fireEvent.click(screen.getByRole('button'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

Eng yaxshi amaliyotlar

Rivojlanish ish jarayoni

Issiq qayta yuklash bilan ishlab chiqish uchun npm run dev dan foydalaning
TypeScript turlarini tekshirish uchun npm run type-check ni ishga tushiring
Linting xatolarini tekshirish uchun npm run lint dan foydalaning
Ishlab chiqarishni yaratish uchun npm run build ishga tushiring

Ishlashni optimallashtirish

Dinamik import bilan kodni ajratishdan foydalaning
Ishlab chiqarish inshootlarida daraxt silkitishni yoqing
Qimmatbaho hisob-kitoblar uchun React.memo va useMemo dan foydalaning
Muhim bo‘lmagan komponentlarni kechiktirib yuklang (lazy loading)

Umumiy tuzoqlar

TypeScript configuration: strict rejimi yoqilganligiga ishonch hosil qiling
ESLint + Prettier conflicts: Qarama-qarshi qoidalarni o‘chirish uchun eslint-config-prettier dan foydalaning
Slow builds: Tezroq rivojlanish uchun Vite yoki esbuild-dan foydalanishni o‘ylab ko‘ring
Missing type definitions: Barcha bog‘liqliklar uchun @types paketlarni o‘rnating
Debugging issues: Manba Map’lari to‘g‘ri sozlanganligiga ishonch hosil qiling

Tavsiya etilgan asboblar

Bundlers: Vite, Webpack, Parcel
Testing: Jest, React Testing Library, Cypress
Linting/Formatting: ESLint, Chiroyli, Stylelint
Documentation: TypeDoc, Hikoyalar kitobi
Performance: Web Vitals, Lighthouse

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish