Як написати чистий і підтримуваний код за допомогою TypeScript

Написання чистого коду, який зручно підтримувати, є важливим для довгострокового успіху проекту та продуктивності команди. TypeScript зі статичним набором тексту та потужними функціями надає інструменти та методи для підвищення якості коду. У цій статті розглядаються стратегії написання чистого коду TypeScript, який зручно підтримувати.

1. Використовуйте анотації описового типу

Анотації типів допомагають уточнити передбачуване використання змінних, функцій і об’єктів, полегшуючи розуміння та підтримку коду.

function greet(name: string): string {
  return `Hello, ${name}`;
}

const user: { name: string; age: number } = {
  name: 'Alice',
  age: 30,
};

2. Надавайте перевагу інтерфейсам над псевдонімами типів для форм об’єктів

Інтерфейси більш універсальні та розширювані порівняно з псевдонімами типів, особливо для визначення форм об’єктів.

interface User {
  name: string;
  email: string;
}

const user: User = {
  name: 'Bob',
  email: '[email protected]',
};

3. Висновок про тип кредитного плеча

TypeScript може виводити типи на основі контексту, зменшуючи потребу в явних анотаціях типів і роблячи код менш докладним.

const numbers = [1, 2, 3]; // TypeScript infers numbers as number[]
const sum = numbers.reduce((a, b) => a + b, 0); // TypeScript infers sum as number

4. Напишіть невеликі цілеспрямовані функції

Зберігайте функції невеликими та зосередженими на одному завданні, щоб покращити читабельність і легкість обслуговування.

function calculateTax(amount: number, rate: number): number {
  return amount * rate;
}

function formatCurrency(amount: number): string {
  return `$${amount.toFixed(2)}`;
}

5. Використовуйте кожухи для кращої безпеки

Захисники типів допомагають забезпечити виконання операцій над правильними типами, зменшуючи помилки під час виконання.

function isString(value: any): value is string {
  return typeof value === 'string';
}

function printLength(value: string | number) {
  if (isString(value)) {
    console.log(value.length);
  } else {
    console.log('Not a string');
  }
}

6. Організуйте код у модулі

Організуйте пов’язаний код у модулі, щоб зберегти кодову базу керованою та підвищити ясність.

// user.ts
export interface User {
  name: string;
  email: string;
}

// utils.ts
export function greet(user: User): string {
  return `Hello, ${user.name}`;
}

7. Запровадити обробку помилок

Витончено обробляйте помилки та надсилайте змістовні повідомлення, щоб допомогти у виправленні помилок і покращити взаємодію з користувачем.

function fetchData(url: string): Promise {
  return fetch(url).catch((error) => {
    console.error('Failed to fetch data:', error);
    throw error;
  });
}

8. Напишіть тести для критичних компонентів

Тестування гарантує, що код працює належним чином, і допомагає виявити проблеми на ранній стадії. Використовуйте такі фреймворки тестування, як Jest, для написання модульних тестів.

import { greet } from './utils';

test('greet function', () => {
  const user = { name: 'Charlie', email: '[email protected]' };
  expect(greet(user)).toBe('Hello, Charlie');
});

Висновок

Дотримуючись цих практик, ви можете написати чистий і підтримуваний код TypeScript, який легше зрозуміти, розширити та керувати ним. Використання функцій TypeScript ефективно веде до вищої якості коду та більш зручної бази коду.