TypeScript Best Practices για Αρχάριους

Το TypeScript έχει γίνει ένα από τα πιο δημοφιλή εργαλεία για την ανάπτυξη JavaScript εφαρμογών. Σε αυτόν τον οδηγό, θα μάθετε τις βασικές αρχές και best practices που θα σας βοηθήσουν να γράφετε καλύτερο κώδικα.

Τι είναι το TypeScript;

Το TypeScript είναι ένα superset της JavaScript που προσθέτει στατικό type checking. Αυτό σημαίνει ότι μπορείτε να πιάσετε λάθη στον κώδικά σας πριν ακόμα τρέξει.

Βασικές Αρχές

1. Χρησιμοποιήστε Explicit Types

// ❌ Κακό
let name = "John";
let age = 25;

// ✅ Καλό
let name: string = "John";
let age: number = 25;

2. Δημιουργήστε Interfaces

interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

function createUser(userData: User): User {
  return userData;
}

3. Χρησιμοποιήστε Union Types

type Status = 'loading' | 'success' | 'error';
type ID = string | number;

function handleStatus(status: Status) {
  switch (status) {
    case 'loading':
      console.log('Φόρτωση...');
      break;
    case 'success':
      console.log('Επιτυχία!');
      break;
    case 'error':
      console.log('Σφάλμα!');
      break;
  }
}

Advanced Techniques

Generics

function createArray<T>(length: number, value: T): T[] {
  return Array(length).fill(value);
}

const stringArray = createArray(3, "hello"); // string[]
const numberArray = createArray(3, 42); // number[]

Utility Types

interface User {
  id: number;
  name: string;
  email: string;
  password: string;
}

// Δημιουργήστε ένα type χωρίς το password
type PublicUser = Omit<User, 'password'>;

// Κάντε όλα τα fields optional
type PartialUser = Partial<User>;

// Κάντε συγκεκριμένα fields required
type RequiredUser = Required<Pick<User, 'name' | 'email'>>;

Best Practices

1. Strict Mode

Πάντα χρησιμοποιήστε strict mode στο tsconfig.json:

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true
  }
}

2. Avoid any

// ❌ Κακό
function processData(data: any) {
  return data.someProperty;
}

// ✅ Καλό
interface DataStructure {
  someProperty: string;
}

function processData(data: DataStructure) {
  return data.someProperty;
}

3. Use Type Guards

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

function processValue(value: unknown) {
  if (isString(value)) {
    // Εδώ το TypeScript ξέρει ότι το value είναι string
    console.log(value.toUpperCase());
  }
}

Εργαλεία και Setup

Essential Extensions για VS Code

• TypeScript Importer
• Error Lens
• TypeScript Hero
• Auto Import - ES6, TS, JSX, TSX

Χρήσιμες Βιβλιοθήκες

npm install --save-dev @types/node
npm install --save-dev typescript
npm install --save-dev ts-node

Συμπερασμάτα

Το TypeScript είναι ένα πολύ ισχυρό εργαλείο που μπορεί να βελτιώσει σημαντικά την ποιότητα του κώδικά σας. Ακολουθώντας αυτές τις βασικές αρχές, θα μπορέσετε να γράφετε πιο ασφαλή και maintainable εφαρμογές.

Θυμηθείτε: Το TypeScript είναι ένα εργαλείο που σας βοηθάει, όχι εμπόδιο. Αρχίστε σταδιακά και προσθέστε types εκεί που χρειάζονται περισσότερο.

Χρειάζεστε βοήθεια με το TypeScript setup στο project σας; Επικοινωνήστε μαζί μας για προσωποποιημένη υποστήριξη!