"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > Dominar las interfaces TypeScript: una guía completa con ejemplos prácticos

Dominar las interfaces TypeScript: una guía completa con ejemplos prácticos

Publicado el 2024-08-18
Navegar:659

Mastering TypeScript Interfaces: A Comprehensive Guide with Practical Examples

En TypeScript, las interfaces son una herramienta poderosa que se utiliza para definir la forma de un objeto. Implican la verificación de tipos, asegurándose de que los objetos que crea se adhieran a una estructura específica. A continuación se muestran varios casos en los que se utilizan habitualmente interfaces, junto con ejemplos:

1. Definición de la forma del objeto

Las interfaces se utilizan a menudo para definir la estructura de un objeto. Esto garantiza que cualquier objeto que se adhiera a la interfaz tendrá propiedades específicas.

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

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

2. Propiedades opcionales

Las interfaces le permiten definir propiedades opcionales usando el comando ? símbolo. Esto significa que el objeto puede tener o no esas propiedades.

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

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

3. Propiedades de solo lectura

Puedes definir propiedades como de solo lectura, lo que significa que no se pueden cambiar después de inicializarlas.

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. Tipos de funciones

Las interfaces se pueden utilizar para definir la forma de las funciones, especificando los tipos de parámetros y el tipo de retorno.

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

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

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

5. Extensión de interfaces

Las interfaces pueden ampliar otras interfaces, lo que permite la creación de tipos complejos combinando los existentes.

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. Implementación de interfaces en clases

Las clases pueden implementar interfaces, asegurando que se adhieran a la estructura de la interfaz.

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. Tipos indexables

Las interfaces pueden describir objetos que tienen propiedades con claves dinámicas de un tipo específico.

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

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

8. Tipos híbridos

Las interfaces pueden definir objetos que actúan como una función y como un objeto con propiedades.

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. Fusión de interfaces

TypeScript le permite fusionar múltiples declaraciones de la misma interfaz, lo cual es útil cuando se trabaja con bibliotecas o bases de código grandes.

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

interface Box {
  color: string;
}

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

Las interfaces en TypeScript brindan una forma flexible y poderosa de definir y aplicar formas de objetos, lo que permite una verificación de tipos sólida y un código claro y fácil de mantener.

Declaración de liberación Este artículo se reproduce en: https://dev.to/shanu001x/mastering-typescript-interfaces-a-comprehensive-guide-with-practical-examples-m8h?1 Si hay alguna infracción, comuníquese con [email protected] para borrarlo
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3