"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Dominando interfaces TypeScript: um guia abrangente com exemplos práticos

Dominando interfaces TypeScript: um guia abrangente com exemplos práticos

Publicado em 2024-08-18
Navegar:128

Mastering TypeScript Interfaces: A Comprehensive Guide with Practical Examples

No TypeScript, as interfaces são uma ferramenta poderosa usada para definir a forma de um objeto. Eles impõem a verificação de tipo, garantindo que os objetos criados sigam uma estrutura específica. Aqui estão vários casos em que interfaces são comumente usadas, juntamente com exemplos:

1. Definindo a forma do objeto

As interfaces são frequentemente usadas para definir a estrutura de um objeto. Isso garante que qualquer objeto aderido à interface terá propriedades específicas.

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

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

2. Propriedades opcionais

As interfaces permitem definir propriedades opcionais usando o ? símbolo. Isso significa que o objeto pode ou não ter essas propriedades.

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

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

3. Propriedades somente leitura

Você pode definir propriedades como somente leitura, o que significa que elas não podem ser alteradas após serem inicializadas.

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 função

As interfaces podem ser usadas para definir a forma das funções, especificando os tipos de parâmetros e o 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. Estendendo Interfaces

As interfaces podem estender outras interfaces, permitindo a criação de tipos complexos combinando os 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. Implementando Interfaces em Classes

As classes podem implementar interfaces, garantindo que elas sigam a estrutura da interface.

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 indexáveis

As interfaces podem descrever objetos que possuem propriedades com chaves dinâmicas de um tipo específico.

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

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

8. Tipos híbridos

As interfaces podem definir objetos que atuam tanto como uma função quanto como um objeto com propriedades.

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. Mesclagem de interfaces

TypeScript permite mesclar várias declarações da mesma interface, o que é útil ao trabalhar com grandes bases de código ou bibliotecas.

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

interface Box {
  color: string;
}

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

As interfaces em TypeScript fornecem uma maneira flexível e poderosa de definir e impor formas de objetos, permitindo uma verificação de tipo forte e um código claro e de fácil manutenção.

Declaração de lançamento Este artigo foi reproduzido em: https://dev.to/shanu001x/mastering-typescript-interfaces-a-comprehensive-guide-with-practical-examples-m8h?1 Se houver alguma violação, entre em contato com [email protected] para excluí-lo
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3