«Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты» — Конфуций, «Аналитики Конфуция. Лу Лингун»
титульная страница > программирование > Освоение интерфейсов TypeScript: подробное руководство с практическими примерами

Освоение интерфейсов TypeScript: подробное руководство с практическими примерами

Опубликовано 18 августа 2024 г.
Просматривать:462

Mastering TypeScript Interfaces: A Comprehensive Guide with Practical Examples

В TypeScript интерфейсы — это мощный инструмент, используемый для определения формы объекта. Они обеспечивают проверку типов, гарантируя, что создаваемые вами объекты соответствуют определенной структуре. Ниже приведены различные случаи частого использования интерфейсов, а также примеры:

1. Определение формы объекта

Интерфейсы часто используются для определения структуры объекта. Это гарантирует, что любой объект, привязанный к интерфейсу, будет иметь определенные свойства.

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

const user: User = {
  name: "John Doe",
  age: 30,
  email: "[email protected]"
};

2. Дополнительные свойства

Интерфейсы позволяют определять дополнительные свойства с помощью ? символ. Это означает, что объект может иметь или не иметь эти свойства.

interface Product {
  id: number;
  name: string;
  description?: string; // Optional property
}

const product: Product = {
  id: 1,
  name: "Laptop"
};

3. Свойства, доступные только для чтения

Вы можете определить свойства как доступные только для чтения, то есть их нельзя будет изменить после инициализации.

interface Config {
  readonly apiUrl: string;
  timeout: number;
}

const config: Config = {
  apiUrl: "https://api.example.com",
  timeout: 5000
};

// config.apiUrl = "https://newapi.example.com"; // Error: Cannot assign to 'apiUrl' because it is a read-only property.

4. Типы функций

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

interface Login {
  (username: string, password: string): boolean;
}

const login: Login = (username, password) => {
  return username === "admin" && password === "admin123";
};

console.log(login("admin", "admin123")); // true

5. Расширение интерфейсов

Интерфейсы могут расширять другие интерфейсы, позволяя создавать сложные типы путем объединения существующих.

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

interface Employee extends Person {
  employeeId: number;
  department: string;
}

const employee: Employee = {
  name: "Alice",
  age: 28,
  employeeId: 12345,
  department: "Engineering"
};

6. Реализация интерфейсов в классах

Классы могут реализовывать интерфейсы, гарантируя, что они соответствуют структуре интерфейса.

interface Animal {
  name: string;
  makeSound(): void;
}

class Dog implements Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  makeSound() {
    console.log("Woof! Woof!");
  }
}

const dog = new Dog("Buddy");
dog.makeSound(); // Woof! Woof!

7. Индексируемые типы

Интерфейсы могут описывать объекты, имеющие свойства с динамическими ключами определенного типа.

interface StringArray {
  [index: number]: string;
}

const myArray: StringArray = ["Hello", "World"];
console.log(myArray[0]); // Hello

8. Гибридные типы

Интерфейсы могут определять объекты, которые действуют как как функция, так и как объект со свойствами.

interface Counter {
  (start: number): void;
  interval: number;
  reset(): void;
}

const counter: Counter = (function (start: number) {
  console.log("Counter started at", start);
} as Counter);

counter.interval = 1000;
counter.reset = () => {
  console.log("Counter reset");
};

counter(10);
console.log(counter.interval); // 1000
counter.reset();

9. Объединение интерфейсов

TypeScript позволяет объединять несколько объявлений одного и того же интерфейса, что полезно при работе с большими базами кода или библиотеками.

interface Box {
  height: number;
  width: number;
}

interface Box {
  color: string;
}

const myBox: Box = {
  height: 20,
  width: 15,
  color: "blue"
};

Интерфейсы в TypeScript предоставляют гибкий и мощный способ определения и реализации форм объектов, обеспечивая строгую проверку типов и четкий, удобный в сопровождении код.

Заявление о выпуске Эта статья воспроизведена по адресу: https://dev.to/shanu001x/mastering-typescript-interfaces-a-comprehensive-guide-with-practical-examples-m8h?1. В случае нарушения прав обращайтесь по адресу [email protected]. удалить его
Последний учебник Более>

Изучайте китайский

Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.

Copyright© 2022 湘ICP备2022001581号-3