Wprowadzenie do interfejsów TypeScript dla początkujących

Interfejsy TypeScript to potężna funkcja, która pozwala zdefiniować strukturę obiektów, zapewniając, że spełniają one określone wymagania dotyczące kształtu. Ten przewodnik zapozna Cię z podstawami interfejsów TypeScript, w tym z tym, jak je skutecznie definiować i używać.

Czym jest interfejs?

Interfejs w TypeScript to sposób na opisanie kształtu obiektu. Pozwala zdefiniować, jakie właściwości i metody powinien mieć obiekt, a także ich typy. Interfejsy pomagają wymusić spójność i przejrzystość kodu.

Definiowanie interfejsu

Aby zdefiniować interfejs, należy użyć słowa kluczowego interface, po którym następuje nazwa interfejsu i kształt obiektu:

interface Person {
  name: string;
  age: number;
}

W tym przykładzie interfejs Person określa, że ​​obiekt Person powinien mieć name typu string i age typu number.

Korzystanie z interfejsów

Po zdefiniowaniu interfejsu możesz go użyć do sprawdzania typów obiektów, parametrów funkcji i wartości zwracanych. Zapewnia to zgodność obiektów ze zdefiniowanym kształtem.

Korzystanie z interfejsu z obiektami

Oto jak użyć interfejsu Person do sprawdzenia typu obiektu:

const person: Person = {
  name: "Alice",
  age: 30
};

W tym przykładzie obiekt person jest zgodny z interfejsem Person, co zapewnia, że ​​ma zarówno name, jak i age o prawidłowych typach.

Korzystanie z interfejsów z funkcjami

Interfejsy można również wykorzystać do sprawdzania typów parametrów funkcji i zwracania wartości:

function greet(person: Person): string {
  return `Hello, ${person.name}!`;
}

W tym przykładzie funkcja greet akceptuje parametr typu Person i zwraca komunikat powitalny.

Właściwości opcjonalne

Interfejsy mogą zawierać opcjonalne właściwości za pomocą modyfikatora ?. Oznacza to, że właściwość może być obecna lub nie:

interface Person {
  name: string;
  age: number;
  email?: string;
}

W tym przykładzie email to opcjonalna właściwość, która może, ale nie musi być zawarta w obiekcie Person.

Właściwości tylko do odczytu

Można również zdefiniować właściwości jako tylko do odczytu, co oznacza, że ​​nie można ich modyfikować po inicjalizacji:

interface Person {
  readonly name: string;
  age: number;
}

W tym przykładzie właściwość name jest tylko do odczytu i po ustawieniu nie można jej zmienić.

Rozszerzanie interfejsów

Interfejsy mogą rozszerzać inne interfejsy, umożliwiając rozbudowę istniejących kształtów:

interface Employee extends Person {
  employeeId: number;
}

W tym przykładzie interfejs Employee rozszerza interfejs Person, dodając właściwość employeeId.

Wniosek

Interfejsy TypeScript są podstawową funkcją definiowania i wymuszania kształtów obiektów w kodzie. Używając interfejsów, możesz zapewnić spójność, poprawić czytelność kodu i wykorzystać potężne możliwości sprawdzania typów w TypeScript. Zacznij włączać interfejsy do swoich projektów TypeScript, aby tworzyć bardziej solidny i łatwy w utrzymaniu kod.